Serving Information Simply

Tuesday 15 January 2013

Progressbar Example while loading the Data




Hello friends.........
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 Combo Box (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 see 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 script manager
One Update Panel
One Update Progress
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">
        <ContentTemplate>
       
        <center>
        <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>
        <center><img src="progress.gif" runat="server" /></center>
        </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

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

14-Close web browser
15-Close visual studio
Thanks!

3 comments:

  1. nice Article...thanks

    ReplyDelete
  2. nice can you tell me free asp.net with C# training website in hindi language?

    ReplyDelete