How to show the Loader image like in gmail when loading Data into GridView?
Could any one help how to show the loader image when the data is loading ?I did a sample one which is not a perfect one.Please suggest me the best way .I have a question can we use jquery or javascript?Here when i click the load the data has to load to GV in between this process the preloader has to be visible like in GMAIL.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loader Image While Loading Data in GV.aspx.cs"
Inherits="Loader_Image_While_Loading_Data_in_GV" %>
<!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>Loader Image While Loading Data in GV</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Image ID="load_img" runat="server" Height="70px" Width="70px" ImageUrl="~/Images/ajax-loader_green.gif"
Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnload" runat="server" Text="Load" OnClick="btnload_Click" />
</td>
</tr>
<tr>
<td>
<asp:GridView ID="gv1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
开发者_开发问答 </asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In the Code behind i wrote like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AdventureWorksModel;
public partial class Loader_Image_While_Loading_Data_in_GV : System.Web.UI.Page
{
AdventureWorksEntities awe = new AdventureWorksEntities();
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnload_Click(object sender, EventArgs e)
{
load_img.Visible = true;
gv1.DataSource = awe.CountryRegionCurrencies.ToList();
gv1.DataBind();
load_img.Visible = false;
}
}
Loader image is usually used to notify user that some Ajax activities are running.
I would suggest you to wrap your GridView with UpdatePanel as follows:
<form id="form1" runat="server">
<!-- You must always add a ScriptManager control -->
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<td>
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="btnLoad" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gv1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</form>
Everything inside UpdatePanel's ContentTemplate will be updated when the UpdatePanel's Triggger is occured (in this case, when user click btnLoad button)
Now, you need to add UpdateProgress to inform user that the server side processing is still progressing.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<!-- it doesn't have to be asp Image control -->
<img src="Images/ajax-loader_green.gif" alt="" />
</asp:UpdateProgress>
you can put it anywhere.
example of usage, read this blog
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally): http://plugins.jquery.com/project/CenterImage
Demo site: http://www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
Currently available configuration settings:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
$('.4th').CenterImage('remove');
加载中,请稍侯......
精彩评论