Display loading image on Anchor Link Click using JavaScript and jQuery in ASP.Net

Poonam123
 
on Oct 07, 2019 01:32 AM
Sample_185185.zip
2643 Views

How to show loader image when click on anchor tag.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
pandeyism
 
on Oct 07, 2019 07:47 AM

Hi Poonam123,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('a').on("click", 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 });
                setTimeout(function () {
                    loading.hide();
                    window.location.href = "Dafault.aspx?Country=" + $('[id*=ddlCountries]').find('option:selected').val();
                }, 1000);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    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>
    <a href="javascript:void(0)">Load Customer</a>
    <hr />
    <div class="loading" align="center">
        Loading. Please wait.<br />
        <br />
        <img src="loader.gif" alt="" />
    </div>
    </form>
</body>
</html>

Default

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

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

Default C#

protected void Page_Load(object sender, EventArgs e)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT TOP 5 * FROM Customers WHERE Country = @Country OR @Country = ''";
    SqlCommand cmd = new SqlCommand(query);
    cmd.Parameters.AddWithValue("@Country", Request.QueryString["Country"]);
    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();
            }
        }
    }
}

Default VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT TOP 5 * FROM Customers WHERE Country = @Country OR @Country = ''"
    Dim cmd As SqlCommand = New SqlCommand(query)
    cmd.Parameters.AddWithValue("@Country", Request.QueryString("Country"))
    Using con As SqlConnection = New SqlConnection(strConnString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As DataSet = New DataSet()
                sda.Fill(ds, "Customers")
                gvCustomers.DataSource = ds
                gvCustomers.DataBind()
            End Using
        End Using
    End Using
End Sub

Screenshot