Progress Bar in ASP.Net

HTML Markup:

Country: <asp:DropDownList ID="ddlCountries" runat="server">

    <asp:ListItem Text="All" Value="" />

    <asp:ListItem Text="USA" Value="USA" />

    <asp:ListItem Text="Brazil" Value="Brazil" />

    <asp:ListItem Text="France" Value="France" />

    <asp:ListItem Text="Germany" Value="Germany" />

asp:DropDownList>

<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"

    OnClick="btnSubmit_Click" />

<hr />

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">

    <Columns>

        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />

        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />

        <asp:BoundField DataField="City" HeaderText="City" />

    Columns>

asp:GridView>

<div class="loading" align="center">

    Loading. Please wait.<br />

    <br />

    <img src="loader.gif" alt="" />

div>

Model background CSS:

<style type="text/css">

    .modal

{

        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%;

}

    .loading

{

        font-family: Arial;

        font-size: 10pt;

        border: 5px solid #67CFF5;

        width: 200px;

        height: 100px;

        display: none;

        position: fixed;

        background-color: White;

        z-index: 999;

}

style>

Displaying the loading progress image on Page Load and PostBack

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>

<script type="text/javascript">

    function ShowProgress() {

        setTimeout(function () {

            var modal = $('');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            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 () {
        ShowProgress();
    });
script>

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

{

        string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";

        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);

}

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

    // Add Fake Delay to simulate long running process.

    System.Threading.Thread.Sleep(5000);

    LoadCustomers();

}

private void LoadCustomers()

{

    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

    string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''";

    SqlCommand cmd = new SqlCommand(query);

    cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);

    using (SqlConnection con = new SqlConnection(strConnString))

{

        using (SqlDataAdapter sda = new SqlDataAdapter())

{

            cmd.Connection = con;

            sda.SelectCommand = cmd;

            using (DataSet ds = new DataSet())

{

                sda.Fill(ds, "Customers");

                gvCustomers.DataSource = ds;

                gvCustomers.DataBind();

}

}

}

}

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Monica Bundel10y ago
HTML Markup:

Country: <asp:DropDownList ID="ddlCountries" runat="server">
<asp:ListItem Text="All" Value="" />
<asp:ListItem Text="USA" Value="USA" />
<asp:ListItem Text="Brazil" Value="Brazil" />
<asp:ListItem Text="France" Value="France" />
<asp:ListItem Text="Germany" Value="Germany" />
asp:DropDownList>
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
OnClick="btnSubmit_Click" />
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
Columns>
asp:GridView>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />
div>

Model background CSS:

<style type="text/css">
.modal
{
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%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
style>

Displaying the loading progress image on Page Load and PostBack
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('
');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
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 () {
ShowProgress();
});
script>

c#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
// Add Fake Delay to simulate long running process.
System.Threading.Thread.Sleep(5000);
LoadCustomers();
}

private void LoadCustomers()
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''";
SqlCommand cmd = new SqlCommand(query);
cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
gvCustomers.DataSource = ds;
gvCustomers.DataBind();
}
}
}
}
Rajeev Punhani10y ago
Hi Surya,

Please check the following link
http://www.dotnetcurry.com/ShowArticle.aspx?ID=384
Munesh Sharma10y ago
http://www.c-sharpcorner.com/UploadFile/8b7513/jquery-progress-bar-in-Asp-Net/
Sujeet Suman10y ago
Surya please once go through below link. This may help you:

http://www.c-sharpcorner.com/UploadFile/8b7513/jquery-progress-bar-in-Asp-Net/

http://stackoverflow.com/questions/11754477/using-progress-bar-in-asp-net

http://www.codeproject.com/Tips/722331/ProgressBar-using-JQueryUI-and-SignalR

http://www.aspdotnet-suresh.com/2013/10/jQuery-display-Progress-Bar-on-Button-Click-in-Aspnet.html

If this is helpful for you then please accept my Answer.

Progress Bar in ASP.Net

jQuery Progress Bar in ASP.Net