Atlas 学习之004：“UpdatePanel ”和“UpdateProgress ”使更新数据呈现动画效果

 先看一下本文的最终效果图：

　　本文联合使用了“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　运行一把，结果出来后，点击任意一行中的“编辑”，随便在表格中改动一下，再点击“更新”，效果应该出来了，当数据更新时，小圈慢慢的转呀转！酷呀！

 

下面提供完整代码：

 

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<! 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 >