網頁

▼

ASP.NET MVC 3 新HTML Helper筆記(1) -- WebGrid Class

事情永遠是自己想太多。 -- By KKBruce
我在三月時寫了 ASP.NET MVC 3概觀正體中文版及五月時寫了 ASP.NET MVC 3 RTM Tools Update for CHT，算是把整個 ASP.NET MVC 3 所有更新的內容整個灠覽一篇，但其中一直有一點一直讓我心癢癢的，就是在ASP.NET MVC 3概觀正體中文版裡關於 Razor 提供新的 HTML Helper (Chart, WebGrid, Crypto, WebImage, WebMail)，為什麼好東西不和好朋友分享呢？因為相關文章都把這些 ASP.NET MVC 3 新 Helper 和 Razor 放在一起使用，造成我的誤解，以為要使用這些新 Helper 必須要和 Razor 一起才能使用，後來發現我錯了。

在查詢 ASP.NET MVC 3參考 (英文) (ASP.NET MVC 3 Reference) 時，發現了一些好玩的事，怎麼我找不到任何關於 ASP.NET MVC 3 新增的 HTML Helper 的相關類別，ASP.NET MVC 3 只新增了一個 System.Web.Mvc.Razor 類別，其他四個與ASP.NET MVC 2 一樣，經查詢，這些 ASP.NET MVC 3 的新 HTML Helper 是在 System.Web.Helper 類別，而且此類別是位於 Extensions 之下，而非 Frameowrk，如果你專案是開 ASP.NET MVC 3 專案，預設是會加入參考。


都已經預設加入參考，那我可不可以在非 Razor 下使用它呢？答案當然是 No problem。

MVC 3 New HTML Helper 1 -- WebGrid

在MVC 3之前(不就 MVC 2呢？)，如果我們要對一個表格(或說 Model)要做一些進階的效果，例如，我們想做分頁，或除了分頁還是做分頁的Ajax效果…？網路上都有範例可以參考，例如使用jqGrid，或使用Martijn Boland實作的 MvcPaging函式庫，或大陸有位杨涛所實作 MvcPager分页控件等，都是很棒的解決方案。

現在我們能有還能使用 ASP.NET MVC 3 所提供的 WebGrid。我們使用預設的 HomeController 的 Index Action來示範，我們先清除Index Action的程式碼及刪除Index.aspx這個View。

Function Index() As ActionResult

    Dim nw As New NorthwindEntities
    Dim customers = nw.Customers().ToList()

    Return View(customers)
End Function

Index()動作很簡單，使用Entiry Framework來傳入Customer資料表。

然後我們使用強型別(Customers)來建置 Index.aspx 這個View，請直接拉到最後面，

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MvcWebGrid.Customers))" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Index</h2>

<p>
    <%: Html.ActionLink("Create New", "Create") %>
</p>
<table>
    <tr>
        <th>
            CompanyName
        </th>
        <th>
            ContactName
        </th>
        <th>
            ContactTitle
        </th>
        <th>
            Address
        </th>
        <th>
            City
        </th>
        <th>
            Region
        </th>
        <th>
            PostalCode
        </th>
        <th>
            Country
        </th>
        <th>
            Phone
        </th>
        <th>
            Fax
        </th>
        <th></th>
    </tr>

<% For Each item In Model %>
    <% Dim currentItem = item %>
    <tr>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.CompanyName) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.ContactName) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.ContactTitle) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.Address) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.City) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.Region) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.PostalCode) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.Country) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.Phone) %>
        </td>
        <td>
            <%: Html.DisplayFor(Function(modelItem) currentItem.Fax) %>
        </td>
        <td>
            <%: Html.ActionLink("Edit", "Edit", New With {.id = currentItem.CustomerID}) %> |
            <%: Html.ActionLink("Details", "Details", New With {.id = currentItem.CustomerID}) %> |
            <%: Html.ActionLink("Delete", "Delete", New With {.id = currentItem.CustomerID}) %>
        </td>
    </tr>
