Implement Ajax paging in ASP. NET

Specify a div container on the page to receive dynamically generated paging data:

1 <div id="div_menu">2 </div>

Use jQuery to request and process data in Json format:

1 // define page number and page capacity 2 var pageIndex = 1; 3 var pageSize = 15; 4 var pageCount = 0; 5 var recordCount = 0; 6 AjaxGetData (pageIndex, pageSize ); 7 // Ajax get data 8 function AjaxGetData (index, size) {9 $. ajax ({10 url: "ProcessData. aspx ", 11 type:" Get ", 12 data:" pageindex = "+ index +" & pagesize = "+ size +" & rnd = "+ new Date (), 13 dataType: "json", 14 success: function (data) {15 var htmlStr = ""; 16 htmlStr + = "<tab Le width = 100%> "; 17 for (var I = 0; I <data. exercise_object.length; I ++) {18 htmlStr + = "<tr> <td class = 'rr 'onmouseover = 'javascript: onOver (this) 'onmouseout = 'javascript: onOut (this) 'onclick = 'javascript: onDown (this); '> "; 19 htmlStr + =" <a href = 'voucher/Exercise_Detail.aspx? Id = "+ data. exercise_object [I]. _ question_id + "'class = 'cpx12huei 'target = 'content'>"; 20 htmlStr + = "" + data. exercise_object [I]. _ row_number + "Question"; 21 htmlStr + = "</a>"; 22 htmlStr + = "</td> </tr> "; 23} 24 htmlStr + = "<tr style = 'text-align: center; '>"; 25 htmlStr + = "<td>"; 26 recordCount = Number (data. count); 27 pageCount = Math. ceil (recordCount/pageSize); 28 htmlStr + = "Total" + recordCount + "Records & nbsp; total <span id = 'Count'> "+ pageCount +" </span> pages & nbsp ;"; 29 htmlStr + = "<a href = 'javascript: void' onclick = 'gotoprepage () 'id = 'aprepage'> previous page </a> & nbsp; "; 30 htmlStr + =" <a href = 'javascript: void' onclick = 'gotonextpage () 'id = 'anextpage'> next page </a> & nbsp; & nbsp; "; 31 htmlStr + =" </td> "; 32 htmlStr + =" </tr> "; 33 htmlStr + =" </table> "; 34 $ ("# div_menu" ).html (htmlStr); 35}, 36 error: function (XMLHttpRequest, textStatus, errorThrown) {37 alert (XMLHttpRequest); 38 alert (textStatus ); 39 alert (errorThrown); 40} 41}); 42} 43 // function GoToPrePage () {45 pageIndex-= 1; 46 if (pageIndex <1) {47 pageIndex = 1; 48 return; 49} 50 AjaxGetData (pageIndex, pageSize); 51} 52 // the next page 53 function GoToNextPage () {54 pageIndex + = 1; 55 if (pageIndex> pageCount) {56 pageIndex = pageCount; 57 return; 58} 59 AjaxGetData (pageIndex, pageSize); 60}

Create a general handler to process Ajax asynchronous requests:

