Question

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

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

如何在弹出窗口中收集数据通常在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>

然后在您的控制器中，您可以返回包含数据的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。

编辑以添加

您需要在网络配置文件中的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;
});

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

2 个答案: