zoukankan      html  css  js  c++  java
  • MVC分页之MVCPager

    一、MVCPager异步

    model

        public class Article
        {
            [Display(Name = "信息编号")]
            public int ID { get; set; } 
    
            [Display(Name = "信息标题")]
            public string Title { get; set; }
    
            [Display(Name = "信息内容")]
            public string Content { get; set; }
        }
    
    public class AjaxPager
        {
            public PagedList<Article> Articles { get; set; } 
        }
    Model Code

    control

    /// <summary>
            /// 异步分页测试
            /// </summary>
            /// <param name="id">pageIndex</param>
            /// <param name="key">关键字</param>
            /// <returns></returns>
            public ActionResult AjaxPaging(int? id = 1, string key = null)
            {
                int totalCount = 0;
                int pageIndex = id ?? 1;
                int pageSize = 2;
                List<Article> infoList = new SoleFuDAL.MyTest().GetArticleList(key, pageSize, (pageIndex - 1) * 2, out totalCount);
                PagedList<Article> InfoPager = infoList.AsQueryable().OrderByDescending(o => o.ID).ToPagedList(pageIndex, pageSize);
                InfoPager.TotalItemCount = totalCount;
                InfoPager.CurrentPageIndex = (int)(id ?? 1);
    
                Models.MyTest.AjaxPager model = new Models.MyTest.AjaxPager();
                model.Articles = InfoPager;
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_ArticleList", model);
                }
                return View(model);
            }
    control Code

    view

    @model soulefu_manage.Models.MyTest.AjaxPager
    @using Webdiyer.WebControls.Mvc;
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>MVCPager-AjaxPaging</title>
        <link href="~/Content/pagerstyles.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <div style="padding: 15px;">
            @using (Html.BeginForm("AjaxPaging", "MyTest", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
            {
                @Html.Label("关键字:") <input name="key" value="@Request.QueryString["key"]" /><input type="submit" value="查询" />
            }
    
            @*分页Table*@
            @{ Html.RenderPartial("_ArticleTable"); }
    
            <div class="text-center">
                @Ajax.Pager(Model.Articles, new PagerOptions
                {
                    PageIndexParameterName = "id",
                    FirstPageText = "首页",
                    PrevPageText = "上一页",
                    NextPageText = "下一页",
                    LastPageText = "末页",
                    NumericPagerItemCount = 5,
                    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>
        </div>
    </body>
    </html>
    View Code
    复制代码
    @model soulefu_manage.Models.MyTest.AjaxPager
    
    <table class="table table-bordered table-striped">
        <tr>
            <th class="nowrap">序号</th>
            <th>
                标题
            </th>
            <th>
                内容
            </th>
        </tr>
        @foreach (var item in Model.Articles)
        {
            <tr>
                <td>@Html.DisplayFor(model => item.ID)</td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Content)
                </td>
            </tr>
        }
    </table>
    部分视图View Code

    二、MVCPager同步

    model同上

    control

     /// <summary>
            /// 同步分页测试
            /// </summary>
            /// <param name="id">pageIndex</param>
            /// <param name="key">关键字</param>
            /// <returns></returns>
            public ActionResult MVCPager(int? id = 1, string key = null) 
            {
                int totalCount = 0;
                int pageIndex = id ?? 1;
                int pageSize = 2;
                List<Article> infoList = new SoleFuDAL.MyTest().GetArticleList(key, pageSize, (pageIndex - 1) * 2, out totalCount);
                PagedList<Article> InfoPager = infoList.AsQueryable().OrderByDescending(o => o.ID).ToPagedList(pageIndex, pageSize);
                InfoPager.TotalItemCount = totalCount;
                InfoPager.CurrentPageIndex = (int)(id ?? 1);
    
                //数据组装到viewModel
                Models.MyTest.MVCPager model = new Models.MyTest.MVCPager();
                model.Articles = InfoPager;
                return View(model);
            }
    control Code

    view

    @model soulefu_manage.Models.MyTest.MVCPager
    @using Webdiyer.WebControls.Mvc;
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>MVCPager</title>
        <link href="~/Content/pagerstyles.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <div style="padding:15px;">
            @using (Html.BeginForm("MVCPager", "MyTest", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
            {
                @Html.Label("关键字:")<input name="key" value="@Request.QueryString["key"]" /><input type="submit" value="查询" />
            }
    
            <table class="table table-bordered table-striped">
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                @foreach (var info in Model.Articles)
                {
                    <tr>
                        <td>@Html.DisplayFor(model => info.ID)</td>
                        <td>@Html.DisplayFor(model => info.Title)</td>
                        <td>@Html.DisplayFor(model => info.Content)</td>
                    </tr>
                }
            </table>
    
            <div class="text-center">
                <nav>
                    @Html.Pager(Model.Articles, new PagerOptions
                    {
                        PageIndexParameterName = "id",
                        FirstPageText = "首页",
                        PrevPageText = "上一页",
                        NextPageText = "下一页",
                        LastPageText = "末页",
                        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>",
                        Id = "bootstrappager"
                    })
                </nav>
            </div>
        </div>
    </body>
    </html>
    View Code

    获取测试数据方法

     public class MyTest
        {
            /// <summary>
            /// 获取测试数据
            /// </summary>
            /// <param name="key"></param>
            /// <param name="PageSize"></param>
            /// <param name="CurrentCount"></param>
            /// <param name="TotalCount"></param>
            /// <returns></returns>
            public List<Article> GetArticleList(string key, int PageSize, int CurrentCount, out int TotalCount)
            {
                string tabName = string.Format("Article");
                string strWhere = " 1=1";
                if (!string.IsNullOrEmpty(key))
                {
                    //SQL关键字过滤 包含关键字则不拼接SQL
                    if (!SqlInjection.GetString(key))
                    {
                        strWhere += string.Format(" AND (Title LIKE '%{0}%' OR Content LIKE '%{0}%')", key);
                    }
                }
                string Order = string.Format("ID ASC");
                DataSet ds = SqlHelper.GetList(SqlHelper.connStr, Order, PageSize, CurrentCount, tabName, strWhere, out TotalCount);
                List<Article> list = new List<Article>();
                if (ds != null && ds.Tables.Count > 0)
                {
                    foreach (DataRow dr in ds.Tables[0].Rows)
                    {
                        Article model = new Article();
                        model.ID = Convert.ToInt32(dr["ID"]);
                        model.Title = dr["Title"].ToString();
                        model.Content = dr["Content"].ToString();
                        list.Add(model);
                    }
                }
                return list;
            }
        }
    View Code
  • 相关阅读:
    代码混淆那些事
    Windows10环境下 Nginx+ffmpeg自搭服务器制作RTMP直播流
    在Windows下搭建基于nginx的视频直播和点播系统
    windows下搭建基于nginx的rtmp服务器
    ijkplayer相关
    直播技术总结(三)ijkplayer的一些问题优化记录
    【.NET深呼吸】应用上下文(AppContext)
    【Win 10应用开发】自定义浮动层——Flyout
    【Win 10应用开发】AdaptiveTrigger在自定义控件中是可以触发的
    【.NET深呼吸】元组数据(Tuple)
  • 原文地址:https://www.cnblogs.com/lang2017/p/6848746.html
Copyright © 2011-2022 走看看