ASP.NET 如何从 CheckBox 显示 AjaxControlToolkit 模态弹出窗口

Question

当用户选中/取消选中 GridView 内作为 TemplateField 的 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 不太复杂并且是分页的，那么它不会对性能产生太大影响。

2) 为了捕获 ConfirmButton Click 事件，您必须从 ModalPopupExtender 控件设置中删除 OKControlID 属性。

--结束

-- 更新于 2013 年 5 月 22 日

然后我需要相应行的 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 block

<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 个按钮的确认消息:确认和取消。 确认必须对数据库进行更新，然后回发。 取消只需隐藏弹出窗口，无需回发。

我知道 ModalPopupExtender 监听 OnClick 事件。那么，我是否需要 Button、LinkBut​​ton、ImageButton 等，或者我可以做我想做的事情吗？

Answer 1

你是对的，它监听onclick事件，但是是客户端的事件，所以，扩展器的目标控件可以是任何你可以点击的东西，甚至是div或标签。