ModalPopupExtender控件和gridview的结合使用

实现效果：当点击gridview中的编辑列对所在行的数据进行编辑时，弹出模态对话框，显示编辑行数据，编辑完成后，关闭模态对话框，同时刷新gridview控件。

前台代码如下：

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        &nbsp; &nbsp;
        <div>
            &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
       
            <cc1:ModalPopupExtender  TargetControlID="HiddenField1" BackgroundCssClass="modalBackground" PopupControlID="Panel1" ID="ModalPopupExtender1" runat="server">
            </cc1:ModalPopupExtender>
    
                    <asp:HiddenField ID="HiddenField1" runat="server" />
       
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" CssClass="confirmPanel" Style="display: none">
            <asp:Button ID="Button2" runat="server" Text="确定" OnClick="Button2_Click"  />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button3" runat="server" Text="取消" />
            </asp:Panel>
                    <asp:GridView ID="GridView1" runat="server">
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:Button ID="Button4" runat="server" Text="编辑" CommandArgument='<%# Eval("id") %>' OnClick="Button4_Click" />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

此处关键是ModalPopupExtender属性的设置：

1.不能设置OkControlID属性，如设置此属性后，ok按钮将不能激发服务器端事件，达不到更改数据，刷新gridview的效果。
2.由于必须设置TargetControlID的值，所以给它设置了一个hiddenfield的值，我们并不使用它，我们将在后面的代码中运用代码弹出模态对话框。

后台关键代码如下：
 protected void Button4_Click(object sender, EventArgs e)
    {
        int id = int.Parse((sender as Button).CommandArgument);
        TextBox1.Text = id.ToString();
        ModalPopupExtender1.Show();
    }

此为单击编辑按钮弹出模态对话框的代码

 

protected void Button2_Click(object sender, EventArgs e)
    {
      //更新数据

//重新绑定gridview
        ModalPopupExtender1.Hide();
    }
此为单击确定按钮更新数据，刷新grideview并关闭模态对话框的代码。

试了一下，效果不错！