Show Loading (Progress) GIF Image on ASP.Net ListView LinkButton Click using C# and VB.Net

Last Reply 27 days ago By pandeyism

Posted 27 days ago

hello,

i have this linkbutton, i want on click of this link button i want to show text processing. so user knows some thing is going on.

so on each linkbutton it has commandname which fires some server side event while it is fire server side i want to show gif so user knows some thing is happenign but gif should load inside the linkbutton or its just say processing.

<asp:ListView ID="ListView2" runat="server" OnItemDataBound="ListView2_ItemDataBound" OnItemCommand="ListView2_ItemCommand">
   <ItemTemplate>
      <ul class="no-padding no-margin"> <li>
         <asp:Label ID="Label2" runat="server" Text='<%# Eval("time") %>' ></asp:Label></li>
      <li> <asp:LinkButton ID="btn1" runat="server" CommandName="selection1" Enabled="false" CssClass="notava" > </asp:LinkButton> </li>
   <li>      <asp:LinkButton ID="btn2" runat="server" CommandName="selection2" Enabled="false"  CssClass="notava" > </asp:LinkButton> </td> 
       <li>  <asp:LinkButton ID="btn3" runat="server" CommandName="selection3" Enabled="false"  CssClass="notava" > </asp:LinkButton> </li>
      <li>   <asp:LinkButton ID="btn4" runat="server" CommandName="selection4" Enabled="false"  CssClass="notava" > </asp:LinkButton> </li>
      <li>   <asp:LinkButton ID="btn5" runat="server" CommandName="selection5" Enabled="false"  CssClass="notava"  > </asp:LinkButton> </li>
     <li>    <asp:LinkButton ID="btn6" runat="server" CommandName="selection6" Enabled="false"  CssClass="notava" > </asp:LinkButton> </li>
     <li>    <asp:LinkButton ID="btn7" runat="server" CommandName="selection7" Enabled="false"  CssClass="notava" > </asp:LinkButton> </li>
        </ul>
   </ItemTemplate>
</asp:ListView>

 

Posted 27 days ago

Hi nauna,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head 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 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 });
            }, 50);
        }
        $('[id*=ListView2]').live("click", function () {
            ShowProgress();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListView ID="ListView2" runat="server" OnItemCommand="ListView2_ItemCommand">
            <ItemTemplate>
                <ul class="no-padding no-margin">
                    <li>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("time") %>'></asp:Label></li>
                    <li>
                        <asp:LinkButton ID="btn1" runat="server" Text="Click" CommandName="selection1"> </asp:LinkButton>
                    </li>
                </ul>
            </ItemTemplate>
        </asp:ListView>
        <div class="loading" align="center" runat="server" id="loadergif">
            Loading. Please wait.<br />
            <br />
            <img src="loader.gif" alt="" />
        </div>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindData();
    }
}
     
private void BindData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("time");
    dt.Rows.Add(DateTime.Now);
    ListView2.DataSource = dt;
    ListView2.DataBind();
}

protected void ListView2_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "selection1")
    {
        System.Threading.Thread.Sleep(5000);
        string script = "$(document).ready(function () { $('[id*=ListView2]').find('a').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)Handle Me.Load
        If Not Me.IsPostBack Then
            BindData()
        End If
    End Sub

    Private Sub BindData()
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("time")
        dt.Rows.Add(DateTime.Now)
        ListView2.DataSource = dt
        ListView2.DataBind()
    End Sub

    Protected Sub ListView2_ItemCommand(ByVal sender As Object, ByVal e As ListViewCommandEventArgs)
        If e.CommandName = "selection1" Then
            System.Threading.Thread.Sleep(5000)
            Dim script As String = "$(document).ready(function () { $('[id*=ListView2]').find('a').click(); });"
            ClientScript.RegisterStartupScript(Me.[GetType](), "load", script, True)
        End If
    End Sub

Screenshot