ModalPopupExtender控件和gridview的结合使用

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

前台代码如下：

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
   
<div>
 <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并关闭模态对话框的代码。

试了一下，效果不错！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/healer_zll/archive/2009/04/13/4068145.aspx