asp.net - SimpleModalはASP.Netポストバックを破ります

Question

ASP.NetプロジェクトでjQueryとSimpleModalを使用して、Webアプリ用の優れたダイアログを作成しています。残念ながら、モーダルダイアログのボタンはポストバックを実行できなくなります。これは実際には受け入れられません。

回避策で見つけたソースが1つありますが、必要なすべての手順を完全に理解していないことが主な理由で、私の人生ではそれを機能させることができません。

ポストバックを置き換えるという回避策もありますが、それは醜く、おそらく最も信頼できるものではありません。ポストバックを再び機能させたいと思います。何か案は？

更新：明確にする必要があります。ポストバックの実行に使用されたJavascriptが何らかの方法で壊れているため、ポストバックが機能していないため、ボタンがクリックされても何も起こりません。

score 33 · Accepted Answer

お二人とも正しい道を歩んでいました。私が気付いたのは、SimpleModal がダイアログをボディに追加することです。これは、ASP.Net のの外側にあり<form>、要素が見つからないため、機能が壊れます。

それを修正するために、SimpleModal ソースを変更して、'form'代わりにeverything を追加しました'body'。ダイアログを作成するときは、このpersist: trueオプションも使用して、ボタンを開いたり閉じたりしても保持されるようにします。

提案してくれてありがとう！

更新:バージョン 1.3 ではappendTo、モーダルダイアログを追加する要素を指定するためのオプションが構成に追加されます。ここにドキュメントがあります。

score 6 · Accepted Answer

すべての標準 ASP.NET ポストバックは、ページで __doPostBack javascript メソッドを呼び出すことによって機能します。その関数はフォームを送信します (ASP.NET は実際には 1 ページにつき 1 つのフォームのみを好みます)。このフォームには、すべてのビューステートとその他の機能が存在する非表示の入力フィールドが含まれています。

一見すると、SimpalModal には、モーダルの内容がたまたま HTTP GET から ASP.NET ページに到達した場合を除き、ページのフォームや標準の非表示の入力を台無しにするものは何も見えません。これにより、2 つの ASP.NET フォームが 1 つの DOM にレンダリングされ、ほぼ確実に __doPostBack 関数が台無しになります。

ASP.NET AJAX ModalPopup コントロールの使用を検討しましたか?

score 4 · Accepted Answer

Web ブラウザは、無効または非表示のフォーム要素を POST しません。

だから何が起こっているのですか：

ユーザーがダイアログのボタンをクリックします。
ボタンは SimpleModal の close() メソッドを呼び出し、ダイアログとボタンを非表示にします
クライアントはフォームを POST します (ボタンの ID なし)
ASP.NET フレームワークは、クリックされたボタンを特定できません。
サーバー側のコードは実行されません。

解決策は、クライアントで必要なことをすべて行い (この場合はダイアログを閉じる)、自分で __doPostback() を呼び出すことです。

例 (「dlg」はクライアント側の SimpleModal ダイアログ参照です):

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

これにより、ダイアログが非表示になり、フォームが送信され、そのボタンのサーバー側イベントが呼び出されます。

@ダン

すべての標準 ASP.NET ポストバックは、ページで __doPostBack JavaScript メソッドを呼び出すことによって機能します。

asp:Buttons は __doPostback() を呼び出しません。これは、HTML 入力コントロールが既にフォームを送信しているためです。

score 2 · Accepted Answer

これに引っかかった - tghw と body fix の代わりに appendto フォームの他のすべての貢献者に感謝します。(1.3 バージョンの属性で解決)

ところで：誰かが.netからプログラムでダイアログを閉じる必要がある場合-このタイプの構文を使用できます

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

closedialog の JavaScript は次のようになります....

    function closeDialog() {
        $.modal.close();
    }

score 0 · Accepted Answer

tghw の回答に加えて、次の優れたブログ投稿が役に立ちました: jQuery: Fix your postbacks in Modal forms -- 具体的には BtnMike のコメント: それをクラスから外すことは、私には明らかではない解決策でした。

-ジョン

score 0 · Accepted Answer

FWIW、私はあなたが指摘したブログ投稿を更新して明確にし、ここに再投稿しました-理由とその他の詳細はブログ投稿にあります:

解決策（昼食前の最後のチェックイン時）：

ダイアログの onClose イベントをオーバーライドし、次の操作を行います。
1. ダイアログのデフォルトの Close 関数を呼び出す
2. ダイアログ div の innerHTML を単一のに設定します。
3. __doPostBack を乗っ取り、新しい関数 newDoPostBack を指すようにする

私がウェブ上で見たいくつかのコメントから、ポイント 1 を明確にする必要があります。残念ながら、私はもう同じ雇用主から離れており、使用していたコードにアクセスすることはできませんが、できる限りのことをします。まず、次のように、新しい関数を定義し、ダイアログをその関数に向けることによって、ダイアログの onClose 関数をオーバーライドする必要があります。

$('#myJQselector').modal({onClose: mynewClose});

ダイアログのデフォルトの Close 関数を呼び出します。定義する関数では、最初にデフォルトの機能を呼び出す必要があります (通常、オーバーライドするほぼすべての機能のベストプラクティスです)。
ダイアログ div の innerHTML を単一のに設定します。– これは必須の手順ではないため、理解できない場合はスキップしてください。
__doPostBack を乗っ取り、新しい関数 newDoPostBack を指すようにする

function myNewClose (dialog)

    dialog.close();

    __doPostBack = newDoPostBack;

newDoPostBack 関数を記述します。

関数 newDoPostBack(eventTarget, eventArgument)
{

    var theForm = document.forms[0];

    if (!theForm)

        theForm = document.aspnetForm;

    if (!theForm.onsubmit || (theForm.onsubmit() != false))

        document.getElementById("__EVENTTARGET").value = eventTarget;

        document.getElementById("__EVENTARGUMENT").value = eventArgument;

        theForm.submit();

}
}

score 0 · Accepted Answer

同じ問題がありました{appendTo:'form'}が、モーダルポップアップが完全に間違ってレンダリングされました(CSSの問題があるかのように)。

私が作成しているテンプレートには、ページに他のフォームを配置するインクルードが含まれていることがわかりました。(デフォルトの Asp.net フォーム ID)を設定{appendTo:'#aspnetForm'}すると、すべてがうまく機能しました (ポストバックを含む)。

score 0 · Accepted Answer

simplemodal.js を変更せずに次の作業を見つけました。

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}

したがって、ダイアログのボタンを使用してポストバックを発生させる代わりに、送信を防止し、フォーム内の非表示のボタンを見つけてクリックイベントを呼び出します。

score 0 · Accepted Answer

新しい Jquery.simplemodal-1.3.js には、appendTo というオプションがあります。したがって、デフォルトはapp.netでは機能しないappendTo:'body'であるため、appendTo:'form'というオプションを追加します。

score -1 · Accepted Answer

SimpleModal ソースを変更したくない場合。これを試して..

modal() メソッドを呼び出した後、これを追加します。

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

SimpleModal プラグインは、これを 2 つマークアップに追加します。

背景用の「simplemodal-overlay」
「simplemodal-container」には、ポップアップモーダルとして必要な div が含まれています。

asp.net - SimpleModalはASP.Netポストバックを破ります

10 に答える 10

Related

Reference