<% Next %>

</table>

<h2>WebGrid (有分頁及排序)</h2>
<p>
<%: New WebGrid(Model).GetHtml()%>
</p>
</asp:Content>

我們使用List Scaffold建置出Index.aspx這個View，在最後面新增一行「<%: New WebGrid(Model).GetHtml()%>」，讓List Scaffold 所產生效果與 WebGrid 產生的效果比較一下，


上半部分，原始的 List 是使用 For Each來一筆一筆跑出資料，利用 79行程式碼跑出一個超長的Table。下半部分，WebGrid 產生的 Table ，預設有含有「排序及分頁」兩大功能，而且全部只有一行程式加一個參數，有沒有感動到。

WebGrid 能做的不只有這樣，我們針對傳入的Model及Html控制到很細項目，例如，針對Model的控制，

例如，

<%: New WebGrid(Model, defaultSort:="ContactName", rowsPerPage:=5).GetHtml()%>

預設我想針對「ContactName」來排序，且每一分頁使用 5 筆資料。另外，由於預設參數很多，建議可以使用「指名參數(:=, 冒號加等號)」的寫法來設定。能不能有分頁，使用「CanPage」，能不能排序，使用「canSort」，實在很方便。


再來，我們再針對HTML (table) 來進行設置，


這邊我們改寫一下Code，先產生WebGrid的執行個體，這樣才有辨法傳入GetHtml()方法當參數：

<% Dim wg = New WebGrid(Model, defaultSort:="CustomerID", rowsPerPage:=5)%>
<%: wg.GetHtml(columns:=wg.Columns(
                        wg.Column("Address", "地址"),
                        wg.Column("City", "城市"),
                        wg.Column("CompanyName", "公司")))%>

我們看一下結果，


我們希望產生三個Column，而且對應欄位顯示中文。那麼我們可不可以產生CURD呢？還是那一句話「No problem！」，不然就像桌子少一支腳，怎麼行。

<% Dim wg = New WebGrid(source:=Model, defaultSort:="CustomerID", rowsPerPage:=5)%>
<%: wg.GetHtml(columns:=wg.Columns(
                           wg.Column(format:=Function(item) Html.ActionLink("編輯", "Edit", New With {.id = item.CustomerID})),
                           wg.Column(format:=Function(item) Html.ActionLink("刪除", "Delete", Nothing,
                                                                            New With {.onclick =
                                                                                      String.Format("deleteRecord('CustomerID', '{0}')", item.CustomerID),
                                                                                      .href = "JavaScript:void(0)"})),
                           wg.Column("Address", "地址"),
                           wg.Column("City", "城市"),
                           wg.Column("CompanyName", "公司"))
                        )%>

我們產生兩個新欄位，我們透過匿名函式來產生對應的Link，編輯及刪除所產生對應的HTML Code，

<!-- 編輯 -->
<a href="/Home/Edit/ALFKI">編輯</a>
<!-- 刪除 -->
<a onclick="deleteRecord('CustomerID', 'ALFKI')" href="JavaScript:void(0)">刪除</a>

對照HTML Code來看，就比較能了解我們設定那些參數的用意。再來，我們在進行分頁時，可以看得出來是使用 Postback 的方法，如果要使用 Ajax 的方法，WebGrid也是支援的，

<div id="DivCustomer">
<% Dim wg = New WebGrid(source:=Model, defaultSort:="CustomerID", rowsPerPage:=5, ajaxUpdateContainerId:="DivCustomer")%>
<%: wg.GetHtml(columns:=wg.Columns(
                           wg.Column(format:=Function(item) Html.ActionLink("編輯", "Edit", New With {.id = item.CustomerID})),
                           wg.Column(format:=Function(item) Html.ActionLink("刪除", "Delete", Nothing,
                                                                            New With {.onclick =
                                                                                      String.Format("deleteRecord('CustomerID', '{0}')", item.CustomerID),
                                                                                      .href = "JavaScript:void(0)"})),
                           wg.Column("Address", "地址"),
                           wg.Column("City", "城市"),
                           wg.Column("CompanyName", "公司"))
                        )%>

