2013年5月11日 星期六

ASP.NET MVC 使用 MvcPaging 在 View 出現錯誤?!

在 MSDN 論壇裡有一則提問是有關在 ASP.NET MVC 裡透過 Nuget 加入 MvcPaging 後,卻在 View 頁面裡出現錯誤,出現的錯誤是說在 View 裡面使用 IPagedList 以及 Html.Pager 都會出現紅字,而提問內容點到了我這小部落格,所以我必須勇敢地出來面對問題……(人不是我殺的呀!

我在「資料分頁」的系列文章裡面有在第一篇文章「ASP.NET MVC - 資料分頁(1) 使用MvcPaging」裡做了比較完整的加入 MvcPaging 說明,其餘文章都是在這第一篇文章的基礎之上做變化,而該篇文章發佈當時雖然 ASP.NET MVC 3 已經 Release 一段時間了,不過文章內的 View 還是使用 WebForm ViewEngine,有可能就這樣讓很多朋友疏忽了這個部分,那麼就用這篇文章來做個交代吧。

 


在 Visual Studio 裡使用 Nuget 將 MvcPaging 加入到專案

image

image

加入後也請確認根目錄以及 ~/Views 目錄下的 Web.Config 是否在 system.web 下的 pages 區段加入 MvcPaging 的 namespace,

根目錄下的 Web.Config

image

~/Views 目錄下的 Web.Config

image

以上 Web.Config 加入 MvcPaging Namespace 是使用 Nuget 安裝後所自動添加的,如果 Web.Config 沒有加入的話,請手動添加。

 

Controller 裡使用取出分頁資料

新建立一個 Controller 以及 Action 方法,這個方法裡使用 ToPagedList() 取得分頁資料,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;
using MvcPaging;
 
namespace MvcApplication2.Controllers
{
    public class CustomerController : Controller
    {
        private NorthwindEntities db = new NorthwindEntities();
        private const int DefaultPageSize = 10;
 
        public ActionResult Index(int page = 1)
        {
            int currentPageIndex = page < 0 ? 0 : page - 1;
 
            var query = this.db.Customers.OrderBy(x => x.CustomerID);
 
            return View(query.ToPagedList(currentPageIndex, DefaultPageSize, query.Count()));
        }
 
    }
}

 

建立 View 並加入分頁方法

我這邊是在 Controller 的 Action 上使用加入檢視,指定模型類別以及使用「List」Scaffold 樣板,

SNAGHTML7619497

建立好 Index.cshtml 之後,因為是做分頁顯示,所以把最上面的 model 使用 IEnumerable<T> 修改為使用 IPagedList<T>,

修改前(上)修改後(下)

image

image

再來在頁面找個適當位置放上 Html.Pager,

image

<div class="pager">
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount).Options(o => o.AlwaysAddFirstPageNumber())
    Displaying @Model.ItemStart - @Model.ItemEnd of @Model.TotalItemCount item(s)  
</div>

Index.cshtml 修改 Model 以及放置 Html.Pager() 之後就可以執行網站來看結果,

image

 

增加分頁樣式

MvcPaging 加入到專案後並不會有任何樣式也添加到專案裡,這是讓我們可以自己去設定分頁的樣式,如果你跟我一樣對樣式的設定是相當苦守的人,也可以使用以下的樣式內容,放到 ~/Content/Site.css 裡面就可以,

/* Pager */
.pager
{
    margin: 8px 3px;
    padding: 3px;
}
 
    .pager .disabled
    {
        border: 1px solid #ddd;
        color: #999;
        margin-top: 4px;
        padding: 3px;
        text-align: center;
    }
 
    .pager .current
    {
        background-color: #6ea9bf;
        border: 1px solid #6e99aa;
        color: #fff;
        font-weight: bold;
        margin-top: 4px;
        padding: 3px 5px;
        text-align: center;
    }
 
    .pager span, .pager a
    {
        margin: 4px 3px;
    }
 
    .pager a
    {
        border: 1px solid #aaa;
        padding: 3px 5px;
        text-align: center;
        text-decoration: none;
    }

將上面的樣式設定增加到 Site.css 之後,重新整理頁面,就可以看到分頁樣式不再是那麼陽春了,

image

 

Web.Config 未加入 MvcPaging Namespace

在文章的前面也有提到透過 Nuget 安裝 Mvcpaging 到專案裡,預設的狀況就已經會自動把 MvcPaging namesoace 添加到 Web.Config 裡,而 Web.Config 沒有加入 MvcPaging namespace 的話,執行頁面就會出錯,

image

而 Index.cshtml 裡面的 IPagedList 沒有顯示正常的樣式,Html.Pager() 也不會有 intellisense,

image

可以在 View 的最上方加入 @using MvcPaging,

image

重新整理頁面後就不會出現錯誤而可以正常顯示

image

不過還是會建議在 Web.Config 裡去加入 MvcPaging 的命名空間,就不需要在有使用到分頁功能的 View 裡去手動增加「@using Mvcpaging」。

 

雖然這裡的操作示範是在 Visual Studio 2012 以及 ASP.NET MVC 4(Razor),但如果是在 Visual Studio 2010 裡開發 ASP.NET MVC 3 或 ASP.NET MVC 4,也是同樣的處理方式。

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言