15二月/111

如何使用 ASP.Net MVC3 WebGrid

前言

ASP.Net MVC 雖然沒有很多控制項可以使用，但是它的 Helper 也是很實用的，到了 MVC3 有了更多更好用的 Helper ，其中一個就是 WebGrid，它可以很方便的將資料呈現出來，也有分頁的功能，本文就來簡單的介紹如何使用。

實作範例

首先當然是建立一個 MVC3 的專案，這部份就不再陳述了。之後建立一個類別來做為要使用的 Model ，此部份當然也可以使用 LINQ 所產生的類別囉！再這邊我建立一個 Account 類別。

public class Account
{
    public string ID { get; set; }
    public string Name { get; set; }
}

public class Account

{

public string ID { get; set; }

public string Name { get; set; }

}

接下來是 Controller 的部份，建立一個測試資料集當做 Model 傳給 View 來使用。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "ASP.NET MVC WebGrid!";

        IEnumerable<Account> AccountDatas = new List<Account> {
            new Account() { ID = "A001", Name = "素還真"},
            new Account() { ID = "A002", Name = "葉小釵"},
            new Account() { ID = "A003", Name = "劍子仙跡"},
            new Account() { ID = "A004", Name = "佛劍分說"},
            new Account() { ID = "A005", Name = "劍之初"},
            new Account() { ID = "A006", Name = "羅喉"}
        };

        return View(AccountDatas);
    }
}

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "ASP.NET MVC WebGrid!";

IEnumerable<Account> AccountDatas = new List<Account> {

new Account() { ID = "A001", Name = "素還真"},

new Account() { ID = "A002", Name = "葉小釵"},

new Account() { ID = "A003", Name = "劍子仙跡"},

new Account() { ID = "A004", Name = "佛劍分說"},

new Account() { ID = "A005", Name = "劍之初"},

new Account() { ID = "A006", Name = "羅喉"}

};

return View(AccountDatas);

}

再來便是 View 的部份，記得在加入 View 的對話框樣板部分選擇 List 。

最後就是本文的重點了，在 View 中只需要加上 WebGrid 類別傳入 Model 再呼叫 GetHtml 方法就可以產生我們要的 Grid 囉！

<p>
    <%: new WebGrid(Model).GetHtml() %>
</p>

<p>

<%: new WebGrid(Model).GetHtml() %>

</p>

但是我們發現說好的分頁呢？因為預設值是每頁顯示 10 筆資料，本範例的測試資料僅有 6 筆，所以沒有產生分頁，在此設定 WebGrid 分頁筆數的參數 rowsPerPage 為 5 ，就可以產生分頁囉！

<p>
    <%: new WebGrid(Model, rowsPerPage:5).GetHtml()%>
</p>

<p>

<%: new WebGrid(Model, rowsPerPage:5).GetHtml()%>

</p>

此時會發現排序和分頁功能的連結都是 PostBack ，每次頁面都會重新整理，感覺會很沒效率，那就開啟 ajax 功能吧！只需要加上 ajaxUpdateContainerId 參數並指定一個 id 就可以囉！

<div id="Grid">
    <%: new WebGrid(
                        Model,
                        rowsPerPage:5,
                        ajaxUpdateContainerId:"Grid"
                  ).GetHtml()%>
</div>

<%: new WebGrid(

Model,

rowsPerPage:5,

ajaxUpdateContainerId:"Grid"

).GetHtml()%>

</div>

那如果想自定欄位名稱，並且新增一個編輯的連結又該如何做呢？此時就需要用到 WebGridColumn 類別了，就可以針對每一個想顯示的欄位去設定標題（Header）、格式（Format）、可排序（CanSort）、樣式（Style）和欄位名稱（ColumnName）等屬性，這邊特別說明一下 ColumnName 這屬性，如果名稱和 Model 中的欄位一致，便會自己 Bind 資料了。至於要新增一個編輯的連結，則是利用來完成，這部份直接看下面程式碼囉！

<div id="Grid2">
    <%: new WebGrid(
                        Model,
                        rowsPerPage: 5,
                        ajaxUpdateContainerId: "Grid2"
                  ).GetHtml(
                        columns: new List<WebGridColumn> {
                            new WebGridColumn() { ColumnName = "ID", Header = "帳號" },
                            new WebGridColumn() { ColumnName = "Name", Header = "姓名" },
                            new WebGridColumn() {
                                ColumnName = "Edit",
                                Header = "編輯",
                                Format = item => Html.ActionLink("編輯", "Edit", new { ID = item.ID})
                            }
    })%>
</div>

<%: new WebGrid(

Model,

rowsPerPage: 5,

ajaxUpdateContainerId: "Grid2"

).GetHtml(

columns: new List<WebGridColumn> {

new WebGridColumn() { ColumnName = "ID", Header = "帳號" },

new WebGridColumn() { ColumnName = "Name", Header = "姓名" },

new WebGridColumn() {

ColumnName = "Edit",

Header = "編輯",

Format = item => Html.ActionLink("編輯", "Edit", new { ID = item.ID})

}

})%>

</div>

WebGrid 和其方法 GetHtml 還有許多參數可以做設定，可以設定分頁的格式、文字、樣式，單數欄的樣式等等，此部份就不再多做說明了，可以參考官方文件的說明。此外，雖然開啟 ajax 可以減少整頁重新整理的次數，但是事實上每次呼叫 Action 時候還是會傳遞整個 Model 的資料，當資料量大的時候也是會比較沒效率的，至於該如何解決可以參考這一篇文章，希望這對大家會有幫助囉！

範例下載：下載

參考資料

WebGrid Class（MSDN）

WebGridColumn Class（MSDN）

WebGrid WebHelper in ASP.NET MVC 3 RC

Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3 RC

標籤： ASP.Net MVC, WebGrid 回覆此文章

回覆 (1) 引用 (0) ( 訂閱此篇文章的回覆 )

Jerry
三月 30th, 2011 - 11:37

請問一下，
webgird 每次換頁的話，
是去資料庫裡查全部，再計算分頁嗎?!
還是只查每頁幾筆的數量而已?!

黯雲回應：
~~資料如果是 IQueryable 應該就不會查全部再去處理~~。只不過他回傳時候就算是用 ajax 還是一樣會傳整個 view 回去就是了...

補充：後來去測試發現似乎是都會全部查詢...

( 回覆 )

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery