0

この MVC フォームには 2 つのドロップダウン リストがあり、最初のドロップダウンを選択すると、AJAX 呼び出しを介して 2 番目のドロップダウンが更新されます。

フォームは次のようになります。

<%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 コードが原因) が発生し、2 番目にページが完全に更新されるようです。

明らかに私が欲しいものではありません。

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 メソッドを使用して、2 番目のドロップダウンリストの内容を変更します

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

次の投稿のおかげでこのメソッドを見つけました: Render partial form in jQuery dialog

これは、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 に答える