
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleLikeLoading.aspx.cs" Inherits="GoogleLikeLoading" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!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"> <script type="text/javascript" language="javascript"> function onUpdating() { // get the update progress div var updateProgressDiv = $get('updateProgressDiv'); // get the gridview element var gridView = $get('<%= this.grd.ClientID %>'); // make it visible updateProgressDiv.style.display = ''; // get the bounds of both the gridview and the progress div var gridViewBounds = Sys.UI.DomElement.getBounds(gridView); var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv); var x; var y; // do the math to figure out where to position the element // center of gridview x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2); y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2); // set the progress element to this position Sys.UI.DomElement.setLocation(updateProgressDiv, x, y); } function onUpdated() { // get the update progress div var updateProgressDiv = $get('updateProgressDiv'); // make it invisible updateProgressDiv.style.display = 'none'; } </script> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="updatePanel" runat="server"> <ContentTemplate> <asp:GridView ID="grd" runat="server" OnPageIndexChanging="grd_PageIndexChanging" AllowPaging="true" PageSize="10"> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel"> <Animations> <OnUpdating> <Parallel duration="0"> <%-- place the update progress div over the gridview control --%> <ScriptAction Script="onUpdating();" /> </Parallel> </OnUpdating> <OnUpdated> <Parallel duration="0"> <%--find the update progress div and place it over the gridview control--%> <ScriptAction Script="onUpdated();" /> </Parallel> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender> <div id="updateProgressDiv" style="background-color: #CF4342; display: none; position: absolute;"> <span style="color: #fff; margin: 3px">Loading ... </span> </div> </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 System.Data; public partial class GoogleLikeLoading : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["ds"] != null) { grd.DataSource = Session["ds"] as DataTable; grd.DataBind(); } else { grd.DataSource = CreateDataTable(); grd.DataBind(); } } } public DataTable CreateDataTable() { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("Id", typeof(string))); dt.Columns.Add(new DataColumn("Name", typeof(string))); DataRow dr; for (int i = 0; i <= 100; i++) { dr = dt.NewRow(); dr[0] = i.ToString(); dr[1] = "Test" + i.ToString(); dt.Rows.Add(dr); } Session["ds"] = dt; return dt; } protected void grd_PageIndexChanging(object sender, GridViewPageEventArgs e) { //Remove this on Application server System.Threading.Thread.Sleep(3000); grd.PageIndex = e.NewPageIndex; grd.DataSource = Session["ds"] as DataTable; grd.DataBind(); } }
0 Comments
Please do not post any spam link in the comment box😊