星空网 > 软件开发 > ajax

Atlas学习手记(6):使用AtlasUpdateProgress控件

在页面上执行较长时间的操作时,如果能够给用户提供一个类似于浏览器状态栏那样的进度条,将会使界面用户界面更加友好。在Atlas中,为我们提供的UpdateProgress控件可以轻松的实现这些。

主要内容

1.UpdateProgress控件介绍

2.完整的示例

 

一.UpdateProgress控件介绍

在页面上执行较长时间的操作时,如果能够给用户提供一个类似于浏览器状态栏那样的进度条,将会使界面用户界面更加友好。相信大家都见到过如下这样的界面:

Atlas学习手记(6):使用AtlasUpdateProgress控件

在Atlas中,为我们提供的UpdateProgress控件可以轻松的实现类似于这样的进度条,虽然它并不是反映真实的进度,却可以使我们用户界面更加友好。一个简单的UpdateProgress控件示例代码:

Atlas学习手记(6):使用AtlasUpdateProgress控件<atlas:UpdateProgress ID="uprog" runat="server">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    <ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        <div style="background-color: #E2F2FF; color: Black; font-size:10pt; position: absolute; left: 10px;
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            top: 40px; width: 300px; height: 120px; border:solid 1px #8DD3FF">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            数据更新中,请稍候Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            <p></p>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件           &nbsp;&nbsp;&nbsp;&nbsp;<img src='/images/loading.gif' data-original="images/loading02.gif" />
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        </div>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    </ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件</atlas:UpdateProgress>

UpdateProgress控件并没有什么属性需要去设置,我们唯一要做的就是设置ProgressTemplate,即进度条在页面上显示的样式,可以是图片,文本等,这一点类似于我们前面说过的ErrorTemplate。

二.完整的示例

UpdateProgress控件的使用相当简单,下面看一个例子,在该示例中,我们在更新一段文本时执行长时间的操作。还是先添加ScriptManager控件:

Atlas学习手记(6):使用AtlasUpdateProgress控件<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

在添加一个UpdatePanel,用来更新文本:

Atlas学习手记(6):使用AtlasUpdateProgress控件<atlas:UpdatePanel ID="upanel" runat="server">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    <ContentTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        <div style="background-color: white; position: absolute; left: 10px; top:40px;
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            width: 300px; height: 150px">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            <asp:Label Font-Bold="true" Font-Size="XX-Large" ID="thelabel" runat="server">I will be updated</asp:Label>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        </div>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    </ContentTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    <Triggers>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        <atlas:ControlEventTrigger ControlID="button1" EventName="Click" />
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    </Triggers>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件</atlas:UpdatePanel>

现在添加UpdateProgress控件,设置ProgressTemplate用<div>来实现:

Atlas学习手记(6):使用AtlasUpdateProgress控件<atlas:UpdateProgress ID="uprog" runat="server">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    <ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        <div style="background-color: #E2F2FF; color: Black; font-size:10pt; position: absolute; left: 10px;
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            top: 40px; width: 300px; height: 120px; border:solid 1px #8DD3FF">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            数据更新中,请稍候Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            <p></p>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件           &nbsp;&nbsp;&nbsp;&nbsp;<img src='/images/loading.gif' data-original="images/loading02.gif" />
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        </div>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    </ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件</atlas:UpdateProgress>

添加一个按钮,在它的事件中更新上面的文本:

Atlas学习手记(6):使用AtlasUpdateProgress控件protected void button1_Click(object sender, EventArgs e)
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件Atlas学习手记(6):使用AtlasUpdateProgress控件Atlas学习手记(6):使用AtlasUpdateProgress控件{
Atlas学习手记(6):使用AtlasUpdateProgress控件    // 模拟长时间的操作
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    System.Threading.Thread.Sleep(5000);
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    thelabel.Text = string.Format("I've been updated at {0}", DateTime.Now.ToLongTimeString());
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件}

至此整个示例就完成了,编译运行,看一下效果:

Atlas学习手记(6):使用AtlasUpdateProgress控件

单击“更新”按钮

Atlas学习手记(6):使用AtlasUpdateProgress控件

更新完成后:

Atlas学习手记(6):使用AtlasUpdateProgress控件

UpdateProgress控件使用需要的几点:

1.UpdateProgress控件并不是为某一个控件的处理而添加的,它是一个全局的控件,对整个页面都有效,所以在页面只能有一个且只能添加一个UpdateProgress控件。所有涉及到延时的操作都会由UpdateProgress控件来处理。

2.UpdateProgress控件的Template中有一个ID为abortButton的Button控件,我们可以提供一个服务器端Button或LinkButton控件,并指定ID为abortButton,以使用户可以取消当前的操作。示例代码如下:

Atlas学习手记(6):使用AtlasUpdateProgress控件<atlas:UpdateProgress ID="uprog" runat="server">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    <ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        <div style="background-color: #E2F2FF; color: Black; font-size:10pt; position: absolute; left: 10px;
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            top: 40px; width: 300px; height: 120px; border:solid 1px #8DD3FF">
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            数据更新中,请稍候Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            <p></p>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件           &nbsp;&nbsp;&nbsp;&nbsp;<img src='/images/loading.gif' data-original="images/loading02.gif" />
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件            <asp:Button ID="abortButton" runat="server"/>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件        </div>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件    </ProgressTemplate>
Atlas学习手记(6):使用AtlasUpdateProgress控件
Atlas学习手记(6):使用AtlasUpdateProgress控件</atlas:UpdateProgress>


完整示例下载:http://files.cnblogs.com/Terrylee/UpdateProgressDemo.rar

原标题:Atlas学习手记(6):使用AtlasUpdateProgress控件

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Noon进军食品配送市场惨遭嫌弃?!降低佣金不被市场看好:https://www.goluckyvip.com/news/10863.html
整合五国站点,TikTok Shop开启东南亚大促! :https://www.goluckyvip.com/news/10864.html
客户案例 | 中国至英国木质材料出口铁路运输 :https://www.goluckyvip.com/news/10865.html
亚马逊卖断货!“粉红幽灵毛毯”被TikTok带爆:https://www.goluckyvip.com/news/10866.html
TikTok本土MCN机构申请资料 :https://www.goluckyvip.com/news/10867.html
跨境老兵“二次转型”,他如何在Shopee取得200%的GMV增长?:https://www.goluckyvip.com/news/10868.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流