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

Posted 2023-04-13

【中文标题】如何在 ASP.NET MVC 中通过 Ajax 提交表单？

【英文标题】：How do I submit a form via Ajax in ASP.NET MVC?

【发布时间】：2011-06-16 14:20:56

【问题描述】：

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

单击Edit 按钮时，我对另一个Action 进行ajax 调用，该调用返回一个Partial View，该Partial View 被加载到JQuery-UI 模式对话框中。

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

【问题讨论】：

看这里mrgsp.md:8080/awesome/foobar（点击创建或编辑）

这几乎是我需要做的......但这看起来只是一个演示......不是教程或任何东西......

【参考方案1】：

Ajax 调用

$('#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
         
     );
);

控制器

    [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 调用，并将 div“myLittleForm”替换为您的局部视图。

【讨论】：

进行 ajax 调用不是我的问题...基本上我需要知道控制器将如何处理 ajax 帖子然后更新主页上的部分视图（无需重新加载整个主页)...

好的，我想我现在明白了。我会试试看。

【参考方案2】：

编辑：哎呀，脚本没有显示 - 修复 您需要参考此处显示的 Ajax 脚本：

我不记得最后一个脚本是什么，但我在我的应用程序中使用它，所以它可能不会受到伤害:)

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

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