Question

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

提交后，controll将发送状态成功或失败。而已。我只需要在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" });
}

我希望成功在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;
    });
});

Answer 2

你也可以通过不写任何javascript来实现这一点。使用AJAX表单

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

@using (Ajax.BeginForm("Update", new AjaxOptions { UpdateTargetId = "ShowResultHere" }))
{

}

在您的控制器中

[HttpPost]
public ActionResult Update(TestModel model)
{
    if(blah)
        return PartialView("Success")
    return PartialView("Failed")
}

这样做意味着您必须制作两个视图。但这意味着没有写javascript。

Answer 3

查看此示例Async operations with jQuery Ajax and Asp.Net MVC

Answer 4

如果您通过jQuery Ajax提交表单，则可以在成功回调函数中显示客户端的消息。

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

4 个答案: