使用 JQuery 在 Ajax.BeginForm 上触发帖子

Question

我有这个带有 2 个下拉列表的 MVC 表单，其中第一个下拉列表中的选择应通过 AJAX 调用更新第二个下拉列表。

表单如下所示：

<%using (Ajax.BeginForm("GetChildren", "Home", null, new AjaxOptions { UpdateTargetId = "result" }, new Dictionary<string, object> { { "id", "someForm" } }))
{ %>
<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>
<% } %>

使用以下 JQuery 脚本：

$(function () {
    $("#masterSelection").change(function () {
        $("#someForm").submit();
    });
});

这将转换为以下客户端 HTML

<form action="/Home/GetChildren" id="someForm" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;result&#39; });">

如果我正确的话，onsubmit 应该处理 AJAX 调用，并防止表单的正常行为（完全刷新）。

现在，在 Firefox 中一切正常，但在 IE 中，默认行为似乎没有取消，导致 AJAX 调用（由表单的 onsubmit 代码引起），然后完全刷新页面。

显然不是我想要的。

当我调试 onsubmit javascript 代码时，它归结为 MicrosoftAjax.js 文件中的一个方法，该方法应该取消我的表单的默认发布行为。

function Sys$UI$DomEvent$preventDefault() {
    /// <summary locid="M:J#Sys.UI.DomEvent.preventDefault" />
    if (arguments.length !== 0) throw Error.parameterCount();
    if (this.rawEvent.preventDefault) {
        this.rawEvent.preventDefault();
    }
    else if (window.event) {
        this.rawEvent.returnValue = false;
    }
}

在使用 IE 进行调试时，我遇到了 this.rawEvent.returnValue = false; 行这对于取消 IE 中的事件应该是正确的，但显然这对我不起作用。

我已经制定了替代解决方案，其中我使用 jQuery 触发 AJAX 调用并构建新的下拉列表客户端或另一个解决方案，其中我向表单添加一个不可见按钮以在第一个更改事件中调用它的单击事件下拉菜单，但我仍然想使用第一个（我认为是最干净的）。

有什么建议吗？

S。

Answer 1

我进行了更多搜索，并提出了以下内容，这不如简单调用 $("#someForm").submit(); 但我仍然更喜欢构建AJAX 调用或调用隐藏按钮上的单击后的下拉列表客户端。

我已从页面中删除了 Ajax.BeginForm。

<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>

并使用 jquery 加载方法来更改我的第二个下拉列表的内容，

    $(function () {
        $("#masterSelection").change(function () {
            $('#result').load("Home/GetChildren", { masterSelection: this.value });
        });
    });

由于以下帖子，我找到了此方法：在 jQuery 对话框中渲染部分表单

这对我来说适用于 IE 和 FF。

我仍然想知道为什么我的第一个代码在 IE 中不起作用。

Answer 2

你解决这个问题了吗？您可以在 window.Event 中设置一个 alert() 来查看 IE 是否确实在调用它吗？另外，您可以简单地尝试 return false(); 而不是 this.rawEvent.returnValue = false;