ASP.NET Web Pages 簡介 - 顯示資料

作者：Tom FitzMacken

本教學課程說明如何在 WebMatrix 中建立資料庫，以及如何在使用 ASP.NET Web Pages (Razor) 時，在頁面中顯示資料庫資料。 其假設您已完成 ASP.NET Web Pages 程式設計簡介系列。

您將學會：

• 如何使用 WebMatrix 工具來建立資料庫和資料庫資料表。
• 如何使用 WebMatrix 工具將資料新增至資料庫。
• 如何在頁面上顯示資料庫中的資料。
• 如何在 ASP.NET Web Pages 中執行 SQL 命令。
• 如何自訂 WebGrid 協助程式來變更資料顯示，以及新增分頁和排序。

討論的功能/技術：

• WebMatrix 資料庫工具。
• WebGrid 協助程式。

建置內容

在上一個教學課程中，向您介紹了 ASP.NET Web Pages (.cshtml 檔案)、Razor 語法的基本概念，以及協助程式。 在本教學課程中，您將開始建立實際的 Web 應用程式並用於本系列的其餘部分。 應用程式是簡單的電影應用程式，可讓您檢視、新增、變更和刪除電影的相關資訊。

完成本教學課程後，您將能夠檢視看起來像此頁面的電影清單：

但若要開始，您必須建立資料庫。

資料庫簡介 (極短篇)

本教學課程只會提供資料庫最簡單的簡介。 如果您有資料庫經驗，可以略過這個簡短的章節。

資料庫包括一或多個包含資訊的資料表，例如客戶、訂單和廠商，或學生、教師、班級和成績的資料表。 在結構上，資料庫資料表就像試算表。 設想典型的通訊錄。 對於通訊錄中的每個項目 (即每個人)，您會有幾項資訊，例如名字、姓氏、地址、電子郵件地址和電話號碼。

(資料列有時稱為「記錄」，而資料行有時稱為「欄位」。

對於大部分資料庫資料表，資料表必須有包含唯一值的資料行，例如客戶號碼、帳戶號碼等等。 這個值稱為資料表的「主索引鍵」，您可以使用它來識別資料表中的每個資料列。 在此範例中，ID 資料行是上一個範例所示的通訊簿的主索引鍵。

您在 Web 應用程式中執行的大部分工作都包括從資料庫讀取資訊，並在頁面上顯示資訊。 您也會經常收集使用者的資訊，並將其新增至資料庫，或修改資料庫中已有的記錄。 (我們將在本教學課程集中討論所有這些作業。)

資料庫工作可能非常複雜，而且可能需要特殊知識。 不過，在本教學課程集中，您只需要了解基本概念，這一切都會在您繼續時進行說明。

建立資料庫

WebMatrix 包含的工具可讓您輕鬆地建立資料庫，以及在資料庫中建立資料表。 (資料庫的結構稱為資料庫的「結構描述」。在本教學課程集中，您將建立資料庫中只有一個資料表的資料庫 — 電影。

如果您尚未這麼做，請開啟 WebMatrix，然後開啟您在上一個教學課程中建立的 WebPagesMovies 網站。

在左窗格中，按一下 [資料庫] 工作區。

功能區會變更以顯示資料庫相關工作。 在功能區中，按一下 [新增資料庫]。

WebMatrix 會建立與您的網站同名的 SQL Server CE 資料庫 (.sdf 檔案) - WebPagesMovies.sdf。 (您不會在這裡執行此動作，但只要檔案具有 .sdf 副檔名，就可以將檔案重新命名為您想要的任何名稱。

建立資料表

在功能區中，按一下 [新增資料表]。 WebMatrix 會在新的索引標籤中開啟資料表設計工具。(如果 [新增資料表] 選項無法使用，請確定已在左側的樹狀檢視中選取新的資料庫。)

在頂端的文字方塊中 (浮水印顯示「輸入資料表名稱」的地方)，輸入「電影」。

資料表名稱下方的窗格是您定義個別資料行的位置。 針對本教學課程中的 [電影] 資料表，您只會建立幾個資料行：ID、片名、片種和年份。

在 [名稱] 方塊中，輸入「ID」。 在此輸入值會啟動新資料行的所有控制項。

定位到 [資料類型] 清單，然後選擇 [int]。這個值會指定 ID 資料行將包含整數 (數字) 資料。

注意

我們不會在這裡再呼叫它 (太多次)，但您可以使用標準 Windows 鍵盤手勢在此格線中瀏覽。 例如，您可以在欄位之間定位，只要開始輸入，即可選取清單中的項目等等。

定位超過 [預設值] 方塊 (也就是將它保留空白)。 定位至 [是主索引鍵] 核取方塊，然後選取該方塊。 此選項會告知資料庫 [ID] 資料行將包含識別個別資料列的資料。 (也就是說，每個資料列在 ID 資料行中都會有唯一的值，您可以用來尋找該資料列。)

選擇 [是身分識別] 選項。 此選項會告訴資料庫，它應該為每個新資料列自動產生下一個序號。 ([是身分識別] 選項只有在您同時選取了 [是主索引鍵] 選項時才有效。

按一下下一個格線資料列，或按定位鍵兩次以完成目前的資料列。 任一手勢都會儲存目前的資料列，並開始下一個資料列。 請注意，[預設值] 資料行現在會顯示 [Null]。 (Null 是預設值的預設值，可以這麼說。)

當您完成定義新的 [ID] 資料行之後，設計工具看起來會像這個圖例：

若要建立下一個資料行，按一下 [名稱] 資料行中的方塊。 輸入資料行的 [標題]，然後選取 [nvarchar] 做為 [資料類型] 值。 nvarchar 的 "var" 部分會告訴資料庫，此資料行的資料會是字串，其大小可能會因記錄而異。 ("n" 前置詞代表 "national"，表示欄位可以儲存任何字母或寫入系統的字元資料，也就是說，欄位會儲存 Unicode 資料。)

當您選擇 [nvarchar] 時，會出現另一個方塊，您可以在其中輸入欄位的最大長度。 輸入 50，假設您在本教學課程中不會使用任何超過 50 個字元的電影片名。

略過 [預設值]，並清除 [允許 Null] 選項。 您不希望資料庫允許將任何沒有片名的電影輸入資料庫。

當您完成並移至下一個資料列時，設計工具看起來會像這個圖例：

重複這些步驟以建立名為「片種」的資料行，但長度除外，將它設定為 30。

建立另一個名為「年份」的資料行。針對資料類型，選擇 [nchar] (非 [nvarchar])，並將長度設定為 4。 對於年份，您將使用 4 位數的數字，例如「1995」或「2010」，因此您不需要可變大小的資料行。

以下是完成的設計外觀：

按 Ctrl+S，或按一下快速存取工具列中的 [儲存] 按鈕。 關閉索引標籤來關閉資料庫設計工具。

新增一些範例資料

稍後在本教學課程系列中，您將建立頁面，您可以在其中的表單中輸入新電影。 不過，現在您可以新增一些範例資料，然後可在頁面上顯示。

在 WebMatrix 的 [資料庫] 工作區中，請注意有一個樹狀結構會顯示您稍早建立的 .sdf 檔案。 開啟新 .sdf 檔案的節點，然後開啟 [資料表] 節點。

以滑鼠右鍵按一下 [電影] 節點，然後選擇 [資料]。 WebMatrix 會開啟一個格線，您可以在其中輸入 [電影] 資料表的資料：

按一下 [片名] 資料行，然後輸入「當哈利碰上莎莉」。 移至 [片種] 資料行 (您可以使用定位鍵)，然後輸入「浪漫喜劇片」。 移至 [年份] 資料行，然後輸入「1989」：

按 Enter 鍵，WebMatrix 會儲存新電影。 請注意，[ID] 資料行已填入。

輸入另一部電影 (例如，「亂世佳人」、「劇情片」、「1939」)。 ID 資料行會再次填入：

輸入第三部電影 (例如，「魔鬼剋星」、「喜劇片」)。 做為實驗，將 [年份] 資料行保留空白，然後按 Enter 鍵。 因為您已取消選取 [允許 Null] 選項，資料庫會顯示錯誤：

按一下 [確定] 以返回修正該項目 (「魔鬼剋星」的年份為 1984)，然後按 Enter。

填入數部電影，直到您有 8 部左右。 (輸入 8 可讓您更輕鬆地稍後使用分頁。但是，如果太多的話，現在只輸入幾個。實際資料並不重要。

如果您輸入所有電影時沒有任何錯誤，則 ID 值會循序。 如果您嘗試儲存不完整的電影記錄，ID 號碼可能不會循序。 若是如此，沒關係。 數字沒有任何固有的意義，唯一重要的是它們在 [電影] 資料表中是唯一的。

關閉包含資料庫設計工具的索引標籤。

現在，您可以轉向在網頁上顯示此資料。

使用 WebGrid 協助程式在頁面中顯示資料

若要在頁面中顯示資料，您將使用 WebGrid 協助程式。 此協助程式會在格線或資料表 (資料列和資料行) 中產生顯示。 如您所見，您將能夠使用格式化和其他功能來精簡格線。

若要執行格線，您必須撰寫幾行程式碼。 對於您在本教學課程中執行的幾乎所有資料存取，都會依照這幾行的模式。

注意

您實際上有許多選項可用在頁面上顯示資料；WebGrid 協助程式只是其中之一。 我們針對本教學課程選擇它是因為這是顯示資料最簡單的方法，而且具備適當的彈性。 在下一個教學課程集中，您將了解如何使用稍微「手動」的方式來處理頁面中的資料，讓您更直接掌控如何顯示資料。

在 WebMatrix 的左窗格中，按一下 [檔案] 工作區。

您建立的新資料庫位於 App_Data 資料夾中。 如果資料夾尚未存在，WebMatrix 會為您的新資料庫建立它。 (如果您先前已安裝協助程式，資料夾可能已經存在。)

在樹狀檢視中，選取網站的根目錄。 您必須選取網站的根目錄；否則，新檔案可能會新增至 App_Data 資料夾。

在功能區中，按一下 [新增]。 在 [選擇檔案類型] 方塊中，選擇 [CSHTML]。

在 [名稱] 方塊中，將新頁面命名為「Movies.cshtml」：

按一下 [確定] 按鈕。 WebMatrix 會開啟包含其中一些基本架構元素的新檔案。 首先，您將撰寫一些程式碼，以從資料庫取得資料。 然後，您會將標記新增至頁面，以實際顯示資料。

撰寫資料查詢程式碼

在頁面頂端的 @{ 和 } 字元之間，輸入下列程式碼。 (請確定您在左大括弧和右大括弧之間輸入此程式碼。)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

第一行會開啟您稍早建立的資料庫，在使用資料庫執行某些動作之前，這永遠是第一個步驟。 您告訴 Database.Open 方法要開啟之資料庫的名稱。 請注意，您在名稱中未包含 .sdf。 Open 方法假設它正在尋找 .sdf 檔案 (也就是 WebPagesMovies.sdf)，而 .sdf 檔案位於 App_Data 資料夾中。 (稍早我們注意到 App_Data 資料夾已保留；這是 ASP.NET 對該名稱假設的其中一個位置。)

開啟資料庫時，它的參考會放入名為 db 的變數中。 (可以命名為任何名稱。您最後就是透過 db 變數與資料庫互動。

第二行實際上會使用 Query 方法來擷取資料庫資料。 請注意此程式碼的運作方式：db 變數具有已開啟資料庫的參考，而您使用 db 變數 (db.Query) 來叫用 Query 方法。

查詢本身是 SQL Select 陳述式。 (如需有關 SQL 的一些背景，請參閱稍後的說明。在陳述式中，Movies 會識別要查詢的資料表。 * 字元指定查詢應該從資料表傳回所有資料行。 (您也可以個別列出以逗號分隔的資料行。)

會傳回查詢的結果 (若有的話)，並在 selectedData 變數中提供。 同樣地，該變數可以命名為任何名稱。

最後，第三行會告知 ASP.NET 您想要使用 WebGrid 協助程式的執行個體。 您可以使用 關鍵字建立 (具現化new ) 協助程式物件，並透過 selectedData 變數傳遞查詢結果。 新的 WebGrid 物件以及資料庫查詢的結果會在 grid 變數中提供。 您稍後會需要此結果，才能實際在頁面中顯示資料。

在這個階段中，資料庫已開啟，您已取得所要的資料，而且已使用該資料準備 WebGrid 協助程式。 接下來是在頁面中建立標記。

提示

結構化查詢語言 (SQL) (機器翻譯)

SQL 是一種語言，用於管理資料庫中的大部分關聯式資料庫中的資料。 它包含的命令可讓您擷取資料並加以更新，以及讓您建立、修改及管理資料庫資料表中的資料。 SQL 與程式設計語言 (例如 C#) 不同。 使用 SQL，您可以告訴資料庫您想要的，而資料庫會想辦法了解如何取得資料或執行工作。 以下是一些 SQL 命令及其用途的範例：

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

第一個 Select 陳述式會從 Movies 資料表取得所有資料行 (由 * 指定)。

第二個 Select 陳述式會在 Product 資料表中從 Product 資料行值超過 10 的記錄擷取 ID、Name 和 Price 資料行。 此命令會根據 Name 資料行的值，依字母順序傳回結果。 如果沒有記錄符合價格準則，命令會傳回空白集。

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

此命令會在 Product 資料表中插入新記錄，將 Name 資料行設定為 “Croissant”、將 Description 資料行設定為 “A flaky delight”，並將價格設定為 1.99。

請注意，當您指定非數值時，值會以單引弧括住 (而不是雙引號，如 C# 所示)。 您可以在文字或日期值周圍使用這些引號，但不是在數字周圍使用。

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

此命令會刪除 Product 資料表中的記錄，其到期日資料行早於 2008 年 1 月 1 日。 (當然，該命令假設 Product 資料表有這樣的資料行)。日期會以 MM/DD/YYYY 格式輸入於此，但應該以您的地區設定所使用的格式輸入。

Insert 和 Delete 命令不會傳回結果集。 相反的，該命令會傳回數字，告訴您多少筆記錄受到命令的影響。

對於其中一些作業 (例如插入和刪除記錄)，要求作業的處理序必須在資料庫中具有適當權限。 這就是為什麼對於生產資料庫，當連接至資料庫時，您通常必須提供使用者名稱和密碼。

SQL 命令有數十個，但它們全都遵循類似您在這裡看到的命令的模式。 您可以使用 SQL 命令建立資料庫資料表、計算資料表中的記錄數目、計算價格，以及執行更多作業。

新增標記以顯示資料

在 <head> 元素內，將 <title> 元素的內容設定為「Movies」：

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

在頁面的 <body> 元素中，新增以下內容：

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

這樣就大功告成了。 grid 變數是您稍早在程式碼中建立 WebGrid 物件時所建立的值。

在 WebMatrix 樹狀檢視中，以滑鼠右鍵按一下頁面，然後選取 [在瀏覽器中啟動]。 您將看到類似此頁面的內容：

按一下資料行標題連結，依該資料行排序。 按一下標題即可排序是 WebGrid 協助程式內建的功能。

GetHtml 方法，正如其名，會產生顯示資料的標記。 根據預設，GetHtml 方法會產生 HTML <table> 元素。 (如果您想要，可以藉由查看瀏覽器中頁面的來源來驗證轉譯。)

修改格線的外觀

像您剛才所做的一樣使用 WebGrid 協助程式很簡單，但產生的畫面是純文字。 WebGrid 協助程式具有各種選項，可讓您控制資料的顯示方式。 本教學課程中要探索的內容太多，但本節會讓您對其中一些選項有大致的了解。 本系列稍後的教學課程將討論一些其他選項。

指定要顯示的個別資料行

若要開始，您可以指定只顯示特定資料行。 根據預設，如您所見，格線會顯示 [電影] 資料表中的全部四個資料行。

在 Movies.cshtml 檔案中，以下列內容取代您剛才新增的 @grid.GetHtml() 標記：

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

若要告知協助程式要顯示哪些資料行，請包含 GetHtml 方法的 columns 參數，並傳入資料行集合。 在集合中，您可以指定要包含的每個資料行。 您可以指定要透過包含 grid.Column 物件來顯示的個別資料行，並傳入您想要的資料行名稱。 (這些資料行必須包含在 SQL 查詢結果中 — WebGrid 協助程式無法顯示查詢未傳回的資料行。)

再次在瀏覽器中啟動 Movies.cshtml 頁面，這次您會得到如下的顯示內容 (請注意，不會顯示任何 ID 資料行)：

變更格線的外觀

顯示資料行還有相當多的選項，其中一些選項將在稍後的本集合的教學課程中探索。 現在，本節將為您介紹一些方法，讓您以整體方式設定格線的樣式。

在頁面的 <head> 區段內，在結束 </head> 標記之前，新增下列 <style> 元素：

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

此 CSS 標記會定義名為 grid、head 等的類別。 您也可以將這些樣式定義放在個別的 .css 檔案中，並將該檔案連結至頁面。 (事實上，您將在本教學課程集稍後執行此動作)。但是為了方便在本教學課程中進行，它們位於顯示資料的相同頁面中。

現在，您可以取得 WebGrid 協助程式使用這些樣式類別。 協助程式有一些屬性 (例如，tableStyle) 僅作此用途，您會為其指派 CSS 樣式類別名稱，而該類別名稱會轉譯為協助程式轉譯之標記的一部分。

變更 grid.GetHtml 標記，使其現在看起來像此程式碼：

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

此處的差別在於您已將 tableStyle、headerStyle 和 alternatingRowStyle 參數新增至 GetHtml 方法。 這些參數已設定為您稍早新增的 CSS 樣式名稱。

執行頁面，這次您會看到一個看起來較之前更不單調的格線：

若要查看產生的 GetHtml 方法，您可以在瀏覽器中查看頁面的來源。 我們不會在這裡詳細說明，但重點是，藉由指定 tableStyle 之類的參數，您會導致格線產生如下的 HTML 標籤：

<table class="grid">

<table> 標籤已新增 class 屬性，這會參考您稍早新增的其中一個 CSS 規則。 此程式碼會顯示基本模式 — GetHtml 方法的不同參數可讓您參考方法接著產生的 CSS 類別以及標記。 要使用 CSS 類別執行什麼動作由您自行決定。

加入分頁

在本教學課程的最後一項工作，您會在格線新增分頁。 現在一次顯示所有電影並沒有問題。 但是，如果您新增了數百部電影，頁面顯示會很長。

在頁面程式碼中，將建立 WebGrid 物件的行變更為下列程式碼：

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

與之前唯一的差異在於您新增了設定為 3 的 rowsPerPage 參數。

執行頁面。 此格線一次顯示 3 個資料列，還有可讓您逐頁瀏覽資料庫中電影的導覽連結：

接續內容

在下一個教學課程中，您將了解如何使用 Razor 和 C# 程式碼來取得表單中的使用者輸入。 您會將搜尋方塊新增至 [電影] 頁面，以便依片名或片種尋找電影。

電影頁面的完整清單

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

其他資源

• 使用 Razor 語法進行 ASP.NET 網頁程式設計簡介

上一個下一個