1 private readonly BLL. d_Accounting_Entry_Exercise bll = new BLL. d_Accounting_Entry_Exercise (); 2 private string _ action = "0"; 3 protected void Page_Load (object sender, EventArgs e) 4 {5 Int32 pageIndex = Int32.MinValue; 6 Int32 pageSize = Int32.MinValue; 7 8 if (Request ["action"]! = Null) 9 this. _ action = Request ["action"]; 10 11 JavaScriptSerializer jss = new JavaScriptSerializer (); 12 if (Request ["pageindex"]! = Null) 13 {14 pageIndex = Int32.Parse (Request ["pageindex"]. ToString (); 15 pageSize = Request ["pagesize"]! = Null? Int32.Parse (Request ["pagesize"]. toString (): 10; 16 17 // process the received data 18 int start = 0; 19 int end = 0; 20 21 if (this. _ action = "0") 22 {23 int recordCount = getAllCount (); 24 int pageCount = (int) Math. ceiling (double) recordCount)/(double) pageSize); 25 if (pageIndex> pageCount) 26 {27 pageIndex = pageCount; 28} 29 else if (pageIndex <1) 30 pageIndex = 1; 31 start = (pageIndex-1) * pageSize + 1; 32 end = pageIndex * pageSize; 33 34 IList <Exercise> exerciseLists = new List <Exercise> (); 35 Exercise exercise = null; 36 DataSet set = GetDataFromDB (start, end); 37 int id = 0; 38 for (int I = 0; I <set. tables [0]. rows. count; I ++) 39 {40 // Save the ID of the first row to Session 41 Session ["first_id"] = set. tables [0]. rows [0] ["question_id"]; 42 exercise = new Exercise (); 43 id = Convert. toInt32 (set. tables [0]. rows [I] ["question_id"]. toString (); 44 exercise. _ question_id = id; 45 exercise. _ question_content = set. tables [0]. rows [I] ["question_content"]. toString (); 46 exercise. _ question_answer = set. tables [0]. rows [I] ["question_answer"]. toString (); 47 exercise. _ question_analyze = set. tables [0]. rows [I] ["question_analyze"]. toString (); 48 exercise. _ question_status = Convert. toInt32 (set. tables [0]. rows [I] ["question_status"]. toString (); 49 exercise. _ user_id = Convert. toInt32 (set. tables [0]. rows [I] ["user_id"]. toString (); 50 exercise. _ add_time = Convert. toDateTime (set. tables [0]. rows [I] ["add_time"]. toString (); 51 exercise. _ row_number = Convert. toInt32 (set. tables [0]. rows [I] ["Row"]. toString (); 52 exerciseLists. add (exercise); 53} 54 if (exerciseLists. count> 0) 55 {56 Response. write ("{\" Count \ ":" + recordCount + ", \" Exercise_object \ ":" + jss. serialize (exerciseLists) + "}"); 57} 58 else 59 {60 Response. write ("{\" Count \ ": 0, \" Exercise_object \ ": null}"); 61} 62 Response. end (); 63} 64 else if (this. _ action = "1") 65 {66 string classID = Request ["classid"]; 67 string opSign = Request ["opsign"]; 68 int recordCount = GetYSPXCount (opSign, classID); 69 int pageCount = (int) Math. ceiling (double) recordCount)/(double) pageSize); 70 if (pageIndex> pageCount) 71 {72 pageIndex = pageCount; 73} 74 else if (pageIndex <1) 75 pageIndex = 1; 76 start = (pageIndex-1) * pageSize + 1; 77 end = pageIndex * pageSize; 78 79 IList <operationModel> operList = new List <operationModel> (); 80 operationModel model = null; 81 DataSet set = GetYSPXRecords (start. toString (), end. toString (), classID, opSign); 82 for (int I = 0; I <set. tables [0]. rows. count; I ++) 83 {84 model = new operationModel (); 85 model. OD_ID = int. parse (set. tables [0]. rows [I] ["od_id"]. toString (); 86 model. OD_TITLE = set. tables [0]. rows [I] ["od_title"]. toString (); 87 model. _ row_number = Convert. toInt32 (set. tables [0]. rows [I] ["Row"]. toString (); 88 operList. add (model); 89} 90 if (operList. count> 0) 91 {92 Response. write ("{\" Count \ ":" + recordCount + ", \" operationModel \ ":" + jss. serialize (operList) + "}"); 93} 94 else 95 {96 Response. write ("{\" Count \ ": 0, \" operationModel \ ": null}"); 97} 98 Response. end (); 99} 100} 101} 102 103 // <summary> 104 // obtain the total number of enabled records from the database: 105 /// </summary> 106 // <returns> </returns> 107 private int getAllCount () 108 {109 return bll. getRecordCount ("question_status = 1 "); 110} 111 112 113 // <summary> 114 // obtain data from the database 115 // </summary> 116 // <param name = "pageIndex"> start </param> 117 // <param name = "pageSize"> end </param> 118 // <returns> DataSet object </returns> 119 private DataSet GetDataFromDB (int pageIndex, int pageSize) 120 {121 DataSet set = bll. getListByPage ("", "", pageIndex, pageSize); 122 return set; 123}

Effect: