大奖18dj18vip-大奖18dj18娱乐官网

助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!

大奖18dj18vip

查看: 170|回复: 0
打印 上一主题 下一主题

[Web开发] ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

[复制链接]
  • TA的每日心情
    奋斗
    2019-8-15 17:06
  • 签到天数: 77 天

    [LV.6]常住居民II

    超级VIP贵宾会员

    2022

    主题

    2102

    帖子

    6987

    积分

    Rank: 1

    UID
    21335
    威望
    -102
    贡献
    2397
    在线时间
    58 小时
    注册时间
    2018-12-6
    跳转到指定楼层
    楼主
    发表于 2019-7-19 15:43:18 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    推广者专属福利,新客户无门槛领取总价值高达2775元代金券,每种代金券限量500张,先到先得。

    ASP.NET MVC 分页使用的是作者杨涛的MvCPAger分页控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/

    这个分页控件在里面有很好的的案例,及注意事项

    分页在我们的项目中是经常需要使用到的,普通分页体验是在是太差了,每一次点击下一步,会造成页面刷新,自己都看不过去了 ,O(∩_∩)O哈哈~

    所以这次我们要使用这个控件在做一个MvcPager的异步分页,分页的时候我们只刷新表格,而不是刷新页面

    下面我们开始吧

    一.分页

    首先我们需要创建一个ASP.NET MVC的项目,具体怎么创建就不细说了

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

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

    当然你们也可以从NuGet包中引用

    找到项目,点击右键会有一个管理NuGet程序包,我们打开它


    输入Webdiyer找到,并安装

    实体类

    Article.cspublic class Article    {        [Display(Name = "文章编号")]        public int ID { get; set; }        [Display(Name = "文章标题")]        [MaxLength(200)]        public string Title { get; set; }        [Display(Name = "文章内容")]        public string Content { get; set; }        [Display(Name = "发布日期")]        public DateTime PubDate { get; set; }        [Display(Name = "作者")]        [MaxLength(20)]        public string Author { get; set; }        [Display(Name = "文章来源")]        [MaxLength(20)]        public string Source { get; set; }    }

    Cotroller


    public ActionResult AjaxPaging(int id = 1)        {            using (var db = new DataContext())            {                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
              //判断是否是AJAX请求,如果为true,就返回分部视图               
    if (Request.IsAjaxRequest())                    return PartialView("_ArticleTable", model);                return View(model);            }        }

    应该可以看到,我们引用了这个分页控件的时候,我们返回的不在是List<T>,而是PagedList<T>

    后面的ToPagedList(起始页,每页显示条数),起始页需要我们在本方法中定义int id=1

    View:

    @model PagedList<MVCPager_Text.Models.Article>@using Webdiyer.WebControls.Mvc;//这个ID就是我们在分页需要来更新的ID<div id="articles">    @Html.Partial("_ArticleTable", Model)</div>@section scripts{    @{Html.RegisterMvcPagerScriptResource();}
       //这句话是必须的,用来注册MVCPager,如果没有可能造成Ajax请求无反应}

    在视图中我们引用的集合同样也是PagedList<T>

    @section scripts{    @{Html.RegisterMvcPagerScriptResource();}
       //这句话是必须的,用来注册MVCPager,如果没有可能造成Ajax请求无反应}
    注意:我们的视图是默认使用布局页 layout
    我们不能使布局页为Null @{ layout=null} ,这样会使我们的异步分页无效,我们到控制器的Requset.isAjaxRequset()这一块会一直是false

    创建分部视图:


    创建完分布页,里面的使我们需要展示的表格

    _ArticleTable:@model PagedList<MVCPager_Text.Models.Article>@using Webdiyer.WebControls.Mvc;<table class="table table-bordered table-striped">    <tr>        <th class="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>    @{ int i = 0;}    @foreach (var item in Model)    {        <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><div class="text-center">    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))</div>

    其中需要注意的是:

    PageIndexParameterName是我们控制器中的参数id,需要保持一致

    我们需要使用的是@Ajax.Pager(),而不是@Html.PagerAjaxOptions(a => a.SetUpdateTargetId("articles")) 在官网的意思是用于构建MvcAjaxOptions对象的方法
    我们再来看一下MvcAjaxOptions对象

    UpdateTargetId:获取或设置要使用服务器响应来更新的 DOM 元素的 ID。这个参数ID就使我们在视图中div的Id

    上面我们用的是AjaxOptions(a => a.SetUpdateTargetId("articles"))这个写法,

    MvcAjaxOptions对象怎么使用呢@Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" },new MvcAjaxOptions {UpdateTargetId= "RecordList" })

    通过上面这些我们的异步分页就已经做完了


    二.复选框选中

    当我们点击上一页或者下一页的时候我们需要保持之前的复选框状态,
    并不会因为我们点击上一页或者下一页而改变状态

    复选框选中的前提就是我们需要异步刷新,只刷新表格,不刷新页面

    在这个分页控件上,有我们需要的对象
    MvcAjaxOptions对象
    来看一下这个对象中我们需要用到的属性,一共只有两个属性我们可以用到:

    OnBegin:获取或设置要在更新页面之前立即调用的 JavaScript 函数的名称。
    OnSuccess:获取或设置在成功更新页面之后要调用的 JavaScript 函数。

    Code奉上:
    分页中我们需要在MvcAjaxOptions中添加这两个属性,一个是在更新页面之前调用的js函数(OnBegin),一个是在更新页面之后调用的JS函数(OnSuccess)    @Ajax.Pager(Model, new PagerOptions {    PageIndexParameterName = "id",    NumericPagerItemCount = 5,    CssClass = "pagination",    CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",    DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",    PagerItemTemplate = "<li>{0}</li>", Id = "bootstrappager"},new MvcAjaxOptions { OnBegin= "GetCheckbox()",OnSuccess= "OnSuccess" } ).AjaxOptions(a => a.SetUpdateTargetId("RecordList").SetDataFormId("searchForm"))

    GetCheckbox()函数

    //定义一个数组来存储,选中的ID
    var select = new Array;

    function GetCheckbox() {
          //.single是复选框的class        $(
    ".single").each(function () {
            //判断复选框的状态,如果选中为true            
    if ($(this).prop(checked)) {
              //判断选中的复选框的val()值是否存在在该数组中select               
    var index = $.inArray($(this).val(), select);
              //不存在则会返回-1,不存在向数组中写入               
    if (index == -1) {                    select.push($(this).val())                }            }              else {
              //如果没有选中,有可能会取消选中,我们要判断当前的页面没有选中的$(this).val()值是否在数组中select               
    var index = $.inArray($(this).val(), select);
              //如果存在则会返回存在数值在数组中的下标               
    if (index >= 0) {                    //删除该下标的值                    select.splice(index);                }            }        })    }


    OnSuccess();

    function OnSuccess() {        $(".single").each(function () {        //当更新成功之后,我们需要判断当前页面的复选框的$(this).val()是否存在于数组中select            var index = $.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异步分页+在分页中复选框下一页上一页也保持


    楼主热帖排行榜
    大奖18dj18vip社区温馨提示:
    大奖18dj18vip(www.dastanona.com)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
    1、大奖18dj18vip有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),大奖18dj18vip有权不事先通知即删除涉嫌侵权的作品和内容
    2、大奖18dj18vip将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
    3、大奖18dj18vip影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若大奖18dj18vip收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
    4、大奖18dj18vip,删帖,投诉,举报,侵权,若大奖18dj18vip侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除
    soso大奖18dj18vip社区是聚合百度搜索,搜狗搜索,360搜索,新闻,教育,站长,广告,娱乐,影视,微信,网盘,营销,手机,汽车,游戏,论坛综合为一体的大型门户社区www.dastanona.com
    关闭

    大奖18dj18vip社区公告上一条 /1 下一条

    Powered by www.dastanona.com X3.4© 2013-2019 大奖18dj18vip社区 小黑屋|手机版|Archiver|地图|关于我们|腾讯云代金券|帮助中心|soso吧社区
    广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  大奖18dj18vip建站时间:创建于2013年07月23日
    免责声明:大奖18dj18vip所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,大奖18dj18vip不承担任何的法律责任,若有侵权请来信告知,我们立即删除!
    大奖18dj18vip热搜:大奖18dj18vip,搜搜,搜搜网,搜一下,搜吧,soso,sousou,快搜,soso搜搜,好搜,搜索,soso问问,搜搜问问,搜搜小说,搜搜图片,搜狗搜索,微信搜索,图片搜索,百度搜索,手机搜索,网盘搜索

    GMT+8, 2019-10-17 06:35 , Processed in 1.140625 second(s), 13 queries , Gzip On, MemCache On.

    快速回复 返回顶部 返回列表