在 ASP.NET MVC 下从 jquery 生成的弹出窗口提交表单答案

【问题标题】：Submitting a form from a jquery generated pop-up under ASP.NET MVC在 ASP.NET MVC 下从 jquery 生成的弹出窗口提交表单
【发布时间】：2012-07-05 14:21:05
【问题描述】：

我正在尝试复制类似于 StackOverflow 上的“标志”功能的功能，其中用户单击“删除”链接。然后向他们显示一个弹出窗口（使用 jQuery），提示他们删除项目的原因。它们通过一系列单选按钮以及“其他”文本框提供了一些预定义选项。他们必须在提交表单之前选择其中一个选项，然后表单将执行一些服务器端操作，然后初始弹出窗口会消失（我会在几个地方处理一些文本）。

我已经准备好弹出窗口，并在此弹出窗口中呈现了一个包含各种选项的表单，但我不确定如何处理此表单的发布。如果我将其视为普通表单，当用户单击弹出窗口中的提交按钮时，它将不会执行任何 ajax 功能，而是发布到我的控制器操作方法之一，然后我需要（服务器端) 重定向回我的页面，以便查看更改。

在 AJAX 类型场景中通常如何处理从弹出窗口中收集的数据？任何人都可以提供任何例子吗？我看不出 SO 是如何使用“标志”功能做到这一点的。

【问题讨论】：

标签： jquery asp.net-mvc forms

【解决方案1】：

您可以使用 MVC 的内置 AJAX 助手。大致如下……

声明一些 AJAX 选项：

@{
    AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "target" };
}

然后使用 AJAX BeginForm 方法声明您的表单：

@using (Ajax.BeginForm("GetData", ajaxOpts))
{
  @* Here you put your form data. I'm guessing your popup could just be a DIV that gets positioned and made visible *@


}

当 AJAX 请求返回时您要更新的目标只是一个简单的 DIV：

<div id="target">  
    @* The output of your GetData controller method will end up here *@
    @Html.Action("GetData", new { model = Model })
</div>

然后在你的控制器中你有一些东西会返回一个包含你的数据的 PartialView：

  public PartialViewResult GetData(ViewModel model)
  {
     // Do some stuff here to fetch some data
     // ViewModel will be whatever your view model is called

     return this.PartialView("GetData", model);
  }

这是让 AJAX 工作的基础。如果您想获取发送回浏览器的 HTML 并更新页面的不同位，则必须添加一个 jQuery 函数，通过为 AjaxOptions 的 OnComplete 参数指定一个函数来调用 AJAX 助手。

您的局部视图中的数据可能包含一些隐藏的 HTML 块，您可以将它们移动到浏览器的其他位置。

不幸的是，MVC AJAX 助手只支持一个 UpdateTargetId。

编辑以添加

您需要在 web 配置文件的 appSettings 中进行设置：

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

您还需要在您的 html 输出中包含 jQuery 扩展（可能在您的 _Layout.cshtml 文件中？）：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

【讨论】：

【解决方案2】：

您可以覆盖表单的提交行为，然后将序列化的表单结果以 AJAX 帖子的形式发送到服务器。

$('#myForm').submit(function() {

    $.ajax({
      url: "MyPage.aspx",
      type: "POST",
      data: $(this).serialize(),
      dataType: "text"
    });

    return false;
});

【讨论】：