其中需要注意的是:

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="{0}",DisabledPagerItemTemplate="{0}",PagerItemTemplate="

{0}

"},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="{0}",

DisabledPagerItemTemplate="{0}",

PagerItemTemplate="

{0}

",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”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

网页题目：ASP.NETMVC中如何使用MvcPager
转载来于：http://csdahua.cn/article/psohsi.html