ASP.NET MVC中如何使用MvcPager

這篇“ASP.NET MVC中如何使用MvcPager”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ASP.NET MVC中如何使用MvcPager”文章吧。

　　一.分頁

　　首先我們需要創建一個ASP.NETMVC的項目,具體怎么創建就不細說了

　　之后我們需要引入控件的dll文件

　　我是在官網下的案例,直接引用的,

　　當然你們也可以從NuGet包中引用

　　找到項目,點擊右鍵會有一個管理NuGet程序包,我們打開它

　　輸入Webdiyer找到,并安裝

　　實體類

　　Article.cs

　　publicclassArticle

　　{

　　[Display(Name="文章編號")]

　　publicintID{get;set;}

　　[Display(Name="文章標題")]

　　[MaxLength(200)]

　　publicstringTitle{get;set;}

　　[Display(Name="文章內容")]

　　publicstringContent{get;set;}

　　[Display(Name="發布日期")]

　　publicDateTimePubDate{get;set;}

　　[Display(Name="作者")]

　　[MaxLength(20)]

　　publicstringAuthor{get;set;}

　　[Display(Name="文章來源")]

　　[MaxLength(20)]

　　publicstringSource{get;set;}

　　}

　　Cotroller

　　publicActionResultAjaxPaging(intid=1)

　　{

　　using(vardb=newDataContext())

　　{

　　varmodel=db.Articles.OrderByDescending(a=>a.PubDate).ToPagedList(id,5);

　　//判斷是否是AJAX請求,如果為true,就返回分部視圖

　　if(Request.IsAjaxRequest())

　　returnPartialView("_ArticleTable",model);

　　returnView(model);

　　}

　　}

　　應該可以看到,我們引用了這個分頁控件的時候,我們返回的不在是List<T>,而是PagedList<T>

　　后面的ToPagedList(起始頁,每頁顯示條數),起始頁需要我們在本方法中定義intid=1

　　View:

　　@modelPagedList<MVCPager_Text.Models.Article>

　　@usingWebdiyer.WebControls.Mvc;

　　//這個ID就是我們在分頁需要來更新的ID

　　<divid="articles">

　　@Html.Partial("_ArticleTable",Model)

　　</div>

　　@sectionscripts

　　{

　　@{Html.RegisterMvcPagerScriptResource();}

　　//這句話是必須的,用來注冊MVCPager,如果沒有可能造成Ajax請求無反應

　　}

　　在視圖中我們引用的集合同樣也是PagedList<T>

　　@sectionscripts

　　{

　　@{Html.RegisterMvcPagerScriptResource();}

　　//這句話是必須的,用來注冊MVCPager,如果沒有可能造成Ajax請求無反應

　　}

　　注意:我們的視圖是默認使用布局頁layout

　　我們不能使布局頁為Null@{layout=null},這樣會使我們的異步分頁無效,我們到控制器的Requset.isAjaxRequset()這一塊會一直是false

　　創建分部視圖:

　　創建完分布頁,里面的使我們需要展示的表格

　　_ArticleTable:

　　@modelPagedList<MVCPager_Text.Models.Article>

　　@usingWebdiyer.WebControls.Mvc;

　　<tableclass="tabletable-borderedtable-striped">

　　<tr>

　　<thclass="nowrap">序號</th>

　　<th>

　　@Html.DisplayNameFor(model=>model.Title)

　　</th>

　　<th>

　　@Html.DisplayNameFor(model=>model.PubDate)

　　</th>

　　<th>

　　@Html.DisplayNameFor(model=>model.Author)

　　</th>

　　<th>

　　@Html.DisplayNameFor(model=>model.Source)

　　</th>

　　</tr>

　　@{inti=0;}

　　@foreach(variteminModel)

　　{

　　<tr>

　　<td>@(Model.StartItemIndex+i++)</td>

　　<td>

　　@Html.DisplayFor(modelItem=>item.Title)

　　</td>

　　<td>

　　@Html.DisplayFor(modelItem=>item.PubDate)

　　</td>

　　<td>

　　@Html.DisplayFor(modelItem=>item.Author)

　　</td>

　　<td>

　　@Html.DisplayFor(modelItem=>item.Source)

　　</td>

　　</tr>

　　}

　　</table>

　　<divclass="text-center">

　　@Ajax.Pager(Model,newPagerOptions{PageIndexParameterName="id",ContainerTagName="ul",CssClass="pagination",CurrentPagerItemTemplate="<liclass=\"active\"><ahref=\"#\">{0}</a></li>",DisabledPagerItemTemplate="<liclass=\"disabled\"><a>{0}</a></li>",PagerItemTemplate="<li>{0}</li>"}).AjaxOptions(a=>a.SetUpdateTargetId("articles"))

　　</div>

　　其中需要注意的是:

