带有 Ajax 和 jQuery 表单提交问题的 MVC答案

【问题标题】：MVC with Ajax and jQuery form submit issue带有 Ajax 和 jQuery 表单提交问题的 MVC
【发布时间】：2015-03-27 19:08:11
【问题描述】：

我正在使用 MVC 4 并提交一个 Ajax 表单，我已经验证它正在成功更新模型数据库。我正在向用户显示一个 jQuery 对话框，用户可以在对话框中编辑表单字段，然后更新或取消。

一切正常，直到我更新表单。我没有关闭 jQuery 对话框，而是将我的控制器的 Json 返回值转储到一个空白页面上。有什么想法吗？

查看：

@using (Ajax.BeginForm("Edit", "References", new AjaxOptions 
{
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    OnSuccess = "updateSuccess"
}, new { @id = "updateCarForm" }))
{
//etcetera

控制器：

public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            ReferencesData referencesData = db.ReferencesDatas.Find(id);
            if (referencesData == null)
            {
                return HttpNotFound();
            }
            return PartialView(referencesData);
        }

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "make, model, colour")] ReferencesData referencesData)
        {
            if (ModelState.IsValid)
            {
                db.Entry(referencesData).State = EntityState.Modified;
                db.SaveChanges();
                return Json(JsonResponseFactory.SuccessResponse("Woohoo"), JsonRequestBehavior.DenyGet);
            }
            else
            {
                return Json(JsonResponseFactory.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);
            }
        }

Javascript：

<div id="updateDialog" title="Update Car"></div>
    <script type="text/javascript">
        var linkObj;
        $(function () {
            $(".editLink").click(function () {
                //change the title of the dialog
                linkObj = $(this);
                var opt = {
                    autoOpen: false,
                    width: 1145,
                    height: 600,
                    resizable: false,
                    modal: true,
                    title: 'Edit Reference',
                    buttons: {
                        "Update": function () {
                            $("#update-message").html(''); //make sure there is nothing on the message before we continue
                            $("#updateCarForm").submit();
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                };

                var dialogDiv = $("#updateDialog").dialog(opt);
                var viewUrl = linkObj.attr('href');
                $.get(viewUrl, function (data) {
                    dialogDiv.html(data);
                    //validation
                    var $form = $("#updateCarForm");
                    // Unbind existing validation
                    $form.unbind();
                    $form.data("validator", null);
                    // Check document for changes
                    $.validator.unobtrusive.parse(document);
                    // Re add validation with changes
                    $form.validate($form.data("unobtrusiveValidation").options);
                    //open dialog
                    dialogDiv.dialog('open');
                });
                return false;
            });

        });


        function updateSuccess(data) {
            if (data.Success == true) {
                //we update the table's info
                var parent = linkObj.closest("tr");
                parent.find(".carName").html(data.Object.Name);
                parent.find(".carDescription").html(data.Object.Description);
                //now we can close the dialog
                $('#updateDialog').dialog('close');
                //twitter type notification
                $('#commonMessage').html("Update Complete");
                $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
            }
            else {
                $("#update-message").html(data.ErrorMessage);
                $("#update-message").show();
            }
        }

    </script>

【问题讨论】：

问题是 AjaxHelper.BeginForm() 被设置为将内容替换为 html 而不是将响应处理为 JSON。见this answer。
嗨，Jasen，我尝试添加 var json = e.get_response().get_object();警报（json.success）；如果这就是你所指的，我的 jQuery，但仍然是同样的问题。任何其他见解都非常感谢！
您需要稍微修改一下AjaxOptions，然后指定一个javascript函数来处理响应。在您的情况下，the other answer 可能比对该问题的公认答案更好；我很抱歉不清楚这一点。但是，我通常发现放弃 AjaxHelper 并改用 jQuery.post() 会更容易。
非常感谢您的帮助，明天将尝试您的建议

标签： jquery ajax asp.net-mvc

【解决方案1】：

你需要在 JS 中捕获提交。

$('form').submit(function(){
   //serialize form
   $.post(url,{formData}function(json){
      //do what you want with the json
   })
})

你拥有它的方式会改变视图，因为当你提交一个普通的表单时，它想用它得到的结果来改变它的视图。

【讨论】：

【解决方案2】：

您是否在 web.config 中启用了 Unobtrusivejavascript

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

不用说你必须包括

jquery.unobtrusive-ajax.js

【讨论】：