石涛的专栏

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

<title>Untitled Page</title>

</head>

<body>

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />

<div>

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">

<img src="Iamge/busy.gif" /><span style="color: #ff3366">正在进行数据更新，请稍候......</span>

</ProgressTemplate>

</atlas:UpdateProgress>

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"

DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">

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

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

发表于 @ 2006年08月04日 21:05:00|评论(loading...)