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

Question

第一次发帖，请温柔:)

我对 MVC3 比较陌生，正在构建一个 web 应用程序。

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

我有一些表单，其中包含我刚刚提交的一堆字段（不是使用 Ajax）并检查模型状态是否有效等。如果不是，则重新显示带有消息的表单。我想使用 Ajax 来代替。

我有一个使用 Ajax.BeginForm 的表单，它正确地提交给控制器，模型被验证，如果它有错误，我返回一个使用 UpdateTargetId 替换的局部视图。

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

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

我可以使用 jQuery.Ajax 提交表单并在控制器中返回 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。