詳解MVC分頁之MvcPager的使用操作

2024-07-10 12:53:47

字體：大中小

來源：轉載

供稿：網友

不管用什么來開發程序，都需要對頁面進行分頁，目前，越來越多的人使用ASP.NET MVC開發Web應用程序，這將會出現相應的輔助和輔助方法和控制，以提高開發效率，今天錯新技術頻道將詳解MVC分頁之MvcPager的使用操作。

一.MvcPager異步
?ViewModel:?

 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; }  }

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); }

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>

@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>

二.MvcPager同步
??ViewModel（此處可不增加，直接和異步的共用同一個）:?

 public class MVCPager { //信息列表 public PagedList<Article> Articles { get; set; } }

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); }

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>

獲取測試數據方法（共用）：

 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; } }

效果圖：（需要引用CSS）