Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx

  ASP.NET   Wednesday, September 4, 2019   106 | No Comments Yet!!! | No Download | No Demo | Pawan kumar
 Tags: Show Loading Progress Indicator 


Introduction

Here Pawan Kumar will explain how to show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx

Description

In previous post I have explained Disabled submit button after clicked using jQuery with example, Simple HTML5 Example (Canvas) with Example Source Code, Create or Generate QR Code in ASP.Net using C#, ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery, Display TextBox when CheckBox is checked in ASP.Net using C#, Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery, and many more articles.

Now I will explain How to Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx

So follow the steps to learn Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx

Default.aspx

<%@ 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></title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            font-family: Arial;
        }
        .modal
        {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
        }
        .center
        {
            z-index: 1000;
            margin: 300px auto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }
        .center img
        {
            height: 128px;
            width: 128px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="modal">
                <div class="center">
                    <img alt="" src="loader.gif" />
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div align="center">
                <h1>
                    Click the below button to see the UpdateProgress!</h1>
                <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Default.aspx.cs

using System;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

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

 

Conclusion:

So, In this tutorial we have learned, Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx


Post Comments

if you have some suggestion, question, request on Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASPNet.aspx.

Please use the comment box to express your views.

 

Comments: