Progress Bar Example In Asp.Net

In this post we will learn how to use Progress Bar Example In Asp.Net.We are using a DropDownList with having locations of different cities, Submit button on click of Submit button the data is loaded in ASP.Net GridView. Also there’s HTML DIV which is used to display the loading progress image till data is processed in GridView.

Design:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Progress Bar Example In Asp.Net</title>
<style type="text/css">
body {
margin:0px auto;
width:580px;
font-family:Calibri;
font-size:12px;
text-align:center;
text-transform:capitalize;
}
.popup
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.load
{
width: 100px;
height: 100px;
display: none;
position: fixed;
z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function Progress() {
setTimeout(function () {
var POPOUP = $('<div />');
POPOUP.addClass("popup");
$('body').append(POPOUP);
var loading = $(".load");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
Progress();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Progress Bar Example In Asp.Net</h1>
<asp:DropDownList ID="location" runat="server">
<asp:ListItem Value="DEL">Delhi</asp:ListItem>
<asp:ListItem Value="GGN">Gurgaon</asp:ListItem>
</asp:DropDownList>   &nbsp;&nbsp; 
<asp:Button ID="Submit" Text="Submit" OnClick="Submit_Click" runat="server" />
<br />
<br />
<asp:GridView ID="gv" runat="server" Width="100%">

</asp:GridView>


<div class="load">
<img src="loader1.GIF" alt="" />
</div>
</div>
</form>
</body>
</html>

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string script = "$(document).ready(function () { $('[id*=Submit]').click(); });";
            ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
        }
    }
    protected void Submit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        databind();
    }
    public void databind()
    {
        string strcon = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
        SqlConnection conn = new SqlConnection(strcon);
        conn.Open();
        string str = "select * from emp1 WHERE CITY='"+location.SelectedItem.Value.ToString()+"' ";
        SqlCommand cmd = new SqlCommand(str, conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        gv.DataSource = dt;
        gv.DataBind();


    }
}