如何在ASP.NET MVC中通过Ajax提交表单？

Question

我有一个由几个局部视图组成的视图，其中之一显示用户信息以及一个 Edit 按钮。

当点击 Edit 按钮时，我会发起一个 ajax 调用到另一个 Action，它返回一个 Partial View 并加载到 JQuery-UI 模态对话框中。

如何通过 Ajax 提交此编辑表单并更新主页面上的 UserInfo 局部视图？

- stephen776

---

请查看以下与编程有关的内容：http://mrgsp.md:8080/awesome/foobar（单击创建或编辑） - Omu

这基本上就是我需要做的... 但那看起来只是一个演示... 不像是教程或其他什么东西... - stephen776

Answer 1

Ajax Call

$('#submitIt').submit(function() {
    var createdBy = $('#createdBy').val();
    $.ajax({
         type: "POST",
         url: '/MyController/GetContact/',
         dataType: "html",
         data: { 'createdBy': createdBy },
         success: function (result) {
            $('#myLittleForm').html(result);
         },
         error: function (request, status, error) {
              //Do Something on Failure
         }
     });
});

Controller

    [HttpPost]
    public ActionResult GetContact(string createdBy)
    {
         ViewData["CreatedBy"] = createdBy;
         return PartialView("MyView");
    }

标记

<div id="myLittleForm">
   <form action="/MyController/GetContact/" method="post">
      <input id="createdBy" type="text"/> <br/>
      <input id="submitIt" type="submit" value="Submit"/>
   </form>
</div>

注意

当您提交标记下的表单时，将进行ajax调用，并将"myLittleForm" div替换为您的部分视图。

- Jason

---

发起ajax调用不是我的问题...基本上我需要知道控制器将如何处理ajax post，然后更新主页面上的部分视图（而无需重新加载整个主页面）... - stephen776

好的，我现在明白了。我会尝试一下。 - stephen776

Answer 2

编辑：糟糕，脚本没有显示-正在修复

您需要引用此处显示的Ajax脚本：

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

<script src="../../Scripts/AjaxLoadedContentScriptFix.js" type="text/javascript"></script>

我不记得最后一个脚本是什么，但我在我的应用程序中使用它，所以它可能没有问题 :)

然后您需要在视图中使用Ajax.BeginForm来异步提交表单。它需要一个AjaxOptions参数，允许您指定更新目标、成功回调等。例如：

<% Ajax.BeginForm("FormName" , new { id = Model.SomeProperty }, 
       new AjaxOptions { UpdateTargetId = "MyDivToUpdate", OnSuccess = "onSuccess" }); %>

- jlnorsworthy