　　PageIndexParameterName是我們控制器中的參數id,需要保持一致

　　我們需要使用的是@Ajax.Pager(),而不是@Html.Pager

　　AjaxOptions(a=>a.SetUpdateTargetId("articles"))在官網的意思是用于構建MvcAjaxOptions對象的方法

　　我們再來看一下

　　MvcAjaxOptions對象

　　UpdateTargetId:獲取或設置要使用服務器響應來更新的DOM元素的ID。這個參數ID就使我們在視圖中div的Id

　　上面我們用的是AjaxOptions(a=>a.SetUpdateTargetId("articles"))這個寫法,

　　MvcAjaxOptions對象怎么使用呢

　　@Ajax.Pager(Model,newPagerOptions{PageIndexParameterName="id",ContainerTagName="ul",CssClass="pagination",CurrentPagerItemTemplate="<liclass=\"active\"><ahref=\"#\">{0}</a></li>",DisabledPagerItemTemplate="<liclass=\"disabled\"><a>{0}</a></li>",PagerItemTemplate="<li>{0}</li>"},newMvcAjaxOptions{UpdateTargetId="RecordList"})

　　通過上面這些我們的異步分頁就已經做完了

　　二.復選框選中

　　當我們點擊上一頁或者下一頁的時候我們需要保持之前的復選框狀態,

　　并不會因為我們點擊上一頁或者下一頁而改變狀態

　　復選框選中的前提就是我們需要異步刷新,只刷新表格,不刷新頁面

　　在這個分頁控件上,有我們需要的對象

　　MvcAjaxOptions對象

　　來看一下這個對象中我們需要用到的屬性,一共只有兩個屬性我們可以用到:

　　OnBegin:獲取或設置要在更新頁面之前立即調用的JavaScript函數的名稱。

　　OnSuccess:獲取或設置在成功更新頁面之后要調用的JavaScript函數。

　　Code奉上:

　　分頁中我們需要在MvcAjaxOptions中添加這兩個屬性,一個是在更新頁面之前調用的js函數(OnBegin),一個是在更新頁面之后調用的JS函數(OnSuccess)

　　@Ajax.Pager(Model,newPagerOptions{

　　PageIndexParameterName="id",

　　NumericPagerItemCount=5,

　　CssClass="pagination",

　　CurrentPagerItemTemplate="<liclass=\"active\"><ahref=\"#\">{0}</a></li>",

　　DisabledPagerItemTemplate="<liclass=\"disabled\"><a>{0}</a></li>",

　　PagerItemTemplate="<li>{0}</li>",Id="bootstrappager"

　　},newMvcAjaxOptions{OnBegin="GetCheckbox()",OnSuccess="OnSuccess"}).AjaxOptions(a=>a.SetUpdateTargetId("RecordList").SetDataFormId("searchForm"))

　　GetCheckbox()函數

　　//定義一個數組來存儲,選中的ID

　　varselect=newArray;

　　functionGetCheckbox(){

　　//.single是復選框的class

　　$(".single").each(function(){

　　//判斷復選框的狀態,如果選中為true

　　if($(this).prop('checked')){

　　//判斷選中的復選框的val()值是否存在在該數組中select

　　varindex=$.inArray($(this).val(),select);

　　//不存在則會返回-1,不存在向數組中寫入

　　if(index==-1){

　　select.push($(this).val())

　　}

　　}

　　else{

　　//如果沒有選中,有可能會取消選中,我們要判斷當前的頁面沒有選中的$(this).val()值是否在數組中select

　　varindex=$.inArray($(this).val(),select);

　　//如果存在則會返回存在數值在數組中的下標

　　if(index>=0){

　　//刪除該下標的值

　　select.splice(index);

　　}

　　}

　　})

　　}

　　OnSuccess();

　　functionOnSuccess(){

　　$(".single").each(function(){

　　//當更新成功之后,我們需要判斷當前頁面的復選框的$(this).val()是否存在于數組中select

　　varindex=$.inArray($(this).val(),select)

　　//存在則返回下標

　　if(index>=0){

　　//console.log("index="+index+",select[Index]="+select[index])

　　如果$(this).val()的值與數組中下標的值相同,則給它處于選中狀態

　　if($(this).val()==select[index]){

　　$(this).prop('checked','checked');

　　}

　　}

　　})

　　}

　　這樣就可以實現復選的選中,

　　不過需要注意的是:

　　當我第一次加載進入頁面的時候,就算你選中幾個復選框,數組中也是沒有數據的

　　因為只有你點擊下一頁或者是上一頁的時候才會觸發函數,

　　所以我們也需要在不點擊的時候進行當前頁的一個復選框的選中判定

　　當我進入這個頁面,選中復選框之后,就點擊按鈕的時候也需要進行選中

以上就是關于“ASP.NET MVC中如何使用MvcPager”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。