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 應用程式。 應用程式是簡單的電影應用程式，可讓您檢視、新增、變更和刪除電影的相關資訊。

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

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

資料庫簡介

本教學課程僅提供資料庫的簡短簡介。 如果您有資料庫經驗，您可以略過這一小節。

資料庫包含一或多個包含資訊的資料表，例如客戶、訂單和廠商的資料表，或是學生、教師、班級和成績。 在結構上，資料庫資料表就像試算表一樣。 想像一般的通訊錄。 針對通訊錄 (中的每個專案，也就是針對每個人) ，您有數項資訊，例如名字、姓氏、位址、電子郵件地址和電話號碼。

(資料列有時稱為 記錄，而資料行有時稱為 fields.)

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

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

資料庫工作可能非常複雜，而且可能需要特殊知識。 不過，針對本教學課程集，您必須只瞭解基本概念，這一切都會在您完成時加以說明。

建立資料庫

WebMatrix 包含工具，可讓您輕鬆地建立資料庫，以及在資料庫中建立資料表。 (資料庫的結構稱為資料庫的 schema.) 針對本教學課程集，您將建立只有一個資料表的資料庫 - Movies。

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

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

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

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

建立資料表

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

在頂端 (頂端的文字方塊中，浮水印顯示 「Enter table name」) ，輸入 「Movies」。

資料表名稱下方的窗格是您定義個別資料行的位置。 在本教學課程的 Movies 資料表中，您只會建立幾個資料行： ID、 Title、 Genre和 Year。

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

索引標籤到 [資料類型] 清單，然後選擇 int。這個值會指定識別碼資料行將包含整數 (數位) 資料。

注意

我們不會在這裡再呼叫它 (許多) ，但您可以使用標準 Windows 鍵盤手勢在此方格中流覽。 例如，您可以在欄位之間按索引標籤，只要開始輸入，即可選取清單中的專案等等。

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

選擇 [Is Identity] 選項。 此選項會告知資料庫，它應該為每個新資料列自動產生下一個序號。 ([ Is Identity ] 選項僅適用于您也已選取 [ Is Primary Key ] 選項。)

按一下下一個方格資料列，或按 Tab 兩次以完成目前的資料列。 任一筆手勢會儲存目前的資料列，並啟動下一個資料列。 請注意， [預設值] 資料 行現在會顯示 Null。 (Null 是預設值的預設值，因此為 speak.)

當您完成定義新的 識別碼 資料行時，設計工具看起來會像下圖所示：

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

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

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

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

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

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

以下是完成的設計外觀：

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

新增一些範例資料

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

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

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

按一下 [ 標題] 資料行，然後輸入「當為時符合 Sally」。 移至 [內容類型] 資料行 (您可以使用索引標籤鍵) ，然後輸入「入口網站」。 移至 [年 ] 資料行，然後輸入 「1989」：

按 Enter 鍵，WebMatrix 會儲存新的電影。 請注意， 識別碼 資料行已填入。

輸入另一部電影 (，例如「隨風消失」、「老式」、「1939」) 。 [識別碼] 資料行會再次填入：

輸入第三部電影 (，例如「Ghostbusters」、「Comedy」) 。 作為實驗，將 Year 資料行保留空白，然後按 Enter 鍵。 因為您未選取 [允許 Null] 選項，因此資料庫會顯示錯誤：

按一下 [確定 ] 返回並修正 「Ghostbusters」 年份 (為 1984) 的專案，然後按 Enter 鍵。

填入數部電影，直到您有 8 個以上。 (輸入 8 可讓您更輕鬆地稍後使用分頁。但是，如果這太多，請立即輸入幾個。) 實際資料並不重要。

如果您輸入所有電影而沒有任何錯誤，則識別碼值是循序的。 如果您嘗試儲存不完整的電影記錄，識別碼號碼可能不是循序的。 如果是，這沒問題。 數位沒有任何固有的意義，而且唯一很重要的是，它們在 Movies 資料表中是唯一的。

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

現在，您可以開啟以在網頁上顯示此資料。

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

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

若要執行方格，您必須撰寫幾行程式碼。 這幾行將作為您在本教學課程中幾乎所有資料存取的模式。

注意

您實際上有許多選項可用來在頁面上顯示資料;協助 WebGrid 程式只是一個。 我們為此教學課程選擇它，因為它是顯示資料的最簡單方式，因為它有合理的彈性。 在下一個教學課程集中，您將瞭解如何使用更「手動」的方式來處理頁面中的資料，這可讓您更直接控制如何顯示資料。

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

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

在樹狀檢視中，選取網站的根目錄。 您必須選取網站的根目錄;否則，新檔案可能會新增至 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 假設該 name.)

開啟資料庫時，其參考會放入名為 的 db 變數中。 (可以命名為anything.) db 變數是最後與資料庫互動的方式。

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

查詢本身是 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 資料表中的記錄擷取識別碼、名稱及 Price 資料行，其 Price 資料行值超過 10。 此命令會根據 Name 資料行的值，依字母順序傳回結果。 如果沒有記錄符合價格準則，命令會傳回空集。

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

此命令會將新記錄插入 Product 資料表中，將 [名稱] 資料行設定為 [單一]、將 [描述] 資料行設定為 「A flaky 快感」，並將價格設定為 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> 專案。 (如果您想要，您可以藉由查看 browser.) 中的頁面來源來確認轉譯

修改方格的外觀

WebGrid像您剛才一樣使用協助程式很簡單，但產生的顯示是純文字的。 協助 WebGrid 程式具有各種選項，可讓您控制資料的顯示方式。 本教學課程中太多無法探索，但本節將讓您瞭解其中一些選項。 本系列稍後的教學課程將涵蓋一些其他選項。

指定要顯示的個別資料行

若要開始，您可以指定只顯示特定資料行。 根據預設，如您所見，方格會顯示 Movies 資料表中的所有四個數據行。

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

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

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

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

變更方格的外觀

還有一些更多選項可用來顯示資料行，其中一些選項將會在此集合稍後的教學課程中加以探索。 現在，本節將介紹您可以整體設定格線樣式的方式。

在 <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 檔案中，並將該檔案連結到頁面。 (事實上，您稍後會在本教學課程 set.) 中執行此動作，但為了簡化本教學課程，它們位於顯示資料的相同頁面中。

現在，您可以取得 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")
    )
)

以下是您已將 、 headerStyle 和 alternatingRowStyle 參數新增 tableStyle 至 方法的 GetHtml 新功能。 這些參數已設定為您稍早新增的 CSS 樣式名稱。

執行頁面，這次您會看到一個看起來比之前還少的格線：

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

<table class="grid">

標記 <table> 已 class 將 屬性新增至該標籤，該屬性會參考您稍早新增的其中一個 CSS 規則。 此程式碼會顯示基本模式 ， 方法的不同參數 GetHtml 可讓您參考方法接著產生的 CSS 類別以及標記。 您可以使用 CSS 類別來執行哪些動作。

加入分頁

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

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

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

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

執行頁面。 方格一次顯示 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 網頁程式設計簡介

上一個下一個