先看一下本文的最终效果图:
本文联合使用了“UpdatePanel ”和“UpdateProgress ”两个控件,使更新时数据呈现动画效果,提供给用户等待时友好的界面,很酷的哟!
本文顺便复习一下了新建数据集等的几项操作。学而时习之,不亦说乎?
下面是详细步骤:
1、打开“Visual Studio 2005 ”,“新建网站”,在“我的模板”下选择“Atlas Web Site ”,确定。
2、准备本文需要的两个文件:
一个是SQL SERVER 提供的“NORTHWND.MDF ”数据库文件,右键点击“解决方案资源管理器”的“App_Data ”文件夹,“添加现有项”把这个文件加入进来。
一个是这个图片::busy.gif,把它添加到“解决方案资源管理器”下新建的“Image ”文件夹里。Let's Go!
3、右击“解决方案资源管理器”的项目,“添加新项”,选择“数据集”,“添加”,点击“是”,稍等,确保“NORTHWND.MDF ”在“TableAdapter 配置向导”的下拉列框中,“下一步”,“下一步”,“下一步”。
4、点击“查询生成器...”,选择“Products ”后,“添加”、“关闭”。
5、选择“ProductID, ProductName, Discontinued ”3个字段,点击“确定”。“下一步”,把“填充DataTable(I) ”前面的勾取消,点击“下一步”、“完成”。
6、保存所有文件。
7 、双击“解决方案资源管理器”下的“ Default.aspx ”,并切换到它的“设计”页面。发现上面已经有了个“ ScriptManager ”控件了,点击它,点击它的智能标记(Tag),在“ Enable Partial Rendering ”前面打上勾。
8、拖拽一个 GridView 控件进来,“选择数据源”、“新建数据源”,选择“对象”、确定,选择我们在第3--5步建立的数据适配器“ DataSet1TableAdapters.ProductsTableAdapter ”,点击“下一步”,“完成”。
9、在接下来的“GridView任务”下选择“启用分页”、“启用编辑”。
10、保存所有文件。
11、从工具箱里的“ Atals ”控件列表下 往“ Default.aspx ”的“设计”页面拖拽一个 “ UpdatePanel ”控件,若有什么提示之类的,则点击“是”,然后再把将前面的那个“ GridView ”拖拽到“ UpdatePanel ”控件里。
12、从工具箱里的“ Atals ”控件列表下 往“ Default.aspx ”的“设计”页面拖拽一个“ UpdateProgress ”控件,若有什么提示之类的,则点击“是”。
13、选定“ UpdateProgress ”控件,切换到“ Default.aspx ”的“源”界面,则代码中“UpdateProgress”的控件描述是加粗的显示的,在其描述中加(插)入“ <ProgressTemplate> </ProgressTemplate> ”,然后再把“解决方案资源管理器”下的“ Image ”中“ updata.gif ”图片文件拖拽进刚才插入的代码段中。再在图片的后面插入这行代码:“ <span style="color: #ff3366">正在进行数据更新,请稍候......</span> ”,保存所有文件。
14、好,基本上可以看看效果了。按“Ctrl”+F5 运行一把,结果出来后,点击任意一行中的“编辑”,随便在表格中改动一下,再点击“更新”,由于实在本机操作,基本看不见数据更新的“酷”效果,我们这样搞一下: 切换到“ Default.aspx ”的“设计”页面,选定“objectdatasource1 ”控件,按“ F4 ”调出“属性”窗口,选择“事件”(闪电标记),双击“ Selecting ”属性,在其事件里加入下面一行代码:“ System.Threading.Thread.Sleep(2000); ”,保存所有文件。
15、再按“Ctrl”+F5 运行一把,结果出来后,点击任意一行中的“编辑”,随便在表格中改动一下,再点击“更新”,效果应该出来了,当数据更新时,小圈慢慢的转呀转!酷呀!
下面提供完整代码:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< atlas:ScriptManager ID ="ScriptManager1" runat ="server" EnablePartialRendering ="True" />
< div >
< atlas:UpdateProgress ID ="UpdateProgress1" runat ="server" >
< ProgressTemplate >
< img src ="Iamge/busy.gif" />< span style ="color: #ff3366" > 正在进行数据更新,请稍候...... </ span >
</ ProgressTemplate >
</ atlas:UpdateProgress >
< atlas:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< asp:GridView ID ="GridView1" runat ="server" AllowPaging ="True" AutoGenerateColumns ="False"
DataKeyNames ="ProductID" DataSourceID ="ObjectDataSource1" >
< Columns >
< asp:CommandField ShowEditButton ="True" />
< asp:BoundField DataField ="ProductID" HeaderText ="ProductID" InsertVisible ="False"
ReadOnly ="True" SortExpression ="ProductID" />
< asp:BoundField DataField ="ProductName" HeaderText ="ProductName" SortExpression ="ProductName" />
< asp:CheckBoxField DataField ="Discontinued" HeaderText ="Discontinued" SortExpression ="Discontinued" />
</ Columns >
</ asp:GridView >
</ ContentTemplate >
</ atlas:UpdatePanel >
< asp:ObjectDataSource ID ="ObjectDataSource1" runat ="server" OldValuesParameterFormatString ="original_{0}" SelectMethod ="GetData" TypeName ="DataSet1TableAdapters.ProductsTableAdapter" UpdateMethod ="Update" OnSelecting ="ObjectDataSource1_Selecting" >
< UpdateParameters >
< asp:Parameter Name ="ProductName" Type ="String" />
< asp:Parameter Name ="Discontinued" Type ="Boolean" />
< asp:Parameter Name ="Original_ProductID" Type ="Int32" />
</ UpdateParameters >
</ asp:ObjectDataSource >
</ div >
</ form >
</ body >
</ html >