jquery - MVC 3 - 通过jquery提交表单并部分页面刷新以显示发布后的结果

Question

我在 MVC 3 中有一个表单。目前我正在执行以下操作来发布该表单。 表单正在发布，并且正在进行全页面刷新以显示结果。

提交后，控件将发送状态成功或失败。就是这样。 我只需要根据返回的状态在 div 中显示成功或失败消息。

有人知道如何在 MVC 3 中执行此操作的高级步骤吗？

<div id="ShowResultHere"></div>

@using (Html.BeginForm("Update", "Test", FormMethod.Post, new { id="frmUpdate"}))
{
   //form fields
   <button type="submit" class="sprt bg_red bt_red h27">Update</button>
}

[HttpPost]
public ActionResult Update(TestModel model)
{
   return Json(new { s = "Success" });
}

我希望 Success 静静地出现在 ShowResultHere div onsuccess 回调中。

这可以在 MVC 3 中完成吗？

Answer 1

您可以订阅表单的 submit 事件并执行 AJAX 调用，如下所示:

$(function() {
    $('#frmUpdate').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
               // The AJAX call succeeded and the server returned a JSON 
               // with a property "s" => we can use this property
               // and set the html of the target div
               $('#ShowResultHere').html(result.s);
            }
        });
        // it is important to return false in order to 
        // cancel the default submission of the form
        // and perform the AJAX call
        return false;
    });
});