Display Loading Image before redirecting to another page in ASP.Net using jQuery

simflex

SOLVED CLOSED ACTIVE ANSWERED
User: simflex
Posted: on Mar 14, 2022 10:34 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 8307
Sample Code: Download

Hello again,

Sorry for another post. I tried resolving this on my own but having problem.

I followed some samples from aspsnippets forum but cannot get it to work.

A user opens up a browser and types for instance, http://myhomepage.com and hits enter, the page takes several seconds before redirecting to another page leading some users to think the page is not doing anything.

To resolve this, I borrowed a code from the site reference above so that a user would see a loading icon with message, Loading, please wait.

So far, the code is not working. The page still takes several seconds before redirecting without showing the loading message.

Any idea what could be missing?

As always, many thanks for your patience and continued assistance.

Partial Class Main
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim times As New Date
        times = Now
        If times < "01/01/2020 12:00:00 AM" Or times > "10/04/2020 11:59:00 PM" Then
            Response.Redirect("done.aspx")
            MyBase.OnLoad(e)
        Else
            Response.Redirect("contactlist.aspx")
        End If
    End Sub
End Class

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Community Form</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <link rel="shortcut icon" href="~/images/favicon.ico" />
   <link  type="text/css" rel="stylesheet" href="css/loader.css" />
</head>
<body>
    <img src="images/income1177DisclosureHeader.png" style="margin: auto;width:100%;" class="img-responsive" alt="" width="1177" height="168"/>
    <form id="form1" runat="server">
    <div class="loading" style="margin-top:100px;margin: auto;">
        Loading. Please wait.<br />
        <br />
        <img src="images/loader.gif" alt="" />
    </div>
    </form>
    <script type="text/javascript" src="js/progressbar.js"></script>
</body>
</html>

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Mar 15, 2022 04:44 AM
Modified: on Mar 17, 2022 11:29 AM
Report

Hi simflex,

Refer below sample.

HTML

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    .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>
<script type="text/javascript" src="https://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("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>
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers" OnClick="btnSubmit_Click" Style="display: none;" />
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="progress.gif" alt="" />
</div>

Code

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)
{
    Response.Redirect("https://www.aspsnippets.com/");
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim script As String = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });"
        ClientScript.RegisterStartupScript(Me.GetType(), "load", script, True)
    End If
End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
    Response.Redirect("https://www.aspsnippets.com/")
End Sub

Screenshot

Display Loading Image before redirecting to another page in ASP.Net using jQuery

Company

Explore

Follow us

Contact Us