我們在第一行的程式碼內指定屬性「ajaxUpdateContainerId:="DivCustomer"」，意用是我們要使用Ajax，更新到「HTML元素id為『DivCustomer』內」，這裡有兩點需注意，
  1. 需把WebGrid包在指定的HTML元素內；
  2. 需引用jQuery；

最後我們來討論「分頁」效能問題，其實也不用討論，直接看它所傳入SQL Server的T-SQL：

SELECT 
[Extent1].[CustomerID] AS [CustomerID], 
[Extent1].[CompanyName] AS [CompanyName], 
[Extent1].[ContactName] AS [ContactName], 
[Extent1].[ContactTitle] AS [ContactTitle], 
[Extent1].[Address] AS [Address], 
[Extent1].[City] AS [City], 
[Extent1].[Region] AS [Region], 
[Extent1].[PostalCode] AS [PostalCode], 
[Extent1].[Country] AS [Country], 
[Extent1].[Phone] AS [Phone], 
[Extent1].[Fax] AS [Fax]
FROM [dbo].[Customers] AS [Extent1]

這不是件好事，它不會先做分頁再回傳，而是每一次回傳所有資料再進行分頁及排序等動作。( 因為你原始的 Action 裡的資料，本來就沒進行分頁 )

這時候你有兩種解決方法，一是前面所提使用Martijn Boland實作的 MvcPaging函式庫，兩是參考這篇「Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3」所提供的方法。

解決 WebGrid 分頁問題 -- 使用MvcPaging函式庫

  1. 引用MvcPaging專案，然後編譯；
  2. 在HomeController.vb裡 Imports MvcPaging
  3. 在HomeController.vb 加上page 參數，撰寫分頁程式，
  4. Index.aspx裡Inherits的Of IEnumerable改為Of MvcPaging.IPagedList
  5. 在Index.aspx撰寫分頁程式

HomeController.vb 
Function Index(page As Integer?) As ActionResult
    Dim nw As New NorthwindEntities
    'Dim customers = nw.Customers().ToList()
    Dim customers = nw.Customers().OrderBy(Function(c) c.CustomerID).ToPagedList(If(page >= 1, page - 1, 0), 5)

    Return View(customers)
End Function

Index.aspx：在原WebGrid程式碼之下加上 
<%= Html.Pager(Model.PageSize,Model.PageNumber ,Model.TotalItemCount) %>

我們利用MvcPaging來分頁，因為MvcPaging設定的分頁數量與我們設定WebGrid的「rowsPerPage:=5」一樣，所以我們只是單純的把WebGrid當成一個顯示用的物件，另外ajaxUpdateContainerId設定也可以移除了，因為我們不是使用 WebGrid 來進行分頁。

解決 WebGrid 分頁問題 -- 使用Malcolm Sheridan MVP提供的方案(修正運作無誤版)

原網頁上提供的 jQuery 無法正常運作，我修正了一下，在 Chrome 11.x, Firefox 4.x, IE 9 都能正常運作。

  1. 在 HomeController.vb 匯入 System.Web.Helpers
  2. 新增兩個Action，一個用來檢示，一個用來處理分頁要求
  3. 撰寫 jQuery 分頁程式碼
  4. 在檢示View中，引用 jQuery 程式碼。
