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并关闭模态对话框的代码。

试了一下,效果不错!

 


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

posted on 2009-09-14 12:15  小老鼠  阅读(489)  评论(0编辑  收藏  举报