MVC with Ajax 和 jQuery 表单提交问题

Question

我正在使用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>

Answer 1

您需要在 JS 中捕获提交。

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

您拥有它的方式将更改视图，因为当您进行普通表单提交时，它希望根据它得到的任何结果更改其视图。

Answer 2

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

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

不用说，你必须包括

jquery.unobtrusive-ajax.js