C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: ModalPopupExtenderをjavascriptで


(過去ログ 124 を表示中)

[トピック内 8 記事 (1 - 8 表示)]  << 0 >>

■73929 / inTopicNo.1)  ModalPopupExtenderをjavascriptで
  
□投稿者/ tra (1回)-(2014/11/15(Sat) 13:37:47)

分類:[ASP.NET (C#)] 

2014/11/15(Sat) 13:40:18 編集(投稿者)
お世話になります。

Win7
VS2012
ASP.Net(C#)
.NetFW4.5
IE10

ModalPopupExtenderを使って、モーダル画面を開こうとしています。
TargetControlIDに指定したボタンを直接クリックした場合は、モーダル画面が開いたままになりますが、
TargetControlIDに指定したボタンをjavascriptで.clickした場合に、
モーダル画面が開いた後、何も押さなくてもすぐモーダル画面が閉じてしまいます。
.clickの場合でも、開いたままにしたいです。
何か回避策等ございましたら、お教えいただけますと幸いです。

javascriptで.clickしているのは、実際にはjavascriptで1つチェック処理をかませているためです。
チェック処理がtrueなら開く、falseなら開かないという制御にしています。
上記現象は、チェック処理に関係なく発生しています。

<asp:ModalPopupExtender ID="Topic3_ModalPopupExtender" runat="server"
    CancelControlID="btnClose" Enabled="True" PopupControlID="pnlTest" PopupDragHandleControlID="pnlTest_Header"
    TargetControlID="btnHdnWindow" X="600" Y="2">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlTest" runat="server" CssClass="csstest1" Style="display: none;">
    <asp:Panel ID="pnlTest_Header" runat="server" CssClass="csstest2" HorizontalAlign="Left">
        モーダルテスト
    </asp:Panel>
    <div class="dvTest">
        ほげほげ
    <asp:Button ID="btnClose" runat="server" Text="閉じる" />
    </div>
</asp:Panel>
<asp:Button runat="server" ID="btnHdnWindow" Style="display: none;"/>
<asp:ImageButton runat="server" ID="btnWindow" ImageUrl="../../Images/open.png" CssClass="csstest3" OnClientClick="ClickHdnButton();" />

<script lang="ja" type="text/javascript">
    function ClickHdnButton(isChecked) {
        $("#<%= this.btnHdnWindow.ClientID%>").click();
    }
</script>

※ブラウザ記載していなかったため、追記。

引用返信 編集キー/
■73930 / inTopicNo.2)  Re[1]: ModalPopupExtenderをjavascriptで
□投稿者/ WebSurfer (387回)-(2014/11/15(Sat) 14:18:13)
No73929 (tra さん) に返信

何故すぐ閉じてしまうかは分かりませんが(ポストバックとスクリプト実行のタイミングの
問題? コードは詳しく読んでないです、スミマセン)・・・

ポストバックしてサーバーで何かを処置する必要はなくて、クライアント側だけで処置して
ModalPopup を表示すればいいのですか?

であれば、ModalPopup はクライアントのコードで表示/非表示にできますので、クライアン
トスクリプトで btnHdnWindow をクリックしてポストバックするようなことは止めて、その代
わりにクライアント側だけで ModalPopup を表示するコードを書いてはいかがですか?

クライアントのコードだけで(ポストバックしないで)表示/非表示にする方法については、
以下のページが参考になりませんか?

ModalPopup でプログレス表示
http://surferonwww.info/BlogEngine/post/2011/05/29/Show-progress-in-ModalPopup.aspx

ポイントは、BehaviorID="programmaticModalPopupBehavior" を設定しておき、それをクライ
アントスクリプト $find('programmaticModalPopupBehavior'); で取得して show() メソッド
を適用しているところです。

その際、TargetControlID に何も設定しないとエラーになるので注意してください。

お試しください。
引用返信 編集キー/
■73931 / inTopicNo.3)  Re[2]: ModalPopupExtenderをjavascriptで
□投稿者/ tra (2回)-(2014/11/15(Sat) 16:54:16)
WebSurferさん、ご返信ありがとうございます。

> ポストバックしてサーバーで何かを処置する必要はなくて、クライアント側だけで処置して 
> ModalPopup を表示すればいいのですか?
ポストバックは不要です。

載せていただいたURLを参考に、以下のようにBehaviorIDを指定し、以下のように.show()で試してみましたが、現象は変わらずでした。

※pnlTest内のコードを一部削減してます。
-------------------------------------------------------
<asp:ModalPopupExtender ID="Topic3_ModalPopupExtender" runat="server"
    CancelControlID="btnClose" Enabled="True" PopupControlID="pnlTest" PopupDragHandleControlID="pnlTest_Header"
    TargetControlID="btnHdnWindow" BehaviorID="bhvTest" X="600" Y="2">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlTest" runat="server" CssClass="csstest1" Style="display: none;">
    モーダルテスト
    <asp:Button ID="btnClose" runat="server" Text="閉じる" />
</asp:Panel>
<asp:Button runat="server" ID="btnHdnWindow" Style="display: none;"/>
<asp:ImageButton runat="server" ID="btnWindow" ImageUrl="../../Images/open.png" CssClass="csstest3" OnClientClick="ClickHdnButton();" />

<script lang="ja" type="text/javascript">
    function ClickHdnButton(isChecked) {
        $find('bhvTest').show();
    }
</script>
-------------------------------------------------------

ちなみに、以下のように、TargetControlID="btnWindow"とした場合は、btnWindow直接クリック時に、モーダル画面が表示され続けてくれます。
が、OnClientClickでチェック処理を呼んでtrue/falseを返す等してみましたが、チェック処理結果にかかわらず、モーダル画面が表示されてしまいました。
-------------------------------------------------------
<asp:ModalPopupExtender ID="Topic3_ModalPopupExtender" runat="server"
    CancelControlID="btnClose" Enabled="True" PopupControlID="pnlTest" PopupDragHandleControlID="pnlTest_Header"
    TargetControlID="btnWindow" X="600" Y="2">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlTest" runat="server" CssClass="csstest1" Style="display: none;">
    モーダルテスト
    <asp:Button ID="btnClose" runat="server" Text="閉じる" />
</asp:Panel>
<asp:ImageButton runat="server" ID="btnWindow" ImageUrl="../../Images/open.png" CssClass="csstest3" />
-------------------------------------------------------

引用返信 編集キー/
■73932 / inTopicNo.4)  Re[3]: ModalPopupExtenderをjavascriptで
□投稿者/ WebSurfer (388回)-(2014/11/15(Sat) 17:57:39)
No73931 (tra さん) に返信
> <asp:ImageButton runat="server" ID="btnWindow" ImageUrl="../../Images/open.png" CssClass="csstest3" OnClientClick="ClickHdnButton();" />

