0

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

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

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

4

2 回答 2

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>
于 2012-07-05T14:49:30.070 回答
0

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

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

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

    return false;
});
于 2012-07-05T14:26:59.647 回答