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

时间:2017-11-21 19:24:36

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

就像我的标题所说,我有一个问题,我的MVC控制器alwas在新窗口中返回JsonResult并且不会将其返回到ajax成功事件。

我还尝试通过Ajax从Controller获取数据,或者将contenttype更改为" 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);
    }

Ajax:

$(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>

请帮助我!

塞巴斯蒂安

2 个答案:

答案 0 :(得分:1)

我认为问题在于您使用提交表单进行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");
    }
 });
});

答案 1 :(得分:1)

您正在浏览器中获取JSON响应,因为您的代码没有执行ajax帖子,而是正在进行正常的表单提交。

为什么不提交ajax?

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

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

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