ASP.NET の ImageButton は html にレンダリングされると input type="image" になるの
で、それをクリックするとポストバック(form が submit)されるはず。

input type="button" で試してみたらどうなりますか?
引用返信 編集キー/
■73933 / inTopicNo.5)  Re[3]: ModalPopupExtenderをjavascriptで
□投稿者/ WebSurfer (389回)-(2014/11/15(Sat) 21:08:05)
No73931 (tra さん) に返信

コードを詳しく見てみましたが、やはり問題の原因は ASP.NET の ImageButton を
使ったことでした。

ImageButton をクリックすると、まず OnClientClick プロパティに設定されたクラ
イアントスクリプトが動いて ModalPopup が表示されますが、その後すぐにポストバ
ックされて(POST 要求が Web サーバーに出て)、その要求に対する応答でブラウザ
の画面が書き換わってしまいます。

それゆえ、ModalPopup が一瞬表示されて消えてしまうという結果になります。

解決策は、上のレスにも書きましたが input type=button" とか、画像を表示したい
なら img 要素を使って、その onclick 属性に ModalPopup を表示するスクリプトを
設定することです。

ちなみに、一番最初のコードでも、ImageButton を使わないで、代わりに input
type=button" や img 要素を使えばうまく行くと思います。

引用返信 編集キー/
■73938 / inTopicNo.6)  Re[4]: ModalPopupExtenderをjavascriptで
□投稿者/ tra (3回)-(2014/11/16(Sun) 21:27:59)
WebSurferさん、ご返信ありがとうございます。

※ご回答いただいた内容はまだ試していません。
 明日試してみます。

たしかに、ImageButton なのでSubmit走るのは理解していましたが。
TargetControlID="btnWindow"で直接クリックだと消えなくて、
OnClientClickだとすぐ消えてしまうのが、なんとも腑に落ちないところです。
WebSurferさんの話を踏まえると、TargetControlIDでのモーダル表示処理は、
Submit後に走っているということになりそうですね。
その辺も明日見れたらみてみます。


引用返信 編集キー/
■73939 / inTopicNo.7)  Re[5]: ModalPopupExtenderをjavascriptで
□投稿者/ WebSurfer (390回)-(2014/11/16(Sun) 22:05:11)
No73938 (tra さん) に返信

> たしかに、ImageButton なのでSubmit走るのは理解していましたが。
> TargetControlID="btnWindow"で直接クリックだと消えなくて、
> OnClientClickだとすぐ消えてしまうのが、なんとも腑に落ちないところです。

btnWindow をクリックした場合、ModalPopup は表示されるがポストバックはされないか
らです。(submit がキャンセルされる仕組みになっているようです)

どうしても ImageButton が使いたい場合は、その OnClientClick プロパティに設定した
スクリプトで ModalPopup を表示するのではなく、ポストバックされた後にサーバー側で
ImageButton.Click イベントのハンドラで ModalPopup.Show() とすれば、応答が帰って
きたときに ModalPopup は表示されるはずです。
引用返信 編集キー/
■73966 / inTopicNo.8)  Re[6]: ModalPopupExtenderをjavascriptで
□投稿者/ tra (4回)-(2014/11/18(Tue) 01:09:37)
WebSurferさん、たびたびのご返信ありがとうございます。

ModalPopup.Show() で行けました。
が、想定よりちょっと重かったので・・・

> submit がキャンセル
当初、ClickHdnButton()をreturn false;したりして、
Submitをキャンセルする方法も考えていたのですが、
OnClientClick で、return を書いていなかったために、キャンセルされてくれていませんでした。
結局、以下のように、OnClientClick で return false;される形にして、解決しました。

<asp:ModalPopupExtender ID="Topic3_ModalPopupExtender" runat="server"
CancelControlID="btnClose" Enabled="True" PopupControlID="pnlTest" PopupDragHandleControlID="pnlTest_Header"
TargetControlID="btnHdnWindow" X="600" Y="2">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlTest" runat="server" CssClass="csstest1" Style="display: none;">
モーダルテスト
<asp:Button ID="btnClose" runat="server" Text="閉じる" />
</asp:Panel>
<asp:Button runat="server" ID="btnHdnWindow" Style="display: none;"/>
<asp:ImageButton runat="server" ID="btnWindow" ImageUrl="../../Images/open.png" CssClass="csstest3" OnClientClick="return ClickHdnButton();" />

<script lang="ja" type="text/javascript">
function ClickHdnButton(isChecked) {
$("#<%= this.btnHdnWindow.ClientID%>").click();
}
return false;
</script>
解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -