ASP.NET 網頁 - WebGrid

在之前的資料庫章節中，我們使用了 Razor 程式碼顯示資料庫資料，並自己編寫 HTML 標記。但在使用 Razor 的 ASP.NET 網頁中，我們還有更簡單的方法來顯示資料，那就是使用 **WebGrid 輔助器**。

此輔助器可以為您呈現顯示資料的 HTML 表格。
此輔助器支援用於格式化和建立分頁方式的選項。
在 WebGrid 輔助器中，只需單擊列標題即可對資料進行排序。

讓我們來看一個簡單的示例，在這個示例中，我們將顯示相同的資料，但這次我們將使用 WebGrid 輔助器。在這個示例中，我們將建立 **ListCustomers.cshtml** 檔案的副本，然後使用 WebGrid，而不是像使用 **<tr>** 和 **<td>** 標記那樣手動建立 HTML 標記表格。

使用 WebGrid 顯示和排序資料

我們需要建立一個 CSHTML 檔案來開始。

在名稱欄位中輸入 **CustomersWebGrid.cshtml**，然後單擊“確定”繼續。

替換 CustomersWebGrid.cshtml 檔案中的以下程式碼。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <div id = "grid">
         @grid.GetHtml()
      </div>
   
   </body>
</html>

您可以看到，程式碼首先開啟 **WebPagesCustomers** 資料庫檔案，然後建立一個簡單的 SQL 查詢。

var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";

名為 data 的變數填充了 SQL Select 語句返回的資料。

var data = db.Query(selectQueryString);

然後使用 WebGrid 輔助器從 data 建立一個新的網格。

var grid = new WebGrid(data);

此程式碼建立一個新的 WebGrid 物件並將其分配給 grid 變數。在頁面的主體中，您可以使用 WebGrid 輔助器呈現資料，如下面的程式所示。

<div id = "grid">
   @grid.GetHtml()
</div>

現在讓我們執行應用程式並指定以下 url：**https://:36905/CustomersWebGrid**，您將看到以下網頁。

您可以看到，透過使用盡可能簡單的程式碼，WebGrid 輔助器在顯示和排序資料時做了很多工作。

在上面的輸出中，您可以看到資料按 FirstName 排序，現在您可以透過單擊列標題輕鬆地按 ID 或 LastName 等排序資料。

因此，讓我們單擊 ID 列標題，您將看到資料現在按 ID 排序，如下面的螢幕截圖所示。

WebGrid 輔助器還可以做更多的事情，例如格式化列和設定整個網格的樣式。

讓我們來看同一個示例，但這次我們將格式化列。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <div id = "grid">
         @grid.GetHtml(
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </div>
   
   </body>
</html>

現在讓我們執行應用程式並指定以下 url：**https://:36905/CustomersWebGrid**，您將看到以下網頁。

您可以看到，FirstName 和 LastName 列中的資料現在以斜體格式顯示。

讓我們來看另一個簡單的示例，在這個示例中，我們將透過定義 **CSS 類** 來設定整個網格的樣式，這些 CSS 類指定呈現的 HTML 表格的外觀，如下面的程式碼所示。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style type = "text/css">
         .grid { margin: 4px; border-collapse: collapse; width: 600px; }
         .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
         .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
         .alt { background-color: #E8E8E8; color: #000; }
         .product { width: 200px; font-weight:bold;}
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <div id = "grid">
         @grid.GetHtml(
            tableStyle: "grid",
            headerStyle: "head",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </div>
   
   </body>
</html>

現在讓我們執行應用程式並指定以下 url：**https://:36905/CustomersWebGrid**，您將看到以下網頁。

列印頁面