建立兩個Action，撰寫相關程式碼，WebGridPager 產生 View ( WebGridPager.aspx )
''' <summary>
''' 檢示結果
''' </summary>
''' <returns></returns>
''' <remarks></remarks>
Function WebGridPager() As ActionResult
    Return View()
End Function

''' <summary>
''' 處理分頁
''' </summary>
''' <param name="page">第幾頁</param>
''' <returns>JSON物件</returns>
''' <remarks></remarks>
Function EfficientPaging(page As Integer?) As ActionResult
    ' 使用 Northwind 資料庫
    Dim nw As New NorthwindEntities
    Dim skip As Integer = If(page.HasValue, page.Value - 1, 0)
    ' 以 Customers 資料表為例
    Dim data = nw.Customers().OrderBy(Function(c) c.CustomerID).Skip(skip * 5).Take(5).ToList()
    ' 傳入資料
    Dim grid As New WebGrid(data)
    ' 產生Table Tag
    Dim htmlstring = grid.GetHtml(tableStyle:="webGrid",
                                  headerStyle:="header",
                                  alternatingRowStyle:="alt",
                                  htmlAttributes:=New With {.id = "DataTable"})

    ' 回傳JSON物件
    ' 無安全性問題，可使用 HTTPGET
    Return Json(New With {.Data = htmlstring.ToHtmlString(),
                          .Count = nw.Customers.Count() / 5},
                JsonRequestBehavior.AllowGet)
End Function

我們新增一個 Pager.js ，撰寫相關 jQuery Code (修正原程式碼分頁無法運作的問題)

$(function () {
    $.getJSON('/Home/EfficientPaging', null, function (html) {
        // 把JSON取得動態 WebGrid 的HTML加入body
        $('body').append(html.Data);

        // 建立 footer
        var footer = createFooter(html.Count);
        
        // 動態為分頁 link 加上 click 事件       
        $('#DataTable tfoot a').live('click', function (e) {
            e.preventDefault();

            // 取得文字，當成 page 參數回傳
            var data = {
                page: $(this).text()
            };

            // 當有 click 時，重新取得分頁資料
            $.getJSON('/Home/EfficientPaging', data, function (html) {
                // 先將舊Table移除
                $('#DataTable').remove();
                // 把JSON取得動態 WebGrid 的HTML加入body
                $('body').append(html.Data);

                // 預設Table沒有tfoot，先加上
                $('#DataTable thead').after('');
                // 加入link到tfoot
                $('#DataTable tfoot').append(footer);
            });
        });
    });
});

function createFooter(count) {
    
    // 預設Table沒有tfoot，先加上
    $('#DataTable thead').after('');

    // 產生link
    var footer = "";
    for (var i = 1; i < (count + 1); i++) {
        footer = footer + '<a href="#">' + i + '</a>&nbsp;';
    }

    // 加入link到tfoot
    $('#DataTable tfoot').append(footer);

    return footer;    
}

在 WebGridPager.aspx 的 View 中加入引用 Pager.js (需 jQuery，如果 MasterPage 已經引用，只需引用 Pager.js ) 即可。

<body>
  <script src="../../Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="../../Scripts/Pager.js" type="text/javascript"></script>
</body>

那上兩種方法都是使用到 LINQ 的 Skip() 與 Take() 來進行分頁，些種分頁方法能很有效率的只取回相關的記錄，你以 5 筆為一頁，它一次就只會拿回 5 筆，這讓我們可以考慮把 WebGrid 使用在大量資料處理上。

WebGrid 參數

1 Source WebGrid指定資料來源。
2 columnNames Source中欄位的集合。
3 defaultSort 預設序排欄位名稱
4 rowsPerPage 每頁幾筆資料
5 canPage 是否允許分頁，預設true
6 canSort 是否允許排序，預設true
7 ajaxUpdateContainerId 指定Ajax更新的HTML元素ID
8 fieldNamePrefix 給WebGrid產生的參數欄位加前綴字串，例如，未加時"?sort=CustomerID&sortdir=ASC"，加一個前綴"grid_"後，"?grid_sort=CustomerID&grid_sortdir=ASC”
9 pageFieldName 自定義分頁QueryString參數名稱
10 sortFieldName 自定義排序QueryString參數名稱
11 sortDirectionFieldName 自定義排序QueryString參數名稱

參考


於

1 則留言:

  1. 匿名2012年11月17日 中午12:59

    您好, 請問一下, 這個WebGrid我用在MVC4會出現
    CS0246: The type or namespace name 'WebGrid' could not be found
    應該要怎麼解決呢?

    回覆刪除

感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。