如何在MVC 4中向控制器操作方法发送JSON对象

Question

我正在尝试将我的用户ID和密码发送到我的登录控制器操作方法。

//Login button click code

$("#btnLogin").click(function () {
    var userCrdential = {
        UserName: $("inputEmail3").val(),
        Password: $("inputPassword3").val()
    };
    $.ajax({
        type: "POST",
        url: "/Home/Login",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: userCrdential,
        success: function (res) {
          //  alert("data is posted successfully");
            if (res.success == true)
                alert("data is posted successfully");
            else {
               // alert("Something went wrong. Please retry!");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.statusMessage);
        }
    }); 
});

在我的主控制器中，我有一个名为登录（login）的操作（Action）方法。

    [HttpPost]
    [ActionName("Login")]
    public ActionResult Login(User userCrdential)
    {
        string userIdtest = userCrdential.UserName;
        string userPasswordtest = userCrdential.Password;
        var result=false;

        if (userIdtest != null && userPasswordtest != null)
        {
             result = true;
        }
        else
        {
             result = false;
        }

        return Json(result);
        //return RedirectToAction("Index");
    }

但是我的操作方法没有被调用...

- Debashrita

---

在 Firebug 中，它显示帖子是正常的，但显示以下错误："NetworkError: 404 Not Found - http://localhost:49996/BlueBusApp/@Url.Action(%22Login%22,%20%22Home%22)"...... 我从 Content 文件夹中的 Common.js 文件进行了此 ajax 调用，我的控制器 Action 方法位于 Home 控制器中... - Debashrita

Answer 1

您需要将content更改为contentType，并在数据上调用JSON.stringify：

$.ajax({
    type: "POST",
    url: "/Home/Login",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(userCrdential),
    ...
}); 

请参见 jQuery.ajax。

- haim770

Answer 2

在MVC中，您永远不应该硬编码URL。

相反，请使用@Url.Action。

url: ('@Url.Action("Login", "Home")',

userCrdential 需要进行 JSON 编码：

JSON.stringify(userCrdential)

此外，为了您的心理健康，请使用fail方法。

$.ajax("url")
    .done(function() {
    alert("success");
})
    .fail(function() {
    alert("error");
})

最后一点，success在jQuery 1.8中已被弃用；您应该使用done代替。

- Mihai Dinculescu

---

因为如果您更改路由器设置，则硬编码的值将变为无效，您将不得不更新两个位置而不是一个。 - Mihai Dinculescu

Answer 3

只需要将它改成：

var userCrdential = {
    UserName: $("inputEmail3").val(),
    Password: $("inputPassword3").val()
};

至：

var userCrdential = "UserName=" + $("inputEmail3").val() + "&Password=" + $("inputPassword3").val();

你的代码中其他部分都没问题，但要确保你的控制器参数与此处传递的参数相同，即UserName和Password。

不过，在调用ajax之前，你需要检查用户输入。

- raju1208

---

嗨，我在Firebug中遇到了以下错误：NetworkError：404 Not Found - http://localhost:49996/Home/Login "我的ajax调用在Common.js文件中，而我的Login Controller Action位于HomeController内... - Debashrita

只需将控制器操作从public ActionResult Login(User userCrdential)更改为public JsonResult Login(User userCrdential)。 - raju1208