Delving Deeper into Constructing ASP.NET AJAX-based Applications - Using the UpdateProgress Server Control to Indicate Updating Progress
(Page 2 of 4 )
The UpdateProgress server control can be used in conjunction with the UpdatePanel control so that when the UpdatePanel asynchronously updates its related contents, users can be shown a friendly prompt for current progress. Altogether, wherever the UpdatePanel is used there should be an associated UpdateProgress to give users a clear message.
Apparently, with so many UpdatePanel controls used, we'd better put the UpdateProgress inside the MasterPage.master master page so that users are given a consistent experience all over the web site. Now, open the MasterPage.master and modify the HTML code by adding the following just after the ScriptManager control definition:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="5" DynamicLayout="true" >
<ProgressTemplate>
<div style="position: absolute; top: 2px; right: 30; width: 100%; text-align: right;">
<img alt="loading" src=" AjaxifyJSSKImagesprogress.gif " />
<span style="background-color: rgb(204, 68, 68);"> <span style="color: #ff0066"><span
style="background-color: #999999"><span style="font-size: 14pt"><strong>Loading</strong>...</span></span></span>
</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Note here we mimic the Gmail design with a red label filled with "Loading..." plus a progress.gif animation on its left at the top right corner of the page. This means, in theory, that whenever any UpdatePanel in JSSK starts to update there will be an animation with a red label filled with "Loading..." at the top right corner to give the user a clue about the current updating state. However, UpdateProgress has a property named DisplayAfter whose default value is 500 milliseconds, which means the UpdateProgress contents will appear after the asynchronous update progress has been lasting for 500 milliseconds. Here, I deliberately set the value of the DisplayAfter property to 5 milliseconds to gain a much clearer effect.
Next: Keeping the Statistics Info Always Visible >>
More ASP.NET Articles
More By Xianzhong Zhu
/ 4 
