Atlas入门-UpdateProgress(利用GridView翻页)[视频]
我想用过126邮箱的朋友都见过哪个让你等待的东东吧!其实Atlas也提供了这样的控件,那就是 UpdateProgress 这个控件在用之前你得明白
1: 他是很霸道的,一个页面只允许有一个,该页所有的延迟都由他处理!
2:简单的做法下,他并不体现真实的进度,实际上我们只是放了一个图片,一个招牌!
至于做真实进度条,可以参阅http://dflying.cnblogs.com/archive/2006/03/28/361146.html
后面我也会出相应的视频,请关注http://thcjp.cnblogs.com/ ,不过目前我自觉功力不够
所以没有打算去啃这个骨头!!
好了,废话完毕,我们开始做吧!!
视频中的图片没有动态效果,这里我又做了一个,很潦草,但是可以启示下撒
视频下载
下面是全部代码
后台 C#代码
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
//这里我们还是模拟网络延迟
System.Threading.Thread.Sleep(500);
GridView1.PageIndex = Convert.ToInt32(DropDownList1.SelectedValue);
}
前台页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="grv.aspx.cs" Inherits="grv" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="border-right: mediumblue 1pt solid; border-top: mediumblue 1pt solid; left: 40px; border-left: mediumblue 1pt solid; width: 189px; border-bottom: mediumblue 1pt solid; position: absolute; top: 40px; height: 34px; background-color: #3399cc;">
<img src="progress bar.bmp" /></div>
</ProgressTemplate>
</atlas:UpdateProgress>
<div>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="au_id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
<asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
<asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
<asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
<asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>"
SelectCommand="SELECT [au_id], [au_lname], [city], [state], [zip] FROM [authors]">
</asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</atlas:UpdatePanel>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">第一页</asp:ListItem>
<asp:ListItem Value="1">第二页</asp:ListItem>
<asp:ListItem Value="2">第三页</asp:ListItem>
</asp:DropDownList><br />
</div>
</form>
</body>
</html>
1: 他是很霸道的,一个页面只允许有一个,该页所有的延迟都由他处理!
2:简单的做法下,他并不体现真实的进度,实际上我们只是放了一个图片,一个招牌!
至于做真实进度条,可以参阅http://dflying.cnblogs.com/archive/2006/03/28/361146.html
后面我也会出相应的视频,请关注http://thcjp.cnblogs.com/ ,不过目前我自觉功力不够
所以没有打算去啃这个骨头!!
好了,废话完毕,我们开始做吧!!
视频中的图片没有动态效果,这里我又做了一个,很潦草,但是可以启示下撒
视频下载
下面是全部代码
后台 C#代码
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { //这里我们还是模拟网络延迟 System.Threading.Thread.Sleep(500); GridView1.PageIndex = Convert.ToInt32(DropDownList1.SelectedValue); }
前台页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="grv.aspx.cs" Inherits="grv" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"> </atlas:ScriptManager> <atlas:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div style="border-right: mediumblue 1pt solid; border-top: mediumblue 1pt solid; left: 40px; border-left: mediumblue 1pt solid; width: 189px; border-bottom: mediumblue 1pt solid; position: absolute; top: 40px; height: 34px; background-color: #3399cc;"> <img src="progress bar.bmp" /></div> </ProgressTemplate> </atlas:UpdateProgress> <div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="au_id" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" /> <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" /> <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" /> <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" /> <asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>" SelectCommand="SELECT [au_id], [au_lname], [city], [state], [zip] FROM [authors]"> </asp:SqlDataSource> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> </Triggers> </atlas:UpdatePanel> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> <asp:ListItem Value="0">第一页</asp:ListItem> <asp:ListItem Value="1">第二页</asp:ListItem> <asp:ListItem Value="2">第三页</asp:ListItem> </asp:DropDownList><br /> </div> </form></body></html>