ASP. NET-no-refresh paging via Ajax

This article mainly introduces the use of Ajax Mvc4 with the page plug-in implementation of non-refresh paging, Ajax through the callback function to the controller to return the partial view of the contents of the display, interested can be understood.

This article is to use Ajax in Mvc4 to implement the No-refresh paging demo, record.

Solution idea: The initial load of page data and page loading are all done through AJAX, page paging link after click to use AJAX technology to send the current page number to the back-end controller, the back-end controller based on the current page number and set of pagesize from the database to remove the corresponding page data. After the backend controller finishes processing, the data is returned to the partial view using the Partialview method, and the viewbag is used to return the total number of records and pagesize. Ajax uses a callback function to load the contents of the partial view returned by the controller into the main display.

Description: page-specific paging navigation and styling using the Kkpager plugin.

1. Main view (for displaying data) code

<script src= "~/content/kkpager.js" ></script><table id= "result" class= "posts block" ></table > <nav id= "Kkpager" class= "posts block pagination" ></nav><script type= "Text/javascript" > $ (   function () {getarticlesdata (1);   });    function GetParameter (name) {var reg = new RegExp ("(^|&)" + name + "= ([^&]*] (&|$)");    var r = window.location.search.substr (1). Match (REG); if (r! = null) return unescape (r[2]);  return null;    } function Getarticlesdata (pageIndex) {var ajaxurl = '/testdatadb/ajaxpaging?pageindex= ' + pageIndex;     var ajaxtype = ' post ';     var ajaxdatatype = ' text '; var sucfun = function (data, status) {if (data = = NULL && status! = "Success") {alert ("Get Data failed!         ");       return false;        } else {$ ("#result"). HTML (data);        Define the paging style var totalcount = parseint (' @ViewBag. TotalCount ');    var pageSize = parseint (' @ViewBag. pageSize ');     var pageno = getparameter (' pno ');//This parameter is the plug-in, not set, the current page number will always be displayed on the first page if the data is called if (!pageno) {pageno = 1; } var totalpages = totalcount% PageSize = = 0?         Totalcount/pagesize: (parseint (totalcount/pagesize) + 1); Kkpager.generpagehtml ({Pno:pageno, total:totalpages, Totalrecords:totalcount, mode            : ' Click ', Click:function (n) {this.selectpage (n);//The plugin comes with a method to manually invoke a page number searchpage (n);          return false;      }        });      }     }; Ajax parameter Set var Option = {Url:ajaxurl, type:ajaxtype, Datatype:ajaxda             Tatype, Cache:false,//set to False will not load the request information from the browser cache. Async:true,//(default: TRUE), all requests are asynchronous requests. Set this option to False if you are sending a synchronization request.             The synchronization request locks the browser, and the user's other actions must wait for the request to complete before it can be executed. timeout:3600,//Set request time-out (in milliseconds).             This setting overrides the global settings. Error:function () {}, Success:sucfun, Beforesend:function (){ }           };     $.ajax (Option);   return false;   }//ajax Paging function Searchpage (n) {getarticlesdata (n); } </script>

2. Partial View Code

@model ienumerable<test13.models.testdatadb>@{  viewbag.title = "Ajaxfenbuview";}  <tr>    <th>      @Html. displaynamefor (model = model. Uid)    </th>    <th>      @Html. displaynamefor (model = model. Uname)    </th>    <th>      @Html. displaynamefor (model = model. UPWD)    </th>    <th>      @Html. displaynamefor (model = model. Udata)    </th>    <th></th>  </tr> @foreach (Test13.Models.TestDataDB item in Model) {    <tr>      <td> @item. Uid</td>      <td> @item. Uname</td>      <td> @item. Upwd</td>      <td> @item. udata</td>      <td>        @Html. ActionLink ("editor", "edit", new {id=item.id}) |        @Html. ActionLink ("View Details", "details", new {id=item.id}) |        @Html. ActionLink ("Remove", "delete", new {id=item.id})      </td>    </tr>}

3, the controller obtains the data code

Private readonly int pageSize =1;    Public ActionResult Ajaxfenye ()    {      viewbag.pagesize = PageSize;      Viewbag.totalcount = db. Testdatadbs.count ();      return View ();    }    Public ActionResult ajaxpaging (int pageIndex = 1)    {      var persons = (from P in db). Testdatadbs p.id Descending select p). Skip ((pageIndex-1) * pageSize). Take (pageSize);      Return Partialview ("Ajaxfenbuview", persons. ToList ());    }

Last prev:

"Recommended"

1.ASP Free Video Tutorial

2.ASP Tutorials

3. Eon the ASP Basic video tutorial