自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Ajax分頁(yè)功能的無(wú)框架實(shí)現(xiàn)方法

作者：InSky
開(kāi)發(fā) 前端
最近想做一個(gè)Ajax分頁(yè)功能，網(wǎng)上一搜幾乎全是基于某某框架的Ajax分頁(yè)，要么需給頁(yè)面加上< scriptManager >< /scriptManager>，要么需引入某dll，要么需使用類似于jQuery的框架。使用如上方法確實(shí)可以實(shí)現(xiàn)Ajax分頁(yè)效果，但我總覺(jué)得不夠簡(jiǎn)潔，這里寫一些我的簡(jiǎn)單總結(jié)。

開(kāi)始進(jìn)入Ajax分頁(yè)功能的無(wú)框架實(shí)現(xiàn)方法的正題。

首先創(chuàng)建前臺(tái)頁(yè)面MyAjaxPager.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" > 
  6. <head runat="server"> 
  7.     <title></title> 
  8.     <style  type="text/css"> 
  9.     .a{}{ height:20px; line-height:20px; border-bottom:1px solid #d8dfea; clear:both;}  
  10.     .b{}{ float:left; width:30px;}  
  11.     .c{}{ float:left; width:500px;}  
  12.     </style> 
  13.     <script type="text/javascript" src="http://www.cnblogs.com/JS/AjaxFunction.js"></script> 
  14.     <script type="text/javascript"> 
  15.         var xmlHttp;  
  16.           
  17.         function getData(pIndex) {  
  18.             xmlHttp = GetXmlRequest();  
  19.             xmlHttp.onreadystatechange = ShowRepeaterData;  
  20.             xmlHttp.open("GET", "AjaxProcess.aspx?index=" + pIndex, true);  
  21.             xmlHttp.send(null);  
  22.         }  
  23.  
  24.         function ShowRepeaterData() {  
  25.             if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {  
  26.                 var gridData = xmlHttp.responseText;  
  27.                 var grid = document.getElementById("grid");  
  28.                 grid.innerHTML = gridData;  
  29.             }  
  30.         }  
  31.     </script> 
  32. </head> 
  33. <body> 
  34.     <form id="form1" runat="server"> 
  35.     <div> 
  36.             <div id="page"> 
  37.         <p align="left"> 
  38.             <a href="javascript:getData(1);">1</a> 
  39.             <a href="javascript:getData(2);">2</a> 
  40.             <a href="javascript:getData(3);">3</a> 
  41.             <a href="javascript:getData(4);">4</a> 
  42.             <a href="javascript:getData(5);">5</a> 
  43.             <a href="javascript:getData(50);">50</a> 
  44.             <a href="javascript:getData(500);">500</a> 
  45.             <a href="javascript:getData(5000);">5000</a> 
  46.             <a href="javascript:getData(50000);">50000</a> 
  47.             <a href="javascript:getData(99999);">99999</a> 
  48.         </p> 
  49.         <div id="grid"> 
  50.             <asp:Repeater ID="rptGrid" runat="server"> 
  51.                 <HeaderTemplate> 
  52.                     <table> 
  53.                         <tr> 
  54.                             <th style="border:solid 1px red;">編號(hào)</th> 
  55.                             <th style="border:solid 1px red;">姓名</th> 
  56.                         </tr> 
  57.                 </HeaderTemplate> 
  58.                 <ItemTemplate> 
  59.                     <tr> 
  60.                         <td style="border:solid 1px red;"><%# Eval("Id") %></td> 
  61.                         <td style="border:solid 1px red;"><%# Eval("Name") %></td> 
  62.                     </tr> 
  63.                 </ItemTemplate> 
  64.                 <FooterTemplate> 
  65.                     </table> 
  66.                 </FooterTemplate> 
  67.             </asp:Repeater> 
  68.         </div> 
  69.     </div> 
  70.     </div> 
  71.     </form> 
  72. </body> 
  73. </html> 

Ajax分頁(yè)功能的無(wú)框架實(shí)現(xiàn)的畫(huà)面很簡(jiǎn)單，就是一排index地址，當(dāng)點(diǎn)擊鏈接后會(huì)以ajax的方式將數(shù)據(jù)綁定到下邊的repeater。

實(shí)現(xiàn)畫(huà)面

主要功能是在處理Ajax請(qǐng)求的AjaxProcess.aspx頁(yè)面實(shí)現(xiàn)的，我們來(lái)看看。

  1. AjaxProcess.aspx  
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxProcess.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.AjaxProcess" %> 
  3. <asp:Repeater ID="rptGrid" runat="server"> 
  4.     <HeaderTemplate> 
  5.         <table> 
  6.             <tr> 
  7.                 <th style="border:solid 1px red;">編號(hào)</th> 
  8.                 <th style="border:solid 1px red;">姓名</th> 
  9.             </tr> 
  10.     </HeaderTemplate> 
  11.     <ItemTemplate> 
  12.         <tr> 
  13.             <td style="border:solid 1px red;"><%# Eval("Id") %></td> 
  14.             <td style="border:solid 1px red;"><%# Eval("Name") %></td> 
  15.         </tr> 
  16.     </ItemTemplate> 
  17.     <FooterTemplate> 
  18.         </table> 
  19.     </FooterTemplate> 
  20. </asp:Repeater>   

注意，這個(gè)Ajax處理頁(yè)面的aspx部分并不像往常那樣是光禿禿的，只有<% %>內(nèi)的信息，它的下面多了一個(gè)repeater控件，細(xì)心的朋友會(huì)發(fā)現(xiàn)，這個(gè)repeater控件和主頁(yè)面的repeater控件一摸一樣。就是利用這個(gè)repeater控件來(lái)生成返回的html內(nèi)容的，具體怎么做，請(qǐng)看代碼：

  1. AjaxProcess.aspx.cs  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Text;  
  8. using System.IO;  
  9. namespace AjaxDemo.AjaxPager.MyAjaxPager  
  10. {  
  11.     public class Item  
  12.     {  
  13.         public string Id  
  14.         {  
  15.             get;  
  16.             set;  
  17.         }  
  18.  
  19.         public string Name  
  20.         {  
  21.             get;  
  22.             set;  
  23.         }  
  24.     }  
  25.  
  26.     public partial class AjaxProcess : System.Web.UI.Page  
  27.     {  
  28.         private int PageSize  
  29.         {  
  30.             get { return 10; }  
  31.         }  
  32.  
  33.         private List<Item> GenerateData()  
  34.         {  
  35.             List<Item> lstItems = new List<Item>();  
  36.             for (int i = 1; i <= 1000000; i++)  
  37.             {  
  38.                 Item it = new Item();  
  39.  
  40.                 it.Id = i.ToString();  
  41.                 it.Name = "zs" + i;  
  42.  
  43.                 lstItems.Add(it);  
  44.             }  
  45.  
  46.             return lstItems;  
  47.         }  
  48.  
  49.         private List<Item> GetData(int index)  
  50.         {  
  51.             List<Item> lstItem = GenerateData();  
  52.             List<Item> bdItem = new List<Item>();  
  53.  
  54.             int begIndex = (index - 1) * PageSize;  
  55.             int endIndex = index * PageSize;  
  56.  
  57.             for (int i = begIndex; i < endIndex; i++)  
  58.             {  
  59.                 bdItem.Add(lstItem[i]);  
  60.             }  
  61.  
  62.             return bdItem;  
  63.         }  
  64.  
  65.         private string GetHtml(Control control)  
  66.         {  
  67.             StringBuilder sb = new StringBuilder();  
  68.             StringWriter writer = new StringWriter(sb);  
  69.             HtmlTextWriter writer2 = new HtmlTextWriter(writer);  
  70.             control.RenderControl(writer2);  
  71.             return sb.ToString();  
  72.         }  
  73.  
  74.         protected void Page_Load(object sender, EventArgs e)  
  75.         {  
  76.             int index = 0;  
  77.             if (int.TryParse(Request.QueryString["index"], out index))  
  78.             {  
  79.                 //獲取到index再進(jìn)行操作  
  80.                 this.rptGrid.DataSource = this.GetData(index);  
  81.                 this.rptGrid.DataBind();  
  82.  
  83.                 Response.Clear();  
  84.                 string html = this.GetHtml(rptGrid);  
  85.                 Response.Write(html);  
  86.                 Response.End();  
  87.             }  
  88.         }  
  89.     }  
  90. } 

代碼相當(dāng)簡(jiǎn)單，GenerateData()方法用來(lái)生成一個(gè)DataSource，GetData(int index)方法用來(lái)讀取分頁(yè)信息。在Page_Load事件中，會(huì)首先獲取請(qǐng)求字符串中的index(頁(yè)碼)，然后利用index取得當(dāng)前頁(yè)的信息并將它綁定到repeater控件上，然后利用GetHtml()方法來(lái)獲取綁定數(shù)據(jù)后的repeater控件的html內(nèi)容，將它返回。

Ok，在主頁(yè)面的js中。

  1. var gridData = xmlHttp.responseText;  
  2. var grid = document.getElementById("grid");  
  3. grid.innerHTML = gridData; 

我們獲取返回的這段html，并將它的內(nèi)容輸出到主頁(yè)面的制定div中，到此就成功完成了一次分頁(yè)請(qǐng)求。

這是一個(gè)簡(jiǎn)單的demo，如果有需要，還可以加一些分頁(yè)等待過(guò)程中的動(dòng)畫(huà)什么的，這里就不詳述了。

以上Ajax分頁(yè)功能的內(nèi)容希望可以幫助到有需要的朋友。

【編輯推薦】

  1. 一套通用Ajax框架的源代碼
  2. Ajax, 選擇GET還是POST？
  3. 流行的AJAX框架對(duì)比：jQuery，Mootools，Dojo，Ext JS
  4. ASP.NET AJAX框架調(diào)用后臺(tái)代碼的基本方法
  5. 詳解如何實(shí)現(xiàn)最基本的AJAX框架
責(zé)任編輯：彭凡 來(lái)源： cnblogs
Ajax分頁(yè)功能
相關(guān)推薦

2023-05-09 07:38:57

jQueryAjax代碼

2009-05-20 14:49:16

ibmdwAjaxWeb開(kāi)發(fā)

2009-01-03 08:41:51

Ajax無(wú)框架的AjaxASP.NET

2012-05-02 14:41:04

jQuery

2009-11-24 16:09:44

PHP Ajax

2010-11-10 15:29:40

SQL SERVER

2013-12-02 15:25:38

jQuery插件

2009-12-23 09:04:41

LINQ通用分頁(yè)

2009-08-18 09:17:03

AJAX框架

2010-08-31 19:53:25

DHCP功能

2009-07-22 16:02:39

ASP.NET MVCPagedList

2009-07-28 09:51:11

Flex數(shù)據(jù)分頁(yè)查詢

2009-09-10 09:50:47

ASP.NET MVC

2010-09-17 10:26:01

iPhone

2012-04-13 10:05:24

ASP.NET

2012-08-08 13:50:28

jQuery

2011-08-15 10:22:19

分頁(yè)查詢數(shù)據(jù)庫(kù)

2010-05-25 11:04:36

GRUB加密

2009-09-18 09:37:11

AJAX CDN

2013-01-15 11:22:29

AjaxASP.NET
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)