MVC分頁

時間 2019-11-06

標籤 mvc 分頁简体版

原文原文鏈接

MVC入門系列教程-視頻版本，已入駐51CTO學院，文本+視頻學效果更好哦。視頻連接地址以下：點我查看視頻。另外，針對該系列教程博主提供有償技術支持，羣號：226090960，羣內會針對該教程的問題進行及時解答，公用性問題統一講解。
學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、直接。

前言

前幾天在博客上掛了個羣連接，就是上面的連接，從博客上進羣很多網友，從上一段教程來看，mvc入門問題集中在瞭如下兩個部分「Contrl與View數據傳遞（多表數據）」和數據分頁。所以，今天晚上熬夜寫了個小Demo以幫助更多的初學者快速入門，因爲時間倉促，有不明白的地方請加羣諮詢，甭管會不會，有問必答。以爲有幫助別忘了點個贊哈html

1、Contrl與View數據傳遞（多表數據）

園子也是用mvc來寫的，咱們用園子的首頁舉個例子。學習

上圖我只切了園子首頁的一部分，如圖所示，共分爲4塊內容。而這4塊內容可能來自於不一樣的數據表，假設：第1、二塊內容來自Blog表、第3、四塊內容來自AD表。此時MVC通常有兩種方式進行Control與View的交互。spa

1)ViewBag變量方式code

使用4個ViewBag變量進行數據傳遞，Data一、Data二、Data三、Data4的數據直接從數據庫裏調。orm

Control中僞代碼以下所示：

1         public ActionResult CnBlogIndex()
2         {
3             ViewBag.Data1 = Data1;
4             ViewBag.Data2 = Data2;
5             ViewBag.Data3 = Data3;
6             ViewBag.Data4 = Data4;
7             return View();
8         }

View中僞代碼以下所示：

 1 //第一塊內容
 2 @foreach (Data1 data in (ViewBag.Data1 as IEnumerable<Data1>))
 3 {
 4     <tr>
 5         <td>@Html.DisplayFor(model => data.ID)</td>
 6     </tr>
 7 }
 8 //第二塊內容
 9 @foreach (Data2 dat1 in (ViewBag.Data2 as IEnumerable<Data2>))
10 {
11     <tr>
12         <td>@Html.DisplayFor(model => data.ID)</td>
13     </tr>
14 }
15 //第三塊內容
16 @foreach (Data3 data in (ViewBag.Data3 as IEnumerable<Data3>))
17 {
18     <tr>
19         <td>@Html.DisplayFor(model => data.ID)</td>
20     </tr>
21 }
22 //第四塊內容
23 @foreach (Data4 data in (ViewBag.Data4 as IEnumerable<Data4>))
24 {
25     <tr>
26         <td>@Html.DisplayFor(model => data.ID)</td>
27     </tr>
28 }

2)ViewModel方式(推薦)

什麼是ViewModel？ViewModel就是針對視圖作的Model，讓Model更加適合於View。Data一、Data二、Data三、Data4的數據直接從數據庫裏取出，而後組裝給ViewModel，ViewModel作爲整個頁面的數據載體進行數據傳遞：

ViewModel中的僞代碼以下所示：

1     public class CnBlogIndex {
2         List<Data> Data1 { get; set; }
3         List<Data> Data2 { get; set; }
4         List<Data> Data3 { get; set; }
5         List<Data> Data4 { get; set; }
6     }

Control中僞代碼以下所示：

         public ActionResult CnBlogIndex()
         {
             ViewModel.CnBlogIndex CnBlogIndex = new ViewModel.CnBlogIndex();
             CnBlogIndex.Data1 = Data1;
             CnBlogIndex.Data2 = Data2;
             CnBlogIndex.Data3 = Data3;
             CnBlogIndex.Data4 = Data4;
             return View(CnBlogIndex);
         }

View中僞代碼以下所示：

 1 @model CnBlogIndex
 2 @foreach (var info in Model.Data1)
 3     {
 4         <tr>
 5             <td>info.**</td>
 6         </tr>
 7     }
 8 @foreach (var info in Model.Data2)
 9     {
10         <tr>
11             <td>info.**</td>
12         </tr>
13     }
14 @foreach (var info in Model.Data3)
15     {
16         <tr>
17             <td>info.**</td>
18         </tr>
19     }
20 @foreach (var info in Model.Data4)
21     {
22         <tr>
23             <td>info.**</td>
24         </tr>
25     }

兩種傳遞數據的方式均可以完成咱們的正常工做，但我的更推薦使用ViewModel將一個頁面的信息進行聚合，這樣雖然多了一些工做量，但可使總體結構更清晰，同進也更易於維護。

2、分頁控件介紹

不少朋友在剛接觸mvc的時候都喜歡本身寫分頁，此處推薦使用開源分頁控件「MvcPager」，相信你們在使用webform的時候大多使用的分頁控件都是aspnetpager(Webdiyer出品)，這個mvc分頁控件也是Webdiyer出品（很好很強大），官方博客：http://www.webdiyer.com/，我在前面的教程中也提到過這個分頁控件，但羣友們反應我前面的教程分頁控件帶有查詢條件時，翻頁後條件消失。所以，在些我對分頁控件再次進行講解，並加上查詢條件。

