jQuery.Ajax与Ajax.beginform一起使用不引人注目的JavaScript

Posted 2021-03-31

第一篇文章，请温柔:)

我是MVC3的新手，正在构建一个webapp工作。

我有几个CheckBoxes页面打开/关闭功能，当他们改变我通过jQuery Ajax调用提交并返回json成功/失败给我，所以我可以显示一条消息。

我有一些表单，其中包含一些字段，我只是提交（不是使用Ajax）并检查模型状态是否有效等等。如果没有，则重新显示表单和消息。我想用Ajax来做这件事。

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

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

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

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

在构建“Ajax”网络应用程序时，有谁能说出最佳做法是什么？

答案

你可以使用普通的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。