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调用并且还会阻止表单的正常行为（完全刷新）。

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

有什么建议吗？

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 });
        });
    });

我发现这个方法归功于以下帖子：Render partial form in jQuery dialog

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

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

Answer 2

你有没有解决这个问题？你可以在window.Event中设置alert()，看看IE是否真的在调用它吗？此外，您只需尝试return false();而不是this.rawEvent.returnValue = false;

使用JQuery在Ajax.BeginForm上发布消息

2 个答案: