Remove From My Forums

ModalPopupExtenderのターゲットボタン押下時に、サーバーイベント（C#）実行について

質問
0

サインインして投票
お世話になっております。
タイトルの件について質問させてください。

【問題】
ModalPopupExtenderに表示するデータを、ターゲットボタン押下時に切り替えたい。
※正確には、ReportBuilderで作成した帳票を表示しており、その帳票を検索するパラメータを切り替えたい。

【経緯・流れ】
GridViewに表示しているレコードを選択し、選択されたデータを基に帳票データを検索する処理を作りたい。

ModalPopupの対象ボタンを押下すると、事前に検索するデータを切り替え、ポップアップで該当する帳票データを表示。
といったことがしたいのですが、OnClickイベント前にAjaxのイベントが実行されてしまって、パラメータを切り替えることができなません。

選択方法はチェックボックスなので、チェックボックスが押下された段階で検索条件を切り替えもできます。
ただ、件数が多い場合の処理時間を懸念。（何百件単位で選択するため）

【環境】
VisualStudio2010
ASP.NET3.5
IE8
ReportBuilder3.0

【ご参考】
［ASP.NET AJAX］ModalPopupコントロールでモーダル・ウィンドウを生成するには？［2.0のみ、C#、VB］
http://www.atmarkit.co.jp/fdotnet/dotnettips/580aspajaxmodalpopup/aspajaxmodalpopup.html

実装している処理としては、以上のサイトの処理を参考。（Reportの処理などはありませんが。。。）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%>
<asp:ScriptManager ID="manager" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnPopup" runat="server" Text="ポップアップ" />
<%--結果表示用の領域をあらかじめ確保--%>
<div id="result"></div>
<br />
<%--モーダル・ウィンドウとして表示するパネルを定義--%>
<asp:Panel ID="pnlDialog" runat="server">
<asp:Panel ID="pnl" runat="server" Wrap="False" BackColor="#C0C0FF">
<p>あなたの名前を入力してください。</p>
<p>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnOk" runat="server" Text="決定" />
<asp:Button ID="btnCancel" runat="server" Text="キャンセル" />
</p>
</asp:Panel>
</asp:Panel>
<%--ModalPopupコントロールの諸設定--%>
<ajaxToolkit:ModalPopup ID="modal" runat="server"
TargetControlID="btnPopup" PopupControlID="pnlDialog"
BackgroundCssClass="modalBackground" OkControlID="btnOk"
OnOkScript="onOk()" CancelControlID="btnCancel"
DropShadow="true" Drag="true" PopupDragHandleControlID="pnl"/>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以上になります。
宜しくお願いいたします。
- 編集済み kaijin22 2012年9月6日 5:06
2012年9月6日 4:41

返信

|

引用

回答

サインインして投票

> ModalPopupExtenderに表示するデータを、ターゲットのボタン押下
> 時に切り替えたい。

「ターゲットのボタン」とは btnPopup のことだと思いますが、これ
を ModalPopup の TargetControlID に設定すると、btnPopup クリッ
クでポストバックはかからないのでサーバー側では処置できないです。

TargetControlID に設定するコントロールはダミーにして、別にポスト
バックするボタンを設けて、その Click イベントで処置するようにす
ればできるはずです。

以下のような感じです。

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        // ここで ModalPopup に表示する部分（pnl の中身）を書き換え
        
        modal.Show();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .popup {
            height: 100px;
            width: 300px;
            padding: 20px;
            background-color: White;
        }

  </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <asp:Button ID="DummyButton" 
        runat="server" 
        style="display: none;" />

    <asp:Button ID="Button1" 
        runat="server" 
        Text="ポストバックして ModalPopup を表示" 
        OnClick="Button1_Click" />
    <asp:Panel ID="pnl" runat="server" CssClass="popup">
        <p>あなたの名前を入力してください。</p>
        <p>
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            <asp:Button ID="btnOk" runat="server" Text="決定" />
            <asp:Button ID="btnCancel" runat="server" Text="キャンセル" />
        </p>
    </asp:Panel>
    <asp:ModalPopupExtender ID="modal" 
        runat="server" 
        BackgroundCssClass="modalBackground" 
        TargetControlID="DummyButton" 
        OkControlID="btnOk" 
        CancelControlID="btnCancel" 
        PopupControlID="pnl">
    </asp:ModalPopupExtender>
    </form>
</body>
</html>

回答としてマーク kaijin22 2012年9月7日 0:19

2012年9月6日 13:24

すべての返信