MVC分頁
學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、直接。
前言
前幾天在部落格上掛了個群連結，就是上面的連結，從部落格上進群不少網友，從上一段教程來看，mvc入門問題集中在了以下兩個部分“Contrl與View資料傳遞（多表資料）”和資料分頁。因此，今天晚上熬夜寫了個小Demo以幫助更多的初學者快速入門，由於時間倉促，有不明白的地方請加群諮詢，甭管會不會，有問必答。覺得有幫助別忘了點個贊哈
目錄
一、Contrl與View資料傳遞（多表資料）
二、分頁控制元件介紹
三、MVC原始碼說明
四、原始碼下載
五、mvc入門教程目錄
一、Contrl與View資料傳遞（多表資料）
園子也是用mvc來寫的，我們用園子的首頁舉個例子。
上圖我只切了園子首頁的一部分，如圖所示，共分為4塊內容。而這4塊內容可能來自於不同的資料表，假設：第一、二塊內容來自Blog表、第三、四塊內容來自AD表。此時MVC一般有兩種方式進行Control與View的互動。
1)ViewBag變數方式
使用4個ViewBag變數進行資料傳遞，Data1、Data2、Data3、Data4的資料直接從資料庫裡調。
Control中虛擬碼如下所示：
1public 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。Data1、Data2、Data3、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將一個頁面的資訊進行聚合，這樣雖然多了一些工作量，但可以使整體結構更清晰，同進也更易於維護。
二、分頁控制元件介紹
很多朋友在剛接觸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("頁")
三、MVC原始碼說明
開發環境：vs2013，mvc4。解決方案共分為3個專案。MvcApplication為mvc展示層，Model為資料實體與資料庫一一對應，DAL連結資料進行資料的存取。
1，MvcApplication--Models--Index，為針對View中的Index的ViewModel，用於組裝Index所需要的所有資料
2，Model--Info，為資訊實體，對應資訊表。用於講解分頁資料
3，DAL--Sqlcommon，呼叫分頁儲存過程的類。
View中展示的資料是由：User、List<Info>共同來提供的，有了這個示例後，再多的資料都可以通過該方式進行組裝。