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