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