網頁

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,也是同樣的處理方式。

 

以上

沒有留言:

張貼留言