jQuery.Ajax 与 Ajax.beginform 与不显眼的 JavaScript

Question

第一次发帖，请多多包涵:)

我对 MVC3 比较陌生，正在工作中构建一个 Web 应用程序。

我有几个带有复选框的页面，可以打开/关闭功能，当它们更改时，我通过 jQuery Ajax 调用提交并向我返回 json 成功/失败，以便我可以显示消息。

我有一些带有一堆字段的表单，我刚刚提交(不是使用Ajax)并检查模型状态是否有效等..如果无效，则重新显示带有消息的表单。我想使用 Ajax 来完成此操作。

我有一个使用 Ajax.BeginForm 的表单，它可以正确提交到 Controller ，模型经过验证，如果有错误，我会返回一个部分 View ，该 View 将使用 UpdateTargetId 进行替换。

我想做的是......如果模型有效并且保存成功，我仍然需要返回部分 View ，因为无论如何 UpdateTargetId 都会替换我的表单。我想发回某种“成功”标志，这样我就可以显示一条消息说“您的数据已保存”或其他内容。

如果 Ajax 调用成功，则触发 OnSuccess，并且不关心模型是否有效。

我可以使用 jQuery.Ajax 提交表单，并在 Controller 中返回 PartialView 以及我认为成功或失败？

谁能说出构建“Ajax”网络应用程序时的最佳实践是什么？

Answer 1

您可以使用纯 JavaScript，而不是使用 Ajax.Beginform 辅助方法来处理此问题。

@model ProductViewModel
<div id="divForm">
@using(Html.Beginform())
{
  @Html.TextBoxFor(x=>x.Name)
  @Html.TextBoxFor(x=>x.Location)
  <input type="submit" id="btnSave" />
}
</div>
<div id="divItem" />
<script type="text/javascript">
  $(function(){
    $("#btnSave").click(function(e){
         e.preventDefault();   // prevent the default form submit

         var form=$(this).closest("form");
         $.post(form.attr("action"),form.serialize(),function(result){
            if(result.Status=="success")
            {
              //show message and load the new partial view if needed.
              $(#divForm").hide();
              $("#divItem").html(reuslt.ViewHTML);
            }
            else
            {
               alert("Error");
            }
         });
    });
  });
</script>

假设您有一个 HttpPost 操作方法，它接受我们的表单提交并返回 JSON 数据。

[HttpPost]
public ActionResult Edit(ProductViewModel model)
{
  // here you may validate the model and save if needed and return JSON back.
  //to do  : return JSON
}

响应 JSON 应采用以下格式。

{ "Status" : "success", "ViewHTML" : "<p>This is some markup</p>" }

This答案解释了如何在 JSON 响应中返回 ViewResult。