Progress bar in ASP.NET

Display after application in ASP.NET

Hi!

Here i will show you step by step procedure how to use

Display after application in ASP.NET in visual studio 2005 / 2008

This article shows you the usage of progress bar which works after a specified time and display the current date and time….

__________________________________________________

Here I am using Visual Studio 2008 but there is no condition you can use Visual Studio 2005 also.

So follow these steps to create Display after application

The Steps are:

1- Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008

2- Now go to File Menu -> New -> Web Site

3- Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# , Visual Basic , J #)

Choose Visual C#

4 - Click on the OK Button:-

First you have to learn XML and HTML to work with ASP .NET_

I have used <! – –> to make the text as comment this is the way to make comment in this code …

This is the Source Code window and in this page you will se this code…

<%@ 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>Type your webpage title here</title> <!– Here you can specify your page title in between title tag ->
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between div tags you can manage your web controls like buttons, labels, picture

Box, ImageMap etc –>

</div>
</form>
</body>
</html>

See here is a tab named Design in the bottom of this page

5- Click on this tab and you will see a blank web page where you can drag any control from the toolbox (which is in the left side of this window)

6-copy and .gif progress image and paste it into the solution explorer.

7- Now Drag some controls under the AJAX Extensions

One scriptmanager

One UpdatePanel

One UpdateProgress

And now set the source code window like this….

Under the form tag__

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<div><asp:Button ID ="button1" runat="server" Text="Update Time/ Date"

onclick="button1_Click"/>

<br />

<asp:Label ID ="label1" runat ="server"></asp:Label>

</div>

</center>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="2000" DynamicLayout ="true">

</ProgressTemplate>

</asp:UpdateProgress>

</div>

8- Now in the design window double click the button and type this code in the code window…

protected void button1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

label1.Text = "Page refreshed at" + DateTime.Today.ToLongDateString() + "" + DateTime.Now.ToLongTimeString();

}

11 - Now run your web site by Ctrl + F5

OUT PUT

12-When you click on the button then it will seem like this…

Progress bar.JPG

13- And after 5 seconds it will display the current date and time….of your system.

14-Close web browser

14-Close visual studio

Thanks!

--Nikhil Kumar