如何在将数据加载到GridView时显示像gmail中的Loader图像？

任何人都可以帮助如何显示加载数据时加载器图像？我做了一个样本，这不是一个完美的one.Please建议我最好的方式。我有问题，我们可以使用jQuery或JavaScript？我点击数据必须加载到GV的加载，在此过程中，预加载器必须在GMAIL中可见。 Like this Process Demo Picture 如何在将数据加载到GridView时显示像gmail中的Loader图像？

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

后面的代码我写这样的

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

来源

2011-01-31 Hemant Kumar

装载机形象通常是用来通知一些阿贾克斯活动正在运行的用户。

我建议你UpdatePanel来包装你GridView如下：

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

当在UpdatePanel的Triggger正在发生的UpdatePanel的的ContentTemplate内的所有内容将被更新（在这种情况下，当用户点击btnLoad按钮）

现在，您需要添加UpdateProgress来通知用户服务器端处理仍在进行中。

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

你可以把它放在任何地方。

例如使用的，read this blog

来源

2011-01-31 10:31:46

但我点击下一次自动从Cache.Can获取值，我们使用javas做到这一点cript或jquery？ – 2011-02-01 04:21:06

使用下面的小jQuery插件。 IT中心加载图像中指定的容器（垂直和水平方向）的中间： http://plugins.jquery.com/project/CenterImage

演示网站： http://www.demosites.somee.com/demos/centerimage.html

用法：这个插件位置加载镜像集中在指定的HTML容器（ div，span ...）。

目前可用的配置设置：

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

进行初始化最低配置：

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

调用此，为了去除加载图像（和覆盖）

$('.4th').CenterImage('remove');

来源

2011-06-15 09:40:23 Jovica

如何在将数据加载到GridView时显示像gmail中的Loader图像？

回答

相关问题