动态生成的Ajax.BeginForm

Question

我对 ASP.NET MVC Ajax 表单有疑问。我在一个表中生成了几个 Ajax 表单，如下所示：

<% 
foreach (var item in Model)
       {
           var statefulItem = item as StatefulEffectiveItem; %>
    <tr>
        <td>
            <% using (Ajax.BeginForm("ShowAddActivity", "EffectiveItems", new { id = item.Id }, new AjaxOptions() { UpdateTargetId = "details", OnSuccess = "dialogIt" }))
               { %>
            <input type="submit" name="activity" value="Add Activity" />
            <% } %>
        </td>
    </tr>
    <% } %>

到目前为止一切顺利。当我发布其中一个表单时，它会在 div 中呈现一个部分视图，并且这个新的部分视图包含一个新的 Ajax.BeginForm （它不嵌套在发起者表单中）。第二个 Ajax.BeginForm 与我在表中生成的绝对相似，但是当我发布它时，我没有得到“Ajax post”，而是一个将我发送到新页面的普通帖子。我不明白是什么导致了这两个 Ajax 表单之间的差异，为什么这个“动态生成”Ajax 表单的行为就像普通的 html 表单一样？

顺便说一句，我知道我可以使用 Javascript 以不同的方式完成此操作，但我想了解是否可以仅使用 MVC 帮助程序和 Ajax 库来完成此操作，如果答案是“是”，我在哪里做错了。

非常感谢，

黄蜂

Answer 1

我不知道是否可以用 MS AJAX 来完成，但我可以告诉你出了什么问题。一旦您更新第一个 ajax 上的部分，此更新的部分包含用于为新表单注册 ajax 的 javascript。此 JavaScript 未执行，因为没有任何信息告诉它执行。您必须在第一个 ajax 请求的成功回调中调用为第二个表单注册 ajax 的 javascript 函数。

Answer 2

编辑 /scripts/jquery.unobtrusive-ajax.js 文件

更改

$("a[data-ajax=true]").on("click", function (evt) { ..... }

为

$(document).on("click","a[data-ajax=true]", function (evt) { ...... }

对文件中的所有其他事件注册执行此操作。

$(document).on("click","form[data-ajax=true] input[type=image]"
$(document).on("click","form[data-ajax=true] :submit"
$(document).on("submit","form[data-ajax=true]", 

通过这种方式，您可以将事件注册到文档，从而允许对动态添加的元素进行事件处理。 jQuery 之前使用“.live()”，但现在您可以通过使用“.on()”方法向文档添加事件处理程序来实现此目的。