MVC Asp.Net 控制器将原始 JSON 返回到新窗口答案

【问题标题】：MVC Asp.Net Controller returns raw JSON to new windowMVC Asp.Net 控制器将原始 JSON 返回到新窗口
【发布时间】：2017-11-21 19:24:36
【问题描述】：

就像我的标题所说，我的 MVC 控制器总是在新窗口中返回 JsonResult 并且不将其返回给 ajax 成功事件。

我还尝试通过 Ajax 从控制器获取数据或将内容类型更改为“application/json”之类的内容，但我总是会得到一个包含原始 Json 数据的新窗口。在我看来，问题必须与控制器有关，否则 javascript 无法捕获 json 数据。

这也不是特定于浏览器的问题，我在每个常见的浏览器中都有这个问题。

有什么我想念的还是很奇怪？

控制器：

    public JsonResult Update(ChangeUserInformationViewModel model)
    {
        var user = UserManager.FindById(User.Identity.GetUserId());
        user = model.User;
        UserManager.Update(user);
        return Json(new { success = true }, JsonRequestBehavior.AllowGet);
    }

阿贾克斯：

$(document).ready(function () {

$('#save-user-alert').click(function () {
    $("#ChangeUserInformation").submit();
});

$('#save-user-alert').on("submit", function (event) {
    event.preventDefault();
    var url = $(this).attr("action");
    var formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: url,
        data: formData,
        contentType: "json",
        success: function (resp) {
            if (resp.success) {
                swal("Goo Job!", "Yippii", "success");
            };
        },
        error: function (resp) {
            swal("Failes", "Upps.. something went wrong", "danger");
        }
    });
});

});

HTML：

@using (Html.BeginForm("Update", "User", FormMethod.Post, new { id = "ChangeUserInformation" }))
                            {
                                <div class="form-group">
                                    <label for="Username">Username</label>
                                    @Html.TextBoxFor(x => x.User.UserName, new { @class = "form-control", value = Model.User.UserName, id = "Username" })
                                </div>

                                <div class="form-group">
                                    <label for="FirstName">First Name</label>
                                    @Html.TextBoxFor(x => x.User.Firstname, new { @class = "form-control", value = Model.User.Firstname, id = "FirstName" })
                                </div>
                                <div class="form-group">
                                    <label for="LastName">Last Name</label>
                                    @Html.TextBoxFor(x => x.User.LastName, new { @class = "form-control", value = Model.User.LastName, id = "LastName" })
                                </div>
                            }
                            <button class="btn btn-danger waves-effect waves-light btn-sm" id="save-user-alert">Click me</button>

请帮帮我！

塞巴斯蒂安

【问题讨论】：

按钮#save-user-alert 不会生成提交事件（表单#ChangeUserInformation 会）——因此事件处理程序不会做任何事情。而且由于您正在发出 ajax 请求，因此您不想这样做 .submit()。

标签： javascript asp.net json ajax asp.net-mvc

【解决方案1】：

您正在浏览器中获取 JSON 响应，因为您的代码不是在执行 ajax 发布，而是在执行正常的表单提交。

为什么不做ajax提交？

因为您没有任何代码可以这样做。您将 submit 事件绑定到错误的元素。您应该将其绑定到表单，而不是按钮。

$('#ChangeUserInformation').on("submit", function (event) {
     event.preventDefault();
   // do your ajax call
});

现在当用户点击另一个按钮时，它会调用表单上的submit 事件，并调用上面的提交事件处理程序，它会进行一个ajax 调用..

【讨论】：

耶稣，谢谢。对不起，我对 javascript 有点新，类似的东西。帮了我很多，谢谢:)

【解决方案2】：

我认为问题在于您正在使用表单提交来进行 ajax 调用。

将您的 javascript 代码更改为此以删除提交行为：

$('#save-user-alert').click(function () {

event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();

$.ajax({
    type: "POST",
    url: url,
    data: formData,
    contentType: "json",
    success: function (resp) {
        if (resp.success) {
            swal("Goo Job!", "Yippii", "success");
        };
    },
    error: function (resp) {
        swal("Failes", "Upps.. something went wrong", "danger");
    }
 });
});

【讨论】：