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

Question

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

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

在

AJAX 类型方案中，通常如何处理弹出窗口中的数据集合？谁能提供任何例子？我看不出 SO 如何使用"标志"功能做到这一点。

Answer 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>

然后在您的控制器中，您有一些东西返回包含您的数据的 PartView：

  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>

Answer 2

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

$('#myForm').submit(function() {
    $.ajax({
      url: "MyPage.aspx",
      type: "POST",
      data: $(this).serialize(),
      dataType: "text"
    });
    return false;
});