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.
Please note that the Scriptmanager must be the first control. It must appear before all Ajax controls. After you have added the Updateprogress control, add an UpdatePanel in the same section of Ajax in your toolbox. Add the gif images that represent progress, there are many gif’s that you can download on the net to mimic that. In your Updateprogress control there is a property that we will use to link our Updateprogress with our Update Panel “AssociatedUpdatePanel” change it to the name of your UpdatePanel 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.
No comments:
Post a Comment