Article

Display Progress Bar on Button Click in Asp.net Using Jquery

16 Jun 2015 Kamal Pratap
0 Comments 2420 Views



In this tutorial we explain how to show progress bar on Button Click in asp.net using jquery.

 

Asp.Net :

<!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>Progress Bar In Asp.Net Using JQuery</title>
    <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 = $('<div />');
                modal.addClass("modaldiv");
                $('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>
    <style type="text/css">
        .modaldiv
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            filter: Alpha(Opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.6;
            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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnProgress" runat="server" Text="Show Progress" 
        onclick="btnProgress_Click" />
    <div>
        <div class="loading" align="center">
            <br />
            Loading. Please wait.<br /><br />
            <img src="img/progress.gif" alt="" width="150" />
        </div>
    </div>
    </form>
</body>
</html>

C# Code:

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 Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnProgress_Click(object sender, EventArgs e)
    {
        Thread.Sleep(5000);
    }
}

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment