緋ノヒカリ

日記や雑記を載っけていきたいと思っています。 併せてゲームや本のことなども。 よろしく。

Category: スポンサー広告   Tags: ---

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category: プログラム   Tags: ---

Comment: 1  Trackback: 0

UpdatePanel + ConfirmButtonExtender + ModalPopupExtender の組み合わせの時の注意

かなりハマったのでメモっておく。

プログラムのお話なので、内容は続きに書いておく。

  環境としては .Net Framework3.5 + AjaxControlToolKit(3.0.3093.0)


AjaxControlToolKit の ConfirmButtonExtender や ModalPopupExtender。

簡単に見た目がそれっぽいAjaxなので、使う人も多いと思うけど、これに UpdatePanel

を組み合わせると、途端に動作がよく分からなくなる。


現象としては、

UpdatePanel + ConfirmButtonExtender + ModalPopupExtender

をセットで使った際、ポップアップパネル自体は毎回表示されるのだけど、そのポップアップパネル上のOK/キャンセルボタンが、奇数回目(厳密には違うが)しか動作しない。

奇数回目というより、ページロード以降で、非同期ポストバックが未発生な場合のみ動作するって感じ。


時間が無いのとAjaxのコードを追いきれてないので、あくまで予測なのだけど。


とにかく動きとしてはそう。


非同期ポストバック発生後、すぐにポップアップパネルが表示させて、その中のボタンを押すと、謎の空ポストバックが発生する。

その後再度ポップアップさせて中のボタンを押すと、期待の動作をする。


おそらくは、ポストバック時には ModalPopupExtender のボタン押下イベントに、何らかのスクリプトが仕込まれているのに対して、非同期ポストバック時にはそれが仕込まれない、もしくは、非同期ポストバック時にその仕込まれていたスクリプトがクリアされているよう。

詳細はよく分からないが。

まぁこのままだと困るので(ポップアップパネルを消すのはともかく、OKボタン後の鯖処理が動作しないのは困る)解決方法を探した。



見つからない。


仕事の事なので、ほったらかしておくことはできなかった。


ので、わんくまの掲示板に頼った。

コレ。
ConfirmButtonExtenderについて

一晩で解決した。


ようするに、ポップアップされるパネルをUpdatePanelの外側に追いやって、(おそらくだが)上書きされるポップアップパネル上のボタンのスクリプトを、上書きされないようにするって事なのかも。

まぁ、これで期待通りの動きになった。


すぐに見て思い出せるように、完動するコードを貼りつけておく。
改行で見辛いのはエディタにコピペすれば見やすくなる。ハズ。
--------------------------------------------------------------------------

<script runat="server" language="c#">
protected void btnAsyncRun_Click ( object sender, EventArgs e )
{
Label1.Text = DateTime.Now.ToString ();
}
protected void btnPopup_Click ( object sender, EventArgs e )
{
Label2.Text = DateTime.Now.ToString ();
}
protected void Button1_Click ( object sender, EventArgs e )
{
Label3.Text = DateTime.Now.ToString ();
}
protected void Button2_Click ( object sender, EventArgs e )
{
Label4.Text = DateTime.Now.ToString ();
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>

<%// ボタン + ConfirmButtonExtender + ModalPopupExtender %>
<asp:UpdatePanel ID="uppTEST" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnAsyncRun" runat="server" Text="非同期ポストバック発生用" onclick="btnAsyncRun_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="btnPopup" runat="server" Text="ポップアップ" CssClass="buttonStyle" OnClick="btnPopup_Click" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<ajaxToolkit:ConfirmButtonExtender ID="btnPopup_ConfirmButtonExtender" runat="server"
Enabled="True"
DisplayModalPopupID="btnPopup_ModalPopupExtender"
OnClientCancel=""
TargetControlID="btnPopup">
</ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ModalPopupExtender ID="btnPopup_ModalPopupExtender" runat="server"
DynamicServicePath=""
Enabled="True"
PopupControlID="pnlConfirm"
OkControlID="btnOK"
CancelControlID="btnCancel"
BackgroundCssClass="ConfirmModalBackground"
TargetControlID="btnPopup">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlConfirm" runat="server" CssClass="ConfirmPanel" style="display: none;">
<asp:Label ID="lblCaption" runat="server" Text="OK押下でポストバック(非同期)" CssClass="ConfirmPanelLabel"></asp:Label>
<br />
<asp:Button ID="btnOK" runat="server" Text="OK" CssClass="ConfirmPanelOK" />
 
<asp:Button ID="btnCancel" runat="server" Text="キャンセル" CssClass="ConfirmPanelCancel" />
</asp:Panel>
</form>
</body>
</html>

Comments

 
まさにココでひっかかってました。なるほど

プロフ

AIL

Author:AIL
AIL [ Web ]

あまり更新できないかと思われますが適当にどうぞ。

リンクフリーです。希望があれば相互リンク賜ります。

↓Webサイトも持ってます気になる方は是非
→浸帰牢へ行ってみる
PS2ジョジョの攻略とかありますよ。
MoEの話題専用ブログも。
→MoEを遊んでる記録
あとついったー。
→ついったー


---


過去ログ
自分用

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。