Windows applications are more stable than web application. Even if the web is not that stable like a windows application, there are lot advantages of building Web Applications and one thing that we remember as ex-Windows programmers is that the Forms did not Flicker in front of the eyes of the user. This irritates a lot of users. Microsoft came back with a good solution for this problem and they introduced Ajax. In this Article am going to show you how you can create Flicker Free pages.
Introduction
Every user that uses any type of
Application needs to know for sure that
something is happening every time a button is Clicked, every time a page load,
and every take an action has been taken. It is a responsibility of a software
developer to put press indicator where needed so that the user can know that in
the background something is happening. In this Article I am going to
demonstrate to you, on how to use an Updateprogress Control from our Ajax
toolbox section.
Background
In
this Article I am going explain how to create your own date picker with the
Controls you have on your Visual Studio tool.
Using
the code
We are going to user C# as our
language.
Start
Open Visual Studio and Create a New Website.
Automatically you will have an empty page defined for you like this
<% @ Page
Language ="C#"
AutoEventWireup ="true" CodeFile ="Default.aspx.cs" Inherits ="_Default" %>
<! 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">
< div >
</ div >
</ form >
</ body >
</ html >
Go to Design View and you will notice
there is nothing on your page. Now open your Toolbox and add a ScriptManager
first and add an Updateprogress control in your page as depicted in the Diagram
below.
The Last Part is to Add a
button, make sure the Button is in the Updatepanel. We are going to use this
button to trigger the partial post and make a longer thread that will keep our
progress indicator running while the thread is still executing.
And after you have added these controls
you should have something like this in your mark-up.
<% @ Page
Language ="C#"
AutoEventWireup ="true"
CodeFile ="Default.aspx.cs"
Inherits ="_Default"
%>
<% @ Register
Assembly ="System.Web.Extensions,
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace ="System.Web.UI" TagPrefix ="asp" %>
<! 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">
< div >
< asp : ScriptManager ID ="ScriptManager1" runat ="server">
</ asp : ScriptManager >
< asp : UpdateProgress ID ="UpdateProgress1" runat ="server" AssociatedUpdatePanelID ="UpdatePanel1">
< ProgressTemplate >
< img alt ="" src ="ajax-loader_Loading.gif"
style =" width : 100px ; height : 100px" />
</ ProgressTemplate >
</ asp : UpdateProgress >
< asp : UpdatePanel ID ="UpdatePanel1" runat ="server">
</ asp : UpdatePanel >
</ div >
</ form >
</ body >
</ html >
And the Design view should look like this
Double
click the button and to to the click event of the button and add the Following
code.
protected void cmdshow_Click(object
sender, EventArgs e)
{
Thread .Sleep(2000);
}
The
above code, create a thread that will sleep after 2000 miliseconds, this will
make sure that the UpdateProgress will show the Gif image to show as long as
this thread still execute
That means your whole server side code should look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
public partial
class _Default
: System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void cmdshow_Click(object
sender, EventArgs e)
{
Thread .Sleep(2000);
}
}
When you are done, press
F5 to run your Project, you will see a page with only a button as depicted
below.
If you click the button ,
a thread will start and you will see the UpdateProgress image as depicted
Conclusion
This
is how you create a progress bar in ASP.NeT Ajax. This it is a good idea to add
this in your application when needed. Remember too much of a thing makes a
thing tallied.
Thank
you for visiting DotnetFunda.
Vuyiswa
Maseko
If you like this article, subscribe to our subscribe via email to our Interview Questions, Codes and Forums section.