效果以下圖所示：

查詢條件使用文本框，而且使用參數的形式在view與control中進行傳輸。這裏只是使用了mvcpager的一種方式(get查詢方式)，mvcpager有各類分頁的方式，如ajax分頁等。有興趣的能夠下載代碼研究下，官方地址以下：http://www.webdiyer.com/mvcpager/

ViewModel中的代碼以下：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using Webdiyer.WebControls.Mvc;
 6 
 7 namespace MvcApplication.Models.Home
 8 {
 9     public class Index
10     {
11         public string BlogURL { get; set; }
12         //當前用戶
13         public Model.User User { get; set; }
14         //信息列表
15         public PagedList<Model.Info> Infos { get; set; }
16     }
17 }

Control中的代碼以下：

 1         public ActionResult Index(int? id = 1, string title = null)
 2         {
 3             //用戶
 4             Model.User User = new Model.User();
 5             User.UserID = 1;
 6             User.UserName = "mvc技術交流(羣號：384185065)";
 7             //信息列表(此處使用分頁控件提出數據)
 8             int totalCount = 0;
 9             int pageIndex = id ?? 1;
10             int pageSize = 2;
11             PagedList<Model.Info> InfoPager = DAL.Info.GetInfos(title, pageSize, (pageIndex - 1) * 2, out totalCount).AsQueryable().ToPagedList(pageIndex, pageSize);
12             InfoPager.TotalItemCount = totalCount;
13             InfoPager.CurrentPageIndex = (int)(id ?? 1);
14             //數據組裝到viewModel
15             Models.Home.Index index = new Models.Home.Index();
16             index.BlogURL = "http://www.cnblogs.com/iamlilinfeng/archive/2013/04/01/2992432.html";
17             index.User = User;
18             index.Infos = InfoPager;
19             //------------------使用ViewBig變量傳遞數據---------------//
20             //ViewBag.PagerData = InfoPager;
21             return View(index);
22         }

View中的代碼以下：

 1 @model MvcApplication.Models.Home.Index
 2 @using Webdiyer.WebControls.Mvc;
 3 <title>MVC入門教程</title>
 4 
 5 @*----------------------------------ViewModel中的博客地址，mvc入門教程博客地址：http://www.cnblogs.com/iamlilinfeng/archive/2013/04/01/2992432.html-----------------------*@
 6 @Html.Label("博客地址：") @Model.BlogURL
 7 <br />
 8 @Html.Raw("--------------------------------------------------------------------------------------------------------------------------------------------------------------------")
 9 <br />
10 
11 @*----------------------------------ViewModel用戶實體信息-----------------------*@
12 @Html.LabelFor(model => model.User.UserID) @Html.Raw("：") @Model.User.UserID
13 <br />
14 @Html.LabelFor(model => model.User.UserName) @Html.Raw("：") @Model.User.UserName
15 <br />
16 
17 @*----------------------------------ViewModel數據信息分頁-----------------------*@
18 @Html.Raw("--------------------------------------------------------------------------------------------------------------------------------------------------------------------")
19 <br />
20 @using (Html.BeginForm("Index", "Home", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
21 {
22     @Html.Label("查詢條件(標題)：") <input name="title" value="@Request.QueryString["title"]" /><input type="submit" value="查詢" />
23 }
24 <table>
25     <tr>
26         <th>編號</th>
27         <th>標題</th>
28         <th>內容</th>
29     </tr>
30     @foreach (var info in Model.Infos)
31     {
32         <tr>
33             <td>@Html.DisplayFor(model => info.InfoID)</td>
34             <td>@Html.DisplayFor(model => info.Title)</td>
35             <td>@Html.DisplayFor(model => info.Content)</td>
36         </tr>
37     }
38     @*----------------------------------使用ViewBig變量傳遞數據-----------------------*@
39     @*@foreach (Model.Info info in (ViewBag.PagerData as IEnumerable<Model.Info>))
40         {
41             <tr>
42                 <td>@Html.DisplayFor(model => info.InfoID)</td>
43                 <td>@Html.DisplayFor(model => info.Title)</td>
44                 <td>@Html.DisplayFor(model => info.Content)</td>
45             </tr>
46         }*@
47 </table>
48 @Html.Pager(Model.Infos, new PagerOptions
49         {
50             PageIndexParameterName = "id",
51             ShowPageIndexBox = true,
52             FirstPageText = "首頁",
53             PrevPageText = "上一頁",
54             NextPageText = "下一頁",
55             LastPageText = "末頁",
56             PageIndexBoxType = PageIndexBoxType.TextBox,
57             PageIndexBoxWrapperFormatString = "請輸入頁數{0}",
58             GoButtonText = "轉到"
59         })
60 @Html.Raw("共：") @Model.Infos.TotalItemCount @Html.Raw("頁，")
61 @Model.Infos.CurrentPageIndex @Html.Raw("/") @Model.Infos.TotalPageCount @Html.Raw("頁")