ASP. MVC4 using Ajax in conjunction with paging plug-in for no-refresh paging

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

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.