ASP.NETMVC中如何使用MvcPager

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

創(chuàng)新互聯(lián)專注于靜海網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供靜海營(yíng)銷型網(wǎng)站建設(shè)，靜海網(wǎng)站制作、靜海網(wǎng)頁(yè)設(shè)計(jì)、靜海網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造靜海網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供靜海網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

一.分頁(yè)

首先我們需要?jiǎng)?chuàng)建一個(gè)ASP.NETMVC的項(xiàng)目,具體怎么創(chuàng)建就不細(xì)說(shuō)了

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

我是在官網(wǎng)下的案例,直接引用的,

當(dāng)然你們也可以從NuGet包中引用

找到項(xiàng)目,點(diǎn)擊右鍵會(huì)有一個(gè)管理NuGet程序包,我們打開(kāi)它

輸入Webdiyer找到,并安裝

實(shí)體類

Article.cs

publicclassArticle

{

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

publicintID{get;set;}

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

[MaxLength(200)]

publicstringTitle{get;set;}

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

publicstringContent{get;set;}

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

publicDateTimePubDate{get;set;}

[Display(Name="作者")]

[MaxLength(20)]

publicstringAuthor{get;set;}

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

[MaxLength(20)]

publicstringSource{get;set;}

}

Cotroller

publicActionResultAjaxPaging(intid=1)

{

using(vardb=newDataContext())

{

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

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

if(Request.IsAjaxRequest())

returnPartialView("_ArticleTable",model);

returnView(model);

}

應(yīng)該可以看到,我們引用了這個(gè)分頁(yè)控件的時(shí)候,我們返回的不在是List,而是PagedList

后面的ToPagedList(起始頁(yè),每頁(yè)顯示條數(shù)),起始頁(yè)需要我們?cè)诒痉椒ㄖ卸xintid=1

View:

@modelPagedList

@usingWebdiyer.WebControls.Mvc;

//這個(gè)ID就是我們?cè)诜猪?yè)需要來(lái)更新的ID

@Html.Partial("_ArticleTable",Model)

@sectionscripts

{

@{Html.RegisterMvcPagerScriptResource();}

//這句話是必須的,用來(lái)注冊(cè)MVCPager,如果沒(méi)有可能造成Ajax請(qǐng)求無(wú)反應(yīng)

}

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

@sectionscripts

{

@{Html.RegisterMvcPagerScriptResource();}

//這句話是必須的,用來(lái)注冊(cè)MVCPager,如果沒(méi)有可能造成Ajax請(qǐng)求無(wú)反應(yīng)

}

注意:我們的視圖是默認(rèn)使用布局頁(yè)layout

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

創(chuàng)建分部視圖:

創(chuàng)建完分布頁(yè),里面的使我們需要展示的表格

_ArticleTable:

@modelPagedList

@usingWebdiyer.WebControls.Mvc;

序號(hào)

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

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

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

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

@{inti=0;}

@foreach(variteminModel)

{

@(Model.StartItemIndex+i++)

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

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

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

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

}

@Ajax.Pager(Model,newPagerOptions{PageIndexParameterName="id",ContainerTagName="ul",CssClass="pagination",CurrentPagerItemTemplate="{0}",DisabledPagerItemTemplate="{0}",PagerItemTemplate="

{0}

"}).AjaxOptions(a=>a.SetUpdateTargetId("articles"))

其中需要注意的是:

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

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

AjaxOptions(a=>a.SetUpdateTargetId("articles"))在官網(wǎng)的意思是用于構(gòu)建MvcAjaxOptions對(duì)象的方法

我們?cè)賮?lái)看一下

MvcAjaxOptions對(duì)象

UpdateTargetId:獲取或設(shè)置要使用

如果$(this).val()的值與數(shù)組中下標(biāo)的值相同,則給它處于選中狀態(tài)

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

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