asp.net - ASP.NET CheckBox から AjaxControlToolkit モーダルポップアップを表示する方法

Question

ユーザーが TemplateField として GridView 内にある CheckBox コントロールをチェック/チェック解除するときに、AjaxControlToolkit ModalPopupExtender コントロールを表示する必要があります。

-- 2013 年 5 月 24 日更新

ここで最終的な解決策を参照してください...

ついに問題を解決しました。そこで、完全なソリューションと最終的なコードをここに投稿することにしました。

GridView

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
    <asp:BoundField DataField="ID"/>
    <asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" />
    <asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" />

    <!-- TemplateField with the CheckBox and the ModalPopupExtender controls -->

    <asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN">
        <ItemStyle HorizontalAlign="Center"/>
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server"/>

            <!-- Modal Popup block -->

            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/>
            <asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;">
                Are you sure?
                <br /><br />
                <div style="text-align:right;">
                    <asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/>
                    <asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
                </div>
            </asp:Panel>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

コードビハインド

protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType.Equals(DataControlRowType.DataRow))
    {
        // Setting the CheckBox check reading the state from DB
        CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1");
        CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false
    }
}

protected void ConfirmButton_Click(object sender, EventArgs e)
{
    string id = ((Button)sender).CommandArgument; // Get the ID column value

    // Update the CHECK_COLUMN value on the DB or do whatever you want with the ID...

    BindData(); // Method that do the GridView DataBind after the changes applied to the DB
}

知っておくべきこと

1)とそのクリックイベントにModalPopupExtender1アクセスする必要があるため、コントロールは GridView TemplateField 内にあります。CheckBox1これはおそらくこれまでで最高のソリューションではありませんが、機能するため、GridView が複雑すぎず、ページングされている場合、パフォーマンスに大きな影響を与えることはありません。

ConfirmButton2) Click イベントをキャッチするには、コントロール設定OKControlIDからプロパティを削除する必要があります。ModalPopupExtender

- 終わり

-- 2013 年 5 月 22 日更新

次に、DB で UPDATE を行うには、対応する行の ID が必要です。

- 終わり

これはGridViewです

<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
    <asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/>
    <asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." />
    <asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." />

    ... some other BoundFields ...

    <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
        <ItemStyle HorizontalAlign="Center"/>
        <ItemTemplate>
            <asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

これが ModalPopup ブロックです

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />

<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
    Are you sure?
    <br /><br />
    <div style="text-align:right;">
        <asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/>
        <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
    </div>
</asp:Panel>

ここで、チェックボックスがオン/オフされるたびに ModalPopup を表示したいと思います。そのポップアップには、確認とキャンセルの 2 つのボタンで確認メッセージを表示する必要があります。DB を更新してからポストバックする必要があることを確認します。キャンセルは、ポストバックなしでポップアップを非表示にするだけです。

ModalPopupExtender が OnClick イベントをリッスンしていることは知っています。では、Button、LinkButton、ImageButton などが必要ですか、それともやりたいことができますか?

score 0 · Accepted Answer

GridView 内に ModalPopup Extender を含める必要はありません。GridView のテンプレートフィールドにチェックボックスコントロールをバインドし、その中で OnCheckedChanged プロパティを使用することができます...したがって、テンプレートは以下のようになります

 <asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
    <ItemStyle HorizontalAlign="Center"/>
    <ItemTemplate>
        <asp:CheckBox ID="chkArchiviare" runat="server" 
             OnCheckedChanged="chkArchiviare_CheckedChanged"/>
    </ItemTemplate>
</asp:TemplateField>

この後、 chkArchiviare_CheckedChangedイベントで show 関数を呼び出す必要があります...このように

  ModalPopupExtender1.Show();

ここで ModalPopupExtender1 は ModalPopupExtender コントロールの ID です。

覚えておく必要があるもう 1 つのことは、.aspx ページで 1 つのボタンを使用することです。そして、このボタン ID を ModalPopupExtender TargetControlID に渡します...このように

 <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"  
      TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup" 
      OkControlID="btnConferma" CancelControlID="btnAnnulla" />

 <asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; 
      background-color:White; border-width:2px; border-color:Black; border-
      style:solid; padding:20px;"> Are you sure?<br /><br />
   <div style="text-align:right;">
    <asp:Button ID="btnConferma" runat="server" Text="Conferma" 
         OnClick="btnConferma_Click"/>
    <asp:Button ID="btnAnnulla" runat="server" Text="Annulla" 
         OnClick="btnAnnulla_Click" />
   </div>
 </asp:Panel>

なぜ私はこのボタンを使用しているのでしょうか?...コードビハインドで show() を使用しているため、このボタンは使用されません...しかし、ボタン ID をModapPopupExtender TargetControlId プロパティに渡さない場合。エラーが発生します。

したがって、このように ModalPopupExtender を使用すると、LinkButton、Label、Button で使用できます。例の詳細については、以下のリンクを確認できます....

ModalPopup エクステンダーを GridView に使用する方法

この記事があなたのすべての疑問を解決することを願っています....これを楽しんで他の人と共有してください...ありがとう!

asp.net - ASP.NET CheckBox から AjaxControlToolkit モーダル ポップアップを表示する方法

3 に答える 3

Related

Reference

asp.net - ASP.NET CheckBox から AjaxControlToolkit モーダルポップアップを表示する方法