4

BlockUI を使用してモーダルを表示しています。ブロックされたモーダル内に更新パネルがあります。更新パネル内には、テキスト ボックスと、コンテンツをサーバーに送信するボタンがあります。この時点まではすべて正常に動作します (blockUI が呼び出され、モーダルが表示され、ボタンがポストバックを実行します)。ただし、ボタンのクリック イベントが発生すると、テキストが入力されていても、テキスト ボックスの値は一貫して空になります。更新パネルが更新されると、テキストボックスが空白になります。これはある種のビューステートの問題である可能性があり、ビューステートをオフにしていません。

<a href="javascript:$.blockUI({ message: $('#divTest') });">SHOW MODAL</a>

<div id="divTest" style="display: none;">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtTestVS" runat="server" /><br />
        <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

サーバ側：

protected void cmdTest_Click(object sender, EventArgs e)

{ 文字列 x = txtTestVS.Text; }

文字列 "x" は常に "" と等しくなります。

4

4 に答える 4

5

これは、ダイアログ プラグインでよくある問題です。問題は、コンテンツが blockUI コンテナーに配置され、<body>要素に追加され、サーバーに送信されるフォームに含まれなくなった場合です。これを解決するには、blockUI コードを少し編集する必要があります。

ソースは次のとおりです: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js

これを変更します:
Line 262: var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

そしてこれ:
行 382: els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:els = $('form').children().filter('.blockUI').add('form > .blockUI');

これで、テキストボックスの値が表示されます。

于 2010-02-16T00:16:06.050 に答える
1

問題

私の読書から、ここと他の場所では、どうやらjQuery UI（ダイアログの初期化時に）がダイアログ要素を（その内容とともに）<form要素の外側に移動し、<body. 投機は、フォームが存在しないときにボディが常に存在し、IE を使用すると z オーダーの利点が得られる可能性があるためです。

問題は、実際の HTML 入力コントロールであるかどうかにかかわらず、すべての ASP.NET コントロールが<formポストバックに参加し、正しく機能するために Microsoft によってページにあることが要求されていることです。

解決策 (jQuery 1.4+)*: プログラムでダイアログ ボックスを HTML フォーム内に移動します。

（これに似た他の回答があります。これは私が見た中で最も短いもので、1行のコードしか必要とせず、jQueryソースコードを変更する必要はありません。）

jQuery UI 1.8.7 (安定版、jQuery 1.3.2+ 用) では、このフォーラム スレッドから派生した次の「トリック」を使用して、ASP.NET コントロールが PostBack 動作を維持することに成功しました。

// As is customary, call $mydialog.dialog(..) to initialize it.
// Init all your dialog boxes before continuing.

// After init, TYPE THIS LINE to move all dialog boxes back into the form element
$('.ui-dialog').detach().appendTo('form');

修正で 1 つのダイアログ ボックスのみをターゲットにするには、代わりに次の行を使用します。

$mydialog.closest('.ui-dialog').detach().appendTo('form');

$mydialogは、jQuery セレクター -eg によるダイアログ要素への参照です$('#mydiv')。

クラスが使用される理由は、jQuery UI が、常にダイアログの最も外側の要素にあり、ダイアログ全体で使用される他のすべてのクラス名の中で一意であるクラス名ui-dialog.ui-dialogを持つ外側の div でダイアログ要素をラップするためです。これは、実際のダイアログが、指定した html 要素だけではなく、ダイアログ全体に影響を与える必要があることを意味します。

ダイアログの初期化時に、jQuery は構築されたダイアログを HTML フォームの外に移動します。
指定された行を挿入することで、すべてをフォームに戻し、ASP.NET を満足させます。

detachjQuery メソッドはそれを DOM から切り離しますが、それに関連付けられたすべての jQuery イベントとデータを維持します。
(*detachは jQuery 1.4 で導入されたため、このソリューションはそのバージョン以降に制限されています。以前のバージョンの jQuery では、試したことはありませんが、代わりに clone と remove を使用することで、限定的な成功が得られる可能性があると聞いています。)

jQuery メソッドはappendToそれを html フォームに貼り付けます。

これは私が理解していることです。それが他の誰かに役立つことを願っています。

于 2011-01-09T02:48:16.470 に答える
0

コードの最初の行は次のようになります。

<a href="javascript:$.blockUI({ message: $('#divTest').val() });">SHOW MODAL</a>

また

<a href="javascript:$.blockUI({ message: $('#divTest').text() });">SHOW MODAL</a>
于 2010-02-16T00:12:31.020 に答える
0

更新したいすべてのコンテンツが更新パネル内にあることを確認してください

于 2010-03-18T05:50:32.430 に答える