0

我有这个带有 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 调用并构建新的下拉列表客户端或另一个在表单中添加一个不可见按钮以在第一个的更改事件中调用它的单击事件下拉，但我仍然想使用第一个（最干净的 imo）。

有什么建议吗？

S。

4

2 回答 2

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 load 方法更改我的第二个下拉列表的内容

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

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

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

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

于 2010-07-05T09:13:58.080 回答
0

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

于 2010-07-01T14:18:45.990 回答