AjaxControlToolKit的ModalPopup控件在GridView中的使用

 

这里使用AjaxControlToolKit的ModalPopup控件来实现弹出框查看Gridview某条记录的详细信息并能够编辑这条信息并保存到后台。

先看看实现的效果吧。

然后是这个功能的实现所用到的所有控件:

Control

Role

GridView

显示后台xml中保存的所有记录

DetailsView

显示当前编辑的行记录的所有信息

ModalPopupExtender

通过弹出框某条记录的详细信息显示出来

UpdatePanel

可以让Gridview实现ajax刷新

ObjectDataSource

Gridview绑定的数据源

 

OK，下面我们就一步一步来实现这个功能。

1.       创建一个asp.net ajax website,这个应该不要说了。如果你对这个不熟悉的话请参考我前面的ajaxcontroltoolkit的文章,然后把数据源xml文件添加到项目中。它是为gridview绑定的数据源提供数据。

2.       创建一个Customer类，这个对象很明显是作为Model来存放需要更新的数据。如下图它的属性:

 

然后创建一个Customer的List从XML中读取数据。

 

再创建以这个customers的list为数据源的查询和update方法:

 

3.       现在后台的工作都准备好了。我们可以回到前台页面来把Gridview拖入页面了。其实在拖控件之前先说明一下我们如何来实现弹出框的显示以及数据的传递和保存等。

a.       使用ModalPopupExtender控件所控制的那个Panel为弹出框，这个Panel默认的Visible设置为false。那么在Load页面的时候就看不到它。当点击主GridView上某条记录的edit按钮时,触发一个事件来把这个Panel的visible设置为true。它上面有个save按钮，点击Save按钮保存数据的同时设置panel的visible为false。

b.      通过GridView的selectedindexchanged事件和Datasource的selecting事件来传输数据和保存数据。具体的实现在下面详细说明。

4.       设置连个objectdatasource,一个作为gridview的数据绑定源,一个作为DetailVIew的数据绑定源。

 

 

5.       添加一个GridView和一个DetailView控件代码如下:

 

 

 

6.       再下来就是使用AJAXControltoolkit的ModalPopup控件了:

 

7.       最后是GridView的selectedindexchanged事件的代码和detailview控件的数据源odsCustomerDetail的Onselecting事件发生时的代码:

 

最后一个事件就是当弹出框的Save按钮点击时应该做的事情:

 

 它在隐藏弹出框的同时刷新了更新了数据源并刷新了GridView。除此功能之外还用ScriptManager来为在GridView中被update的row添加一个格式JavaScript如下:

 

 

在这个功能的实现中还有用到Linq的操作。但是如果不了解这些并不影响你使用它。因为datasource你可以换成sqldatasource等。

源代码下载: