asp.net Mvc4 使用ajax結(jié)合分頁插件實現(xiàn)無刷新分頁
本文為在mvc4中使用ajax實現(xiàn)無刷新分頁demo,記錄一下。
解決方案思想:頁面數(shù)據(jù)的初始加載和按頁加載都是通過ajax來進行,頁面分頁鏈接點擊后利用ajax技術(shù)發(fā)送當(dāng)前頁碼到后端控制器,后端控制器根據(jù)當(dāng)前頁碼和設(shè)置的pageSize從數(shù)據(jù)庫中取出對應(yīng)頁的數(shù)據(jù)。后端控制器處理完后利用PartialView方法把數(shù)據(jù)返回到分部視圖中,利用ViewBag來返回總記錄數(shù)和pageSize。ajax通過回調(diào)函數(shù)把控制器返回的分部視圖內(nèi)容加載到主視圖中顯示。
說明:分頁具體的分頁導(dǎo)航和樣式使用了kkpager插件。
1、主視圖(用于顯示數(shù)據(jù))代碼
<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("獲取數(shù)據(jù)失?。?); return false; } else { $("#result").html(data); //定義分頁樣式 var totalCount = parseInt('@ViewBag.TotalCount'); var pageSize = parseInt('@ViewBag.PageSize'); var pageNo = getParameter('pno');//該參數(shù)為插件自帶,不設(shè)置好,調(diào)用數(shù)據(jù)的時候當(dāng)前頁碼會一直顯示在第一頁 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);//插件自帶的方法,手動調(diào)用某一頁碼 searchPage(n); return false; } }); } }; //ajax參數(shù)設(shè)置 var Option = { url: ajaxUrl, type: ajaxType, dataType: ajaxDataType, cache: false, //設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。 async: true, //(默認: true),所有請求均為異步請求。發(fā)送同步請求,請將此選項設(shè)置為 false。同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執(zhí)行。 timeout: 3600, //設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。 error: function () { }, success: sucFun, beforeSend: function () { } }; $.ajax(Option); return false; } //ajax翻頁 function searchPage(n) { GetArticlesData(n); } </script>
2、分部視圖代碼
@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("編輯", "Edit", new { id=item.ID }) | @Html.ActionLink("查看詳細", "Details", new { id=item.ID }) | @Html.ActionLink("刪除", "Delete", new { id=item.ID }) </td> </tr> }
3、控制器獲取數(shù)據(jù)代碼
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 orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize); return PartialView("AjaxFenbuView", persons.ToList()); }
最后上個效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Asp.Net二級域名共享Forms身份驗證、下載站/圖片站的授權(quán)訪問控制
我們平時一般在做圖片或者文件下載權(quán)限控制的時候基本都是控制到下載頁面的,當(dāng)你的下載地址暴露后,瀏覽者就直接可以通過文件地址進行下載了,這時候也就出現(xiàn)了我們常說的盜鏈2012-02-02Visual Studio 2017 IDE安裝使用圖文教程
這篇文章主要為大家詳細介紹了Visual Studio 2017 IDE安裝使用圖文教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09asp.net mvc 實現(xiàn)文件上傳帶進度條的思路與方法
這篇文章主要給大家介紹了關(guān)于asp.net mvc 實現(xiàn)文件上傳帶進度條的思路與方法,文中給出了詳細的示例代碼,相信對大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們可以參考借鑒,下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12asp.net 數(shù)據(jù)庫備份還原(sqlserver+access)
Asp.net 備份、還原Ms SQLServer及壓縮Access數(shù)據(jù)庫2008-11-11