ASP.Net MVC & JQuery Ajax - 页面被 json 结果替换答案

【问题标题】：ASP.Net MVC & JQuery Ajax - page is replaced with json resultASP.Net MVC & JQuery Ajax - 页面被 json 结果替换
【发布时间】：2016-11-24 04:06:28
【问题描述】：

我正在做一个 ajax 调用来更新一个实体，然后在 mvc 控制器中我返回状态成功 = true || false 有错误。

我的问题来自控制器的返回。页面在变化，url变成mvc控制器动作的url，页面内容就是json结果。

这个问题的原因是什么？

这是我的 javascript 方法的代码：

$("#submit-button").on("submit", "#formId", function (e) {
    e.preventDefault();

    var form = $(this);

    $.ajax({
        url: form.attr("action"),
        dataType: 'Json',
        method: form.attr("method"),
        data: form.serialize(),
        success: function (data) {
            console.log(data);
        }
    });
});

这是我的控制器的代码：

[HttpPost]
public JsonResult UpdateEntity(UpdateEntityViewModel model)
{
    if (ModelState.IsValid)
    {
        _updateEntityService.Execute(model);
        return Json(new { success = true });
    }

    return Json(new { success = false, ModelState.GetErrors() });
}

如果有人能指出我做错了什么！提前致谢。

编辑：

这是表单代码：

@using (Html.BeginForm("Entity", "UpdateEntity", new { Area = "MyArea" }, FormMethod.Post, new { @id = "formId" }))
{
    // ... form code

    <button id="submit-button" type="submit" class="btn btn-primary">
        Modifier
    </button>
}

【问题讨论】：

因为您的提交是正常的。我怀疑您是否真的有一个带有id="submit-button" 的元素，其中包含form。显示表单的 html 和提交按钮
检查编辑，我添加了我的表单代码。我的代码已针对该问题进行了修改，但我仔细检查了它们，它们存在于双方并且它们是相同的
它的$('#formId).submit(function(e) { e.preventDefault(); .... }); - 你的代码正在监听按钮内部表单的提交事件（而不是相反） - 你的脚本永远不会运行，你只是在做一个正常的提交
哦，你太对了....我绝对应该去睡觉了...与其工作到很晚，不如按我的预期工作！

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

【解决方案1】：

将脚本更改为

$("#formId").submit(function(e) {
    e.preventDefault();
    var form = $(this);
    $.ajax({
        ....
    });
});

您当前的脚本正在处理 <form id="formId" ... > 元素的提交事件，该元素存在于您的 <button id="submit-button" ..> 元素中，该元素不存在（按钮位于表单内），因此脚本永远不会执行并且您制作了一个正常提交，将JsonResult 返回到新页面。

【讨论】：