ASP.NET 網頁 - 快速指南

ASP.NET 網頁 - 概述

本教程將為您提供關於如何開始使用 ASP.NET 網頁的全面瞭解。Microsoft ASP.NET 網頁是一種免費的 Web 開發技術，旨在為為網際網路建立網站的 Web 開發人員提供最佳體驗。主要目標是，在完成本教程後，您將更好地理解什麼是 ASP.NET 網頁，為什麼我們需要它們，當然還有如何將 ASP.NET 網頁新增到您的專案中。

什麼是 ASP.NET 網頁？

ASP.NET 網頁是一個簡化的框架，我們可以使用它快速輕鬆地構建 ASP.NET 內容。它是建立 ASP.NET 網站和 Web 應用程式的三種程式設計模型之一。其他兩種程式設計模型是Web 窗體和 MVC。

ASP.NET 網頁是一個框架，您可以使用它來建立動態網頁。
一個簡單的 HTML 網頁是靜態的，其內容由頁面中固定的 HTML 標記確定，而使用動態頁面，您可以使用程式碼動態建立頁面內容。
它提供了一種簡單的方法來組合HTML、CSS、JavaScript 和伺服器程式碼。

使用動態頁面，您可以執行許多操作，例如：

使用表單提示使用者輸入，然後更改頁面顯示的內容或外觀。
獲取使用者資訊，將其儲存到資料庫中，然後稍後列出它。
從您的網站傳送電子郵件。
與 Web 上的其他服務進行互動。

ASP.NET 網頁支援並行執行網站的功能。這使您可以繼續執行舊的 ASP.NET 網頁應用程式，構建新的 ASP.NET 網頁應用程式，並在同一臺計算機上執行所有這些應用程式。

您應該瞭解什麼？

在本教程中，我們假設您有興趣學習基本的程式設計知識。
ASP.NET 網頁使用 C# 和 Visual Basic 程式語言。在本教程中，我們將使用 C# 作為程式語言。
無需任何程式設計經驗。
如果您之前曾在網頁中編寫過任何 JavaScript，那麼這足以理解本教程。

您需要什麼？

要開始 ASP.NET 網頁開發，您將需要以下內容：

執行 Windows 10、Windows 8、Windows 7、Windows Server 2008 或 Windows Server 2012 的計算機/筆記型電腦。
有效的網際網路連線。
管理員許可權，僅在安裝過程中需要。

ASP.NET 網頁 - 環境設定

您可以使用以下任何一種工具開始 ASP.NET 網頁開發：

WebMatrix
Visual Studio

WebMatrix

WebMatrix 是一套免費、輕量級、易於安裝和使用的 Web 開發工具，它提供了構建網站的最簡單方法。它是一個集成了網頁編輯器、資料庫實用程式、用於測試頁面的 Web 伺服器以及將您的網站釋出到網際網路的功能的工具。

它包括IIS Express（一個開發 Web 伺服器）、ASP.NET 和 SQL Server Compact（一個嵌入式資料庫）。
您可以使用 WebMatrix 建立的網頁可以是動態的。
要對動態網頁進行程式設計，您可以使用 ASP.NET 以及Razor 語法和 C# 或 Visual Basic 程式語言。
如果您已經擁有自己喜歡的程式設計工具，您可以嘗試使用 WebMatrix 工具，或者您可以使用自己的工具建立使用 ASP.NET 的網站，例如 Visual Studio。

WebMatrix 安裝

您可以從以下連結安裝 WebMatrix：https://www.microsoft.com/web/webmatrix/

下載 WebMatrix 並雙擊WebMatrixWeb.exe，它將啟動 Microsoft Web 平臺安裝程式。

Web 平臺安裝程式出現，現在它已準備好安裝 WebMatrix。

單擊“安裝”按鈕以開始 WebMatrix 安裝。

單擊“我接受”以繼續安裝。

安裝完成後，您將看到以下訊息。

Visual Studio 安裝

Microsoft 提供了一個免費版本的 Visual Studio，其中也包含 SQL Server，您可以從https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx下載。

步驟 1 - 下載完成後，執行安裝程式。它將顯示以下對話方塊。

步驟 2 - 單擊“安裝”，它將啟動安裝過程。

步驟 3 - 安裝過程完成後，您將看到以下對話方塊。

步驟 4 - 關閉此對話方塊，如果需要，重新啟動計算機。

步驟 5 - 現在從“開始”選單開啟 Visual Studio，這將開啟以下對話方塊，並且第一次開啟時需要一些時間進行準備，如下面的螢幕截圖所示。

步驟 6 - 完成所有這些操作後，您將看到 Visual Studio 的主視窗。

您現在可以開始 ASP.NET 網頁開發了。

ASP.NET 網頁 - 入門

在本章中，我們將瞭解如何使用 ASP.NET 網頁啟動一個簡單的示例。首先，我們將建立一個新的網站和一個簡單的網頁。

如何建立空白網站？

首先，啟動我們在上一章中安裝的 Microsoft WebMatrix。

我們將建立一個空白站點，然後新增一個頁面。首先，單擊“新建”，它將顯示內建模板。

模板是針對不同型別網站的預構建檔案和頁面。要檢視預設情況下可用的所有模板，請選擇“模板庫”選項。

選擇“空站點”模板並輸入“站點名稱”。在本例中，我們輸入了FirstWebPageDemo作為站點名稱，然後必須單擊“下一步”。

它將安裝所需的包。安裝完成後，WebMatrix 將建立並開啟站點，如下面的螢幕截圖所示。

建立 ASP.NET 網頁

現在，為了理解和熟悉 WebMatrix 和 ASP.NET 網頁，讓我們透過單擊“主頁”選項卡上的“新建”來建立一個簡單的網頁。

WebMatrix 顯示一個檔案型別列表，如下面的螢幕截圖所示。

選擇CSHTML，在“名稱”框中輸入FirstPage.cshtml，然後單擊“確定”。

現在您可以看到 WebMatrix 已建立頁面並在編輯器中開啟它。

讓我們首先更新FirstPage.cshtml頁面，如下面的程式所示。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>Welcome to ASP.NET Web Pages Tutorials</title>
   </head>
   
   <body>
      <h1>Hello World, ASP.NET Web Page</h1>
      <p>Hello World!</p>
   </body>

</html>

現在要測試此網頁，讓我們選擇“主頁”選項卡上“執行”選項下方的箭頭，並選擇 Internet Explorer，如下面的螢幕截圖所示。

現在您將看到以下空白網頁。

現在讓我們在瀏覽器中指定以下 URL：https://:46023/firstpage，您將看到以下輸出。

ASP.NET 網頁 - 檢視引擎

ASP.NET 中的檢視引擎用於將我們的檢視轉換為 HTML，然後將其呈現到瀏覽器。預設情況下，ASP.Net 支援ASPX和Razor 檢視引擎。檢視引擎模板具有與實現不同的語法。在本章中，我們將討論兩個最重要的檢視引擎：

ASPX 檢視引擎，也稱為 Web 窗體檢視引擎，以及
Razor 檢視引擎

還有許多其他第三方檢視引擎，例如Spark、Nhaml等。

ASPX 檢視引擎

ASPX 或 Web 窗體引擎是 ASP.NET 的預設檢視引擎，從一開始就包含在 ASP.NET MVC 中。

使用 ASPX 檢視引擎編寫檢視的語法與 ASP.NET Web 窗體中使用的語法相同。
副檔名也與 ASP.NET Web 窗體相同（例如 .aspx、.ascx、.master）。
ASPX 使用“<% = %>”或“<% : %>”來呈現伺服器端內容。
Web 窗體引擎的名稱空間是System.Web.Mvc.WebFormViewEngine。
ASPX 檢視引擎預設情況下不會執行任何操作來避免跨站點指令碼攻擊。
與 Razor 檢視引擎相比，ASPX 檢視引擎速度更快。

Razor 檢視引擎

Razor 引擎是一個高階檢視引擎，是在MVC3中引入的。它不是一種新的語言，而是一種新的標記語法。

Razor 語法基於 C# 程式語言。
Razor 語法也支援 Visual Basic 語言，並且我們使用 C# 執行的所有操作，您也可以在 Visual Basic 中執行。
Razor 引擎的名稱空間是System.Web.Razor。
Razor 使用“@”字元而不是 ASPX 檢視引擎使用的“<% %>”。
對於 C# 語言，Razor 副檔名為“cshtml”。
預設情況下，Razor 檢視引擎會在呈現到檢視之前對 html 標記或指令碼進行編碼，從而避免跨站點指令碼攻擊。
與 ASPX 檢視引擎相比，Razor 檢視引擎速度較慢。

語法差異

為了理解語法差異，讓我們來看一個用 ASPX 和 Razor 檢視引擎編寫的簡單示例。以下是 ASPX 檢視引擎的程式碼片段。

<%foreach (var student in Students){ %>
   
   <% if (student.IsPassed){ %>
      <% = student.FirstName%> is going to next grade.
   <% } else{ %>
      <% = student. FirstName %> is not going to next grade.
   <% } %>

<% } %>

以下是使用 Razor 檢視引擎編寫的相同示例程式碼。

@foreach (var student in Students){
   @if(student.IsPassed){
      @student. FirstName is going to next grade.
   } else {
      @student. FirstName is not going to next grade.
   }
}

如果您檢視以上使用 ASPX 和 Razor 語法編寫的兩個程式碼片段，您會很清楚地看到，與 ASPX 語法相比，Razor 語法更簡潔、更簡單。Razor 的缺點之一是，它不受 Dream Viewer 等視覺化編輯器的支援。

ASP.NET 網頁 - 專案資料夾結構

在本章中，我們將介紹任何 ASP.NET 應用程式都適用的專案資料夾結構。為了方便您處理應用程式，ASP.NET 保留了一些檔案和資料夾名稱，您可以將其用於特定型別的內容。

如何在 WebMatrix 中建立新專案？

為了理解專案資料夾結構，讓我們在 WebMatrix 中建立一個新專案。

首先，單擊“快速啟動”對話方塊中的“新建”圖示。

從模板中選擇“個人網站”，在“網站名稱”中輸入**DemoSite**，然後單擊“下一步”，如下面的螢幕截圖所示。

個人網站包將被安裝，如下面的螢幕截圖所示。

所有包安裝完畢並建立專案後，您將看到以下資料夾結構。

如您在資料夾結構中看到的，在DemoSite下有App_Code、App_Data等子資料夾。

WebMatrix中的資料夾

預設建立的最重要的資料夾將詳細解釋。

App_Code

此資料夾包含您希望作為應用程式的一部分編譯的**共享類和業務物件的原始碼**。

在動態編譯的網站專案中，這些類會在您首次請求應用程式時進行編譯。當在此資料夾中檢測到任何更改時，所有類/項都會重新編譯。

App_Data

App_Data資料夾包含應用程式資料檔案，包括**.mdf資料庫檔案**、XML檔案和其他資料儲存檔案。此資料夾由ASP.NET用於儲存應用程式的本地資料庫，例如用於維護成員資格和角色資訊的資料庫。

它還包括package資料夾，其中包含作為應用程式一部分的不同包，例如Razor包或Web Pages包等。

Bin

Bin資料夾包含已編譯的程式集，例如**控制元件的.dll檔案**、元件或您希望在應用程式中引用的其他程式碼，例如Razor、Web Pages dll。

Bin資料夾中程式碼表示的任何類都會自動在您的應用程式中引用。

Content

Content資料夾包含不同的資源，例如**影像和樣式表**檔案，例如**css、png和gif**檔案。

這些檔案還定義了ASP.NET Web Pages和控制元件的外觀。

Contents資料夾包含主要的網頁，例如**ASPX或cshtml檔案**。

同樣，您可以看到images資料夾，其中包含網站中使用的影像。Layouts資料夾包含佈局檔案，Scripts資料夾包含JavaScript檔案。

ASP.NET 網頁 - 全域性頁面

在本節中，我們將介紹全域性頁面，例如**_AppStart.cshtml**和**_PageStart.cshtml**，這些頁面通常不會被提及，即使提及，也往往被視為WebMatrix/ASP.Net Web Pages的一部分。

_AppStart

_AppStart.cshtml在應用程式首次啟動時執行一次。在您的網站根資料夾中，您將看到一個_AppStart.cshtml檔案，這是一個用於包含全域性設定的特殊檔案。

它是Web Pages框架的正式一部分，Razor檢視引擎基於此框架。
根資料夾中的_AppStart包含在網站啟動前執行的啟動程式碼。
_AppStart具有下劃線字首，因此，無法直接瀏覽這些檔案。
如果此頁面存在，ASP.NET會在請求站點中的任何其他頁面之前先執行它。

讓我們看一下AppStart.cshtml檔案。

@{
   App.CacheDuration = 30; 
   // cache content pages for 30 minutes
   // register for main contents which will appear as tabs on the navigation bar
   App.ContentPages = new[] {
      new ContentSource("Blog", "My Blog", "~/Contents/_Blog.cshtml", false),
      new ContentSource("Twitter", "My Tweets", "~/Contents/_Twitter.cshtml", false),
      new ContentSource("Photos", "My Photos", "~/Contents/_Photos.cshtml", false)
   };
}

如您所見，當您執行此應用程式時，三個頁面（**部落格、推特和照片**）的內容將作為選項卡顯示在導航欄中，如下面的螢幕截圖所示。

_PageStart

與_AppStart在網站啟動前執行類似，您還可以編寫在任何其他頁面之前執行的程式碼。對於Web中的每個資料夾，您都可以新增一個名為_PageStart的檔案。

_PageStart.cshtml在請求同一資料夾或下級資料夾中的頁面時每次都會執行。
它是執行每個請求處理（例如設定佈局頁面）的地方。

工作流程

當請求一個頁面時，如果這是對站點中任何頁面的第一個請求，ASP.NET首先檢查是否存在_AppStart.cshtml頁面。如果存在_AppStart.cshtml頁面，則首先執行_AppStart.cshtml頁面中的任何程式碼，然後執行請求的頁面。

當請求一個頁面時，ASP.NET首先檢查是否存在_PageStart.cshtml頁面，如果存在，則執行該頁面，然後執行請求的頁面。

ASP.NET 網頁 - 程式設計概念

在本節中，我們將介紹使用Razor語法的ASP.NET Web Pages的程式設計概念。ASP.NET是Microsoft用於在Web伺服器上執行動態網頁的技術。

本節的主要目的是讓您熟悉將用於ASP.NET Web Pages的程式設計語法。
您還將瞭解用C#程式語言編寫的Razor語法和程式碼。
我們已經在前面的章節中看到了這種語法，但在本節中，我們將詳細解釋這種語法。

什麼是Razor

Razor語法是一種ASP.NET程式設計語法，用於使用C#或Visual Basic .NET程式語言建立動態網頁。Razor語法自2010年6月開始開發，並於2011年1月在Microsoft Visual Studio 2010中釋出。

Razor是一種用於向網頁新增基於伺服器的程式碼的標記語法。
Razor具有傳統ASP.NET標記的功能，但更易於學習和使用。
Razor是一種伺服器端標記語法，類似於ASP和PHP。
Razor支援C#和Visual Basic程式語言。

基本Razor語法

Razor語法基於ASP.NET，旨在建立Web應用程式。它具有傳統ASP.NET標記的功能，但更易於使用和學習。

Razor程式碼塊包含在@{...}中。
內聯表示式（變數和函式）以@開頭。
程式碼語句以分號（;）結尾。
變數使用var關鍵字宣告。
字串用引號括起來。
C#程式碼區分大小寫。
C#副檔名為.cshtml。

讓我們看一下以下示例：

<!-- Single statement blocks -->
@{
   var total = 7;
}
@{
   var myMessage = "Hello World";
}

<!-- Inline expressions -->
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>

<!-- Multi-statement block -->
@{
   var greeting = "Welcome to our site!";
   var weekDay = DateTime.Now.DayOfWeek;
   var greetingMessage = greeting + " Today is: " + weekDay;
}

<p>The greeting is: @greetingMessage</p>

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>Welcome to ASP.NET Web Pages Tutorials</title>
   </head>
   
   <body>
      <h1>Hello World, ASP.NET Web Page</h1>
      <p>Hello World!</p>
   </body>

</html>

如您在上面的示例中看到的，在程式碼塊中，每個完整的程式碼語句都必須以分號結尾。內聯表示式不以分號結尾。

讓我們執行您的應用程式，並在瀏覽器中指定以下URL**https://:46023/firstpage**，您將看到以下輸出。

用於儲存資料的變數

您可以在變數中儲存值，包括字串、數字和日期等。您可以使用var關鍵字建立新的變數。您可以使用@直接在頁面中插入變數值。讓我們看一下另一個簡單的示例，我們將資料儲存在另一個變數中。

<!-- Storing a string -->
@{
   var welcomeMessage = "Welcome to ASP.NET Web Pages!";
}
<p>@welcomeMessage</p>

<!-- Storing a date -->
@{
   var year = DateTime.Now.Year;
}
<!-- Displaying a variable -->
<p>Current year is : @year!</p>

讓我們執行您的應用程式，並在瀏覽器中指定以下URL**https://:46023/firstpage**，您將看到以下輸出。

決策制定

動態網頁的一個關鍵功能是，您可以根據條件確定要執行的操作。最常見的方法是使用**If和Else語句**。讓我們看一下以下程式中顯示的決策制定程式碼。

@{
   var result = "";
   
   if(IsPost){
      result = "This page was posted using the Submit button.";
   } else{
      result = "This was the first request for this page.";
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title></title>
   </head>
   
   <body>
      <form method = "POST" action = "" >
         <input type = "Submit" name = "Submit" value = "Submit"/>
         <p>@result</p>
      </form>
   </body>

</html>

讓我們執行您的應用程式，並在瀏覽器中指定以下URL：**https://:46023/firstpage**，您將看到以下輸出。

現在，讓我們單擊“提交”，您將看到它也更新了訊息，如下面的螢幕截圖所示。

讓我們看一下另一個示例，在該示例中，我們必須建立一個**簡單的加法功能**，允許使用者輸入兩個數字，然後將它們加起來並顯示結果。

@{
   var total = 0;
   var totalMessage = "";
   
   if (IsPost){
      // Retrieve the numbers that the user entered.
      var num1 = Request["text1"];
      var num2 = Request["text2"];
      
      // Convert the entered strings into integers numbers and add.
      total = num1.AsInt() + num2.AsInt();
      totalMessage = "Total = " + total;
   }
}

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title>My Title</title>
      <meta charset = "utf-8" />
      <style type = "text/css">
         body {
            background-color: #d6c4c4;
            font-family: Verdana, Arial;
            margin: 50px;
         }
         form {
            padding: 10px;
            border-style: dashed;
            width: 250px;
         }
      </style>
   
   </head>
   <body>
      <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
      
      <form action = "" method = "post">
         <p>
            <label for = "text1">First Number:</label>
            <input type = "text" name = "text1" />
         </p>
         <p>
            <label for = "text2">Second Number:</label>
            <input type = "text" name = "text2" />
         </p>
         <p><input type = "submit" value = "Add" /></p>
      </form>
      
      <p>@totalMessage</p>
   
   </body>
</html>

讓我們執行應用程式，並在瀏覽器中指定以下URL：**https://:46023/firstpage**，您將看到以下輸出。

現在，在提到的欄位中輸入兩個數字，如下面的螢幕截圖所示。

單擊“新增”，您將看到這兩個數字的和，如下面的螢幕截圖所示。

ASP.NET 網頁 - 佈局

在本節中，我們將介紹如何建立一個具有統一佈局的網站。在日常生活中，您可能已經看到許多具有統一外觀和風格的網站，例如：

每個頁面都具有相同的頁首。
每個頁面都具有相同的頁尾。
每個頁面都具有相同的樣式和佈局。

為了提高效率併為您的站點建立網頁，您可以為您的網站建立可重用的內容塊（如頁首和頁尾），並且可以為所有頁面建立統一的佈局。

建立可重用的內容塊

ASP.NET允許您使用一個單獨的檔案建立一個內容塊，該內容塊可以包含文字、標記和程式碼，就像常規網頁一樣。

然後，您可以將內容塊插入站點上的其他頁面，您希望資訊出現在這些頁面上。
這樣，您就不必將相同的內容複製貼上到每個頁面中。
建立這樣的通用內容還可以簡化站點更新。
如果需要更改內容，只需更新單個檔案，然後更改就會反映在插入內容的任何地方。

讓我們看一下一個簡單的示例，在該示例中，我們將建立一個引用兩個內容塊（頁首和頁尾）的頁面，這些內容塊位於單獨的檔案中。您可以在網站的任何頁面中使用這些相同的內容塊。

透過右鍵單擊專案並選擇一個新檔案，在根目錄中建立一個新的**index.cshtml**檔案。

選擇CSHTML檔案型別，在“名稱”欄位中輸入**index.cshtml**，然後單擊“確定”，並將程式碼替換為index.cshtml檔案中的以下程式碼。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
   </body>

</html>

現在，讓我們執行應用程式，並指定以下URL**https://:46023/index**，然後您將看到以下輸出。

現在，我們需要在網站中新增頁首和頁尾，因此在根資料夾中，透過右鍵單擊專案並選擇“新建資料夾”建立一個資料夾，然後將其命名為“Shared”。將共享在網頁之間共享的檔案儲存在名為Shared的資料夾中是一種常見的做法。您也可以參考以下螢幕截圖。

右鍵單擊Shared資料夾，然後選擇“新建檔案”。

選擇CSHTML檔案型別，在“名稱”欄位中輸入**_Header.cshtm**，然後單擊“確定”。

開頭的下劃線（_）字元具有重要意義。如果頁面名稱以下劃線開頭，則ASP.NET不會將該頁面直接傳送到瀏覽器。此約定允許您定義站點所需的頁面，但同時使用者不應該能夠直接請求它們。

將_Header.cshtm中的程式碼替換為以下程式中顯示的程式碼。

<div class = "header">
   This is header text from _Header.cshtml file
</div>

類似地，在Shared資料夾中新增另一個檔案_footer.cshtml，並將程式碼替換為以下程式中顯示的程式碼。

<div class = "footer">
   © 2016 XYZ Pvt. Ltd. All rights reserved.
</div>

如您所見，我們已添加了頁首和頁尾，現在我們需要透過呼叫**RenderPage**方法從Index.cshtml頁面顯示這些內容，如下面的程式中所示。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>My Website</title>
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

您可以透過呼叫RenderPage方法並將要插入內容的檔名傳遞給它，將內容塊插入網頁中。在上面的程式碼中，您可以看到我們已將_Header.cshtml和_Footer.cshtml檔案的內容插入到Index.cshtml檔案中。

現在，讓我們再次執行應用程式，並指定以下URL：**https://:46023/index**，然後您將看到以下輸出。

同樣，您只需透過呼叫RenderPage方法並傳遞檔名即可在網站的所有頁面上新增頁首和頁尾。

使用佈局頁面建立一致的外觀

建立站點一致外觀的更結構化的方法是使用佈局頁面。佈局頁面定義網頁的結構，但不包含任何實際內容。

佈局頁面就像任何HTML頁面一樣，只是它包含對RenderBody方法的呼叫。
RenderBody方法在佈局頁面中的位置決定了來自內容頁面的資訊將包含在何處。
建立佈局頁面後，您可以建立包含內容的網頁，然後輕鬆地將它們連結到佈局頁面。
顯示這些頁面時，它們將根據佈局頁面進行格式化。
佈局頁面充當其他頁面中定義的內容的模板。

讓我們透過右鍵單擊並選擇“新建檔案”將佈局頁面新增到網站的根目錄中。

點選“確定”繼續並替換以下程式碼。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title> Structured Content </title>
      <link href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css" />
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <div id = "main">@RenderBody()</div>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

您可以在佈局頁面中使用 RenderPage 方法插入內容塊，就像我們在上面程式碼中用於頁首和頁尾一樣。佈局頁面只能包含一次對 RenderBody 方法的呼叫。

在上面的程式碼中，您可以看到我們添加了對Site.css檔案的引用，但是我們還沒有建立此檔案，因此我們需要在根資料夾中新增一個新資料夾，並將其命名為 Styles。

在 Styles 資料夾中，建立一個名為 Site.css 的檔案。

在 Site.css 檔案中新增以下樣式定義 -

h1 {
   border-bottom: 3px solid #2f84d6;
   font: 3em/2em Georgia, serif;
   color: #911a42;
}
ul {
   list-style-type: none;
}
body {
   margin: auto;
   padding: 1em;
   background-color: #d9dbdb;
   font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
   color: #100478;
}
#list {
   margin: 1em 0 7em -3em;
   padding: 1em 0 0 0;
   background-color: #ffffff;
   color: #996600;
   width: 25%;
   float: left;
}
#header, #footer {
   margin: 0;
   padding: 0;
   color: #996600;
}

現在讓我們在您的專案中新增另一個 cshtml 檔案，命名為MyLayoutPage.cshtml，並新增以下程式碼。

@{
   Layout = "~/_Layout.cshtml";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>

要從任何頁面使用新的佈局，您只需在任何頁面的頂部新增以下行，如下面的程式所示。

@{
   Layout = "~/_Layout.cshtml";
}

現在讓我們再次執行應用程式並指定以下 URLhttps://:46023/MyLayoutPage，然後您將看到以下輸出。

ASP.NET 網頁 - 使用表單

在本章中，我們將介紹如何建立一個輸入表單，以及在使用 ASP.NET Web Pages 和 Razor 語法時如何處理使用者的輸入。

表單是 HTML 文件的一部分，您可以在其中放置使用者輸入控制元件，例如文字框、複選框、單選按鈕和下拉列表。
當您想要收集和處理使用者輸入時，可以使用表單。

如何建立輸入表單？

讓我們透過建立一個新的 cshtml 檔案（名為MyForm.cshtml）並用以下程式替換程式碼來了解一個簡單的示例。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customer Form</title>
   </head>
   
   <body>
      <form method = "post" action = "">
         <fieldset>
            <legend>Add Student</legend>
            <div>
               <label for = "StudentName">Student Name: </label>
               <input type = "text" name = "StudentName" value = "" />
            </div>
            
            <div>
               <label for = "UniName">University Name:</label>
               <input type = "text" name = "UniName" value = "" />
            </div>
            
            <div>
               <label for = "Address">Res. Address:</label>
               <input type = "text" name = "Address" value = "" />
            </div>
            
            <div>
               <label> </label>
               <input type = "submit" value = "Submit" class = "submit" />
            </div>
         </fieldset>
      </form>
   
   </body>
</html>

現在讓我們再次執行應用程式並指定以下 URL - https://:46023/myform，然後您將看到以下輸出。

讓我們在所有欄位中輸入一些資料，如下面的螢幕截圖所示。

現在，當您點選“提交”按鈕時，您會發現沒有任何反應。為了使表單有用，我們需要新增一些將在伺服器上執行的程式碼。

從表單讀取使用者輸入

要從表單讀取使用者輸入，我們將新增一些程式碼來讀取所有欄位的值，然後根據需要處理它們。此過程向您展示瞭如何讀取欄位並在頁面上顯示使用者輸入。

讓我們再次檢視同一個示例，在其中我們添加了一些程式碼來處理所有欄位的值。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customer Form</title>
   </head>
   
   <body>
      @{
         if (IsPost){
            string StudentName = Request["StudentName"];
            string UniName = Request["UniName"];
            string Address = Request["Address"];
            
            <p>
               You entered: <br />
               Student Name: @StudentName <br />
               University Name: @UniName <br />
               Res. Address: @Address <br />
            </p>
         } else{
            <form method = "post" action = "">
               <fieldset>
                  <legend>Add Student</legend>
                  <div>
                     <label for = y"StudentName">Student Name: </label>
                     <input type = "text" name = "StudentName" value = "" />
                  </div>
                  
                  <div>
                     <label for = "UniName">University Name:</label>
                     <input type = "text" name = "UniName" value = "" />
                  </div>
                  
                  <div>
                     <label for = "Address">Res. Address:</label>
                     <input type = "text" name="Address" value = "" />
                  </div>
                  
                  <div>
                     <label> </label>
                     <input type = "submit" value = "Submit" class = "submit" />
                  </div>
               
               </fieldset>
            </form>
         }
      }
   </body>
</html>

現在讓我們再次執行應用程式並指定以下 URL - https://:46023/myform，然後您將看到以下輸出。

讓我們在所有欄位中輸入一些資料。

現在，當您點選“提交”按鈕時，您將看到以下輸出。

讓我們透過在您的專案中建立一個新資料夾並將其命名為 images，然後在該資料夾中新增一些影像來了解另一個簡單的示例。

現在新增另一個名為MyPhotos.cshtml的 cshtml 檔案，並替換以下程式碼。

@{
   var imagePath = "";
   
   if (Request["Choice"] != null)
   { imagePath = "images/" + Request["Choice"]; }
}

<!DOCTYPE html>
<html>
   
   <body>
      <h1>Display Images</h1>
      
      <form method = "post" action = "">
         I want to see:
         <select name = "Choice">
            <option value = "index.jpg">Nature 1</option>
            <option value = "index1.jpg">Nature 2</option>
            <option value = "index2.jpg">Nature 3</option>
         </select>
         <input type = "submit" value = "Submit" />
         
         @if (imagePath != ""){
            <p><img src = "@imagePath" alt = "Sample" /></p>
         }
      </form>
   
   </body>
</html>

如您所見，我們添加了一些 jpg 檔案的引用，這些檔案位於 images 資料夾中，如下面的螢幕截圖所示。

當您執行應用程式並指定以下 URL - https://:46023/myphotos時，您將看到以下輸出。

讓我們點選“提交”，您將看到index.jpg檔案載入到頁面上。

當從下拉列表中選擇另一張照片時，例如 Nature 3 並點選“提交”，它將更新頁面上的照片，如下面的影像所示。

ASP.NET 網頁 - 頁面物件模型

ASP.NET 中最基本的物件是頁面。您可以直接訪問頁面物件的屬性，而無需任何限定物件。在前面的章節中，我們使用了一些頁面物件的屬性和方法，例如 Layout、RenderPage 和 RenderBody。WebPageBase 類是表示 ASP.NET Razor 頁面的類的基類。

頁面物件模型的屬性和方法

以下是頁面物件的一些最常用屬性。

序號	屬性及描述
1	IsPost 如果客戶端使用的 HTTP 資料傳輸方法是 POST 請求，則返回 true。
2	Layout 獲取或設定佈局頁面的路徑。
3	Output 獲取頁面的當前 TextWriter 物件。
4	Page 提供對頁面和佈局頁面之間共享的資料的類似屬性的訪問。
5	Request 獲取當前 HTTP 請求的 HttpRequest 物件。
6	Server 獲取提供網頁處理方法的 HttpServerUtility 物件。

以下是頁面物件的一些最常用方法。

序號	方法及描述
1	ConfigurePage 在派生類中重寫時，根據父網頁的配置配置當前網頁。
2	DefineSection 由內容頁面呼叫以建立命名內容部分。
3	ExecutePageHierarchy() 執行一組依賴網頁中的程式碼。
4	GetOutputWriter 返回用於呈現頁面的文字寫入器例項。
5	href 使用指定的引數構建 URL。
6	InitializePage 初始化當前頁面。
7	IsSectionDefined 返回值指示頁面中是否定義了指定的部分。
8	PopContext 返回並從 OutputStack 例項的頂部刪除上下文。
9	PushContext 在 OutputStack 例項的頂部插入指定的上下文。
10	RenderBody() 呈現內容頁面中不在命名部分內的部分（在佈局頁面中）。
11	RenderPage(page) 在一個頁面內呈現另一個頁面的內容。
12	RenderSection(section) 呈現命名部分的內容（在佈局頁面中）。
13	Write(object) 將物件寫入 HTML 編碼的字串。
14	WriteLiteral 寫入物件，而不先進行 HTML 編碼。

讓我們來看一個頁面物件 Page 屬性的簡單示例，該屬性提供對頁面和佈局頁面之間共享的資料的類似屬性的訪問。在此示例中，我們將使用Page.Title屬性設定頁面的標題。

以下是MyLayoutPage.cshtml檔案的實現，我們已在其中設定了頁面標題。

@{
   Layout = "~/_Layout.cshtml";
   page.Title = "Layout Page";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>

現在我們需要在_Layout.cshtml頁面中指定相同的頁面標題，如下面的程式碼所示。

@{ }
<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title>@Page.Title</title>
      <link href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css" />
   </head>
   
   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <div id = "main">@RenderBody()</div>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

讓我們執行應用程式並指定以下 URL - https://:46023/MyLayoutPage，然後您將看到以下頁面。

如您所見，標題現在是佈局頁面，我們使用頁面物件的 Page 屬性設定了它。

讓我們來看另一個簡單的示例，其中我們將使用頁面物件的 Request 屬性。

@{
   Layout = "~/_Layout.cshtml";
   Page.Title = "Layout Page";
   var path = Request.FilePath;
   var pageUrl = this.Request.Url;
}

<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>
<a href = "@pageUrl">My page</a>
<p>Page Url: @pageUrl</p>
<p>File Path: @path</p>

您可以使用頁面的 Request 物件獲取頁面的檔案路徑和 URL。讓我們再次執行您的應用程式，您將看到以下輸出。

ASP.NET 網頁 - 資料庫

在本章中，我們將介紹如何在 WebMatrix 中使用 ASP.NET Web Pages（Razor）建立資料庫，以及如何在頁面中顯示資料庫資料。

資料庫包含一個或多個表，這些表包含資訊，例如客戶資訊表或學生表。
在任何給定的表中，您都有多條資訊，例如在 Customers 表中，將有他們的名字、姓氏和地址等。
在大多數資料庫表中，都有一列包含唯一的識別符號，也稱為主鍵，例如 CustomerID 或 StudentID 等。
主鍵標識表中的每一行。

建立資料庫

WebMatrix 提供了工具，您可以輕鬆地建立資料庫，然後可以在該資料庫中新增表。資料庫的結構稱為資料庫的模式。現在讓我們開啟 WebMatrix 並建立一個新的空站點。

在“站點名稱”欄位中輸入WebPagesCustomers，然後點選“下一步”。

在左側窗格中，點選“資料庫”，如下面的螢幕截圖中突出顯示的那樣。

現在您將看到它在功能區中打開了與資料庫相關的選項。

點選“新建資料庫”選項。

您將看到 WebMatrix 建立了一個 SQL Server 資料庫，它是一個*.sdf檔案，其名稱與您的站點WebPagesCustomers.sdf相同，您也可以重新命名此檔案。

建立表

您可以透過右鍵點選左側窗格中的“表”，然後選擇“新建表”來輕鬆建立表，或者您可以點選功能區中的“新建表”選項。

現在您可以看到 WebMatrix 已打開了表設計器。

輸入表名，然後輸入一些列，並按 Ctrl+S 儲存，如下面的螢幕截圖所示。

對於 ID 行集，將“是否為主鍵？”和“是否為標識？”選項更改為“是”（如果它們不是）。

現在讓我們輸入一些原始資料來處理，方法是點選“資料”選項，然後輸入一些資料，如下面的螢幕截圖所示。

顯示資料庫資料

由於我們有一個數據庫和一個 Customers 表，並且我們在資料庫中也有一些資料。現在我們需要從資料庫中將其顯示在網頁上。讓我們建立一個新的 CSHTML 檔案。

在“名稱”欄位中輸入ListCustomers.cshtml，然後點選“確定”。現在要從資料庫中檢索所有客戶，讓我們替換 ListCustomers.cshtml 檔案中的所有程式碼，如下面的程式所示。

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

<!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>
      <table>
         <thead>
            <tr>
               <th>Id</th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Address</th>
            </tr>
         </thead>
         
         <tbody>
            @foreach(var row in db.Query(selectQueryString)){
               <tr>
                  <td>@row.ID</td>
                  <td>@row.FirstName</td>
                  <td>@row.LastName</td>
                  <td>@row.Address</td>
               </tr>
            }
         </tbody>
      </table>
   
   </body>
</html>

現在讓我們執行應用程式並指定以下 URL - https://:36905/ListCustomers，您將在網頁上看到客戶列表，如下面的螢幕截圖所示。

ASP.NET 網頁 - 向資料庫新增資料

在本章中，我們將介紹如何建立一個頁面，讓使用者可以將資料新增到資料庫中的 Customers 表中。

在此示例中，您還將瞭解何時插入記錄，頁面將使用我們在上一章中建立的 ListCustomers.cshtml 頁面顯示更新後的表。
在此頁面中，我們還添加了驗證，以確保使用者輸入的資料對資料庫有效。例如，使用者已為所有必需的列輸入資料。

如何將資料新增到資料庫中的 Customer 表中？

讓我們向您的網站新增一個新的 CSHTML 檔案。

在“名稱”欄位中輸入InsertCustomer.cshtml，然後點選“確定”。

現在建立一個新的網頁，使用者可以在其中插入 Customers 表中的資料，因此用以下程式碼替換 InsertCustomer.cshtml 檔案。

@{
   Validation.RequireField("FirstName", "First Name is required.");
   Validation.RequireField("LastName", "Last Name is required.");
   Validation.RequireField("Address", "Address is required.");
   
   var db = Database.Open("WebPagesCustomers");
   var FirstName = Request.Form["FirstName"];
   var LastName = Request.Form["LastName"];
   var Address = Request.Form["Address"];
   
   if (IsPost && Validation.IsValid()) {
      // Define the insert query. The values to assign to the
      // columns in the Customers table are defined as parameters
      // with the VALUES keyword.
      
      if(ModelState.IsValid) {
         var insertQuery = "INSERT INTO Customers (FirstName, LastName, Address) " +
            "VALUES (@0, @1, @2)";
         db.Execute(insertQuery, FirstName, LastName, Address);
         
         // Display the page that lists products.
         Response.Redirect("~/ListCustomers");
      }
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Add Customer</title>
      <style type = "text/css">
         label {
            float:left; 
            width: 8em; 
            text-align: 
            right;
            margin-right: 0.5em;
         }
         fieldset {
            padding: 1em; 
            border: 1px solid; 
            width: 50em;
         }
         legend {
            padding: 2px 4px; 
            border: 1px solid; 
            font-weight:bold;
         }
         .validation-summary-errors {
            font-weight:bold; 
            color:red;
            font-size: 11pt;
         }
      </style>
   
   </head>
   <body>
      <h1>Add New Customer</h1>
      @Html.ValidationSummary("Errors with your submission:")
      
      <form method = "post" action = "">
         <fieldset>
            <legend>Add Customer</legend>
            <div>
               <label>First Name:</label>
               <input name = "FirstName" type = "text" size = "50" value = "@FirstName"/>
            </div>
            
            <div>
               <label>Last Name:</label>
               <input name = "LastName" type = "text" size = "50" value = "@LastName" />
            </div>
            
            <div>
               <label>Address:</label>
               <input name = "Address" type = "text" size = "50" value = "@Address" />
            </div>
            
            <div>
               <label> </label>
               <input type = "submit" value = "Insert" class = "submit" />
            </div>
         </fieldset>
      </form>
   
   </body>
</html>

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

在上面的螢幕截圖中，您可以看到我們添加了驗證，因此，如果您在不輸入任何資料或缺少上述任何欄位的情況下點選“插入”按鈕，您將看到它會顯示錯誤訊息，如下面的螢幕截圖所示。

現在讓我們在所有欄位中輸入一些資料。

現在點選“插入”，您將看到更新後的客戶列表，如下面的螢幕截圖所示。

ASP.NET 網頁 - 編輯資料庫資料

在本章中，我們將介紹如何建立一個網頁，使用者可以在其中編輯資料庫中現有的資料。

在本過程中，我們將建立兩個頁面，它們與我們之前為資料插入建立的頁面類似。
第一個頁面顯示客戶列表，並允許使用者選擇要更改的客戶。
第二個頁面允許使用者實際進行編輯並儲存更改。

如何編輯資料庫中現有的資料？

讓我們在專案中建立一個新的CSHTML檔案。

在“名稱”欄位中輸入**EditCustomers.cshtml**，然後點選“確定”。

現在用以下程式碼替換EditCustomers.cshtml檔案。

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

<!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>
      <table>
         <thead>
            <tr>
               <th> </th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Address</th>
            </tr>
         </thead>
         
         <tbody>
            @foreach(var row in db.Query(selectQueryString)){
               <tr>
                  <td><a href = "@Href("~/UpdateCustomers", row.Id)">Edit</a></td>
                  <td>@row.FirstName</td>
                  <td>@row.LastName</td>
                  <td>@row.Address</td>
               </tr>
            }
         </tbody>
      </table>
   
   </body>
</html>

**EditCustomers.cshtml**頁面和**ListCustomers.cshtml**頁面唯一的區別在於，它包含一個額外的列，顯示“編輯”連結。

當您點選該編輯連結時，它將帶您到**UpdateCustomer.cshtml**頁面，該頁面尚未建立。因此，我們需要建立UpdateCustomer.cshtml檔案並用以下程式碼替換它。

@{
   Validation.RequireField("FirstName", "First Name is required.");
   Validation.RequireField("LastName", "Last Name is required.");
   Validation.RequireField("Address", "Address is required.");
   
   var FirstName = "";
   var LastName = "";
   var Address = "";
   var CustomerId = UrlData[0];

   if (CustomerId.IsEmpty()) {
      Response.Redirect("~/EditCustomers");
   }
   var db = Database.Open("WebPagesCustomers");
   
   if (IsPost && Validation.IsValid()) {
      var updateQueryString = "UPDATE Customers SET FirstName = @0, LastName = @1,
         Address = @2 WHERE Id = @3" ;
      FirstName = Request["FirstName"];
      LastName = Request["LastName"];
      Address = Request["Address"];
      db.Execute(updateQueryString, FirstName, LastName, Address, CustomerId);
      
      // Display the page that lists products.
      Response.Redirect(@Href("~/EditCustomers"));
   } else {
      var selectQueryString = "SELECT * FROM Customers WHERE ID = @0";
      var row = db.QuerySingle(selectQueryString, CustomerId);
      FirstName = row.FirstName;
      LastName = row.LastName;
      Address = row.Address;
   }
}

<!DOCTYPE html>
<html>
   <head>
      <title>Update Customer</title>
      <style type = "text/css">
         label {
            float:left; 
            width: 8em; 
            text-align: right;
            margin-right: 0.5em;
         }
         fieldset {
            padding: 1em; 
            border: 1px solid; 
            width: 50em;
         }
         legend {
            padding: 2px 4px; 
            border: 1px solid; 
            font-weight:bold;
         }
         .validation-summary-errors {
            font-weight:bold; 
            color:red;
            font-size: 11pt;
         }
      </style>
   
   </head>
   <body>
      <h1>Update Customer</h1>
      @Html.ValidationSummary("Errors with your submission:")
      
      <form method = "post" action = "">
         <fieldset>
            <legend>Update Customer</legend>
            <div>
               <label>First Name:</label>
               <input name = "FirstName" type = "text" size = "50" value = "@FirstName"/>
            </div>
            
            <div>
               <label>Last Name:</label>
               <input name = "LastName" type = "text" size = "50" value = "@LastName" />
            </div>
            
            <div>
               <label>Address:</label>
               <input name = "Address" type = "text" size = "50" value = "@Address" />
            </div>
            
            <div>
               <label> </label>
               <input type = "submit" value = "Save" class = "submit" />
            </div>
         
         </fieldset>
      </form>
   
   </body>
</html>

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

如您所見，它與**ListCustomer**頁面相同，但每個記錄都額外增加了“編輯”連結。現在讓我們點選任何客戶的“編輯”連結，例如第一個，您將看到以下頁面。

讓我們將第一個名字從Allan更改為Steve，然後點選“儲存”。

您將看到以下頁面，其中包含更新後的第一個名字，現在位於末尾，因為我們已根據第一個名字對列表進行了排序。

ASP.NET 網頁 - 刪除資料庫資料

在本章中，我們將介紹如何刪除現有的資料庫記錄。本主題與上一章類似，只是 - 我們將刪除記錄而不是更新記錄。刪除和更新過程幾乎相同，只是刪除更簡單。此示例還將包含兩個網頁。

在第一個頁面上，使用者將選擇要刪除的記錄。
在第二個頁面上，將顯示要刪除的記錄，以便使用者確認他/她是否要刪除該記錄。

如何刪除資料庫記錄？

讓我們看看一個簡單的示例，在這個示例中，我們將刪除現有的資料庫記錄。首先，我們需要建立一個新的CSHTML頁面。

在“名稱”欄位中輸入**ListCustomersForDelete.cshtml**，然後點選“確定”。

現在將以下程式碼替換到ListCustomersForDelete.cshtml檔案中。

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

<!DOCTYPE html>
<html>
   
   <head>
      <title>Delete a Customer</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>
   
   </head>
   <body>
      <h1>Delete a Customer</h1>
      
      <table>
         <thead>
            <tr>
               <th> </th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Address</th>
            </tr>
         </thead>
         
         <tbody>
            @foreach(var row in db.Query(selectQueryString)){
               <tr>
                  <td><a href = "@Href("~/DeleteCustomer", row.Id)">Delete</a></td>
                  <td>@row.FirstName</td>
                  <td>@row.LastName</td>
                  <td>@row.Address</td>
               </tr>
            }
         </tbody>
      </table>
   
   </body>
</html>

如您所見，以上頁面類似於EditCustomers.cshtml頁面，唯一的區別是，它沒有為每個客戶顯示“編輯”連結。使用以下程式碼新增“刪除”連結。完成後，它將顯示一個“刪除”連結，該連結將有助於刪除選定的記錄。

<td><a href = "@Href("~/DeleteCustomer", row.Id)">Delete</a></td>

從資料庫中刪除客戶

我們應該從建立一個CHMTL檔案開始，如下面的螢幕截圖所示。

在“名稱”欄位中輸入**DeleteCustomer.cshtml**，然後點選“確定”。現在用以下程式碼替換DeleteCustomer.cshtml檔案。

@{
   var db = Database.Open("WebPagesCustomers");
   var CustomerId = UrlData[0];
   
   if (CustomerId.IsEmpty()) {
      Response.Redirect("~/ListCustomersForDelete");
   }
   var customer = db.QuerySingle("SELECT * FROM CUSTOMERS WHERE ID = @0", CustomerId);
   
   if( IsPost && !CustomerId.IsEmpty()) {
      var deleteQueryString = "DELETE FROM Customers WHERE Id=@0";
      db.Execute(deleteQueryString, CustomerId);
      Response.Redirect("~/ListCustomersForDelete");
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Delete Customer</title>
   </head>
   
   <body>
      <h1>Delete Customer - Confirmation</h1>
      
      <form method = "post" action = "" name = "form">
         <p>Are you sure you want to delete the following Customer?</p>
         <p>FirstName: @customer.FirstName <br />
         LastName: @customer.LastName <br />
         Address: @customer.Address</p>
         <p><input type = "submit" value = "Delete" /></p>
      </form>
   
   </body>
</html>

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

如您所見，資料庫中所有客戶以及每個客戶的“刪除”連結。讓我們選擇Kerry Hill的“刪除”連結，您將看到以下頁面。

該客戶的所有資訊都顯示在此處。當您點選“刪除”按鈕時，該客戶將從資料庫中刪除。

讓我們點選“刪除”按鈕，您將看到它已從資料庫中刪除，如下面的螢幕截圖所示。

現在資料庫中只有兩條記錄。

ASP.NET 網頁 - WebGrid

在資料庫的前幾章中，我們透過使用Razor程式碼並自己進行HTML標記來顯示資料庫資料。但在使用Razor的ASP.NET Web Pages中，我們還有更簡單的方法來顯示資料，即使用**WebGrid幫助器**。

此幫助器可以為您呈現一個顯示資料的HTML表格。
此幫助器支援用於格式化、建立瀏覽資料的方式的選項。
在WebGrid幫助器中，您只需點選列標題即可對資料進行排序。

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

使用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列中的資料現在以斜體格式顯示。

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

@{
   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**，您將看到以下網頁。

ASP.NET 網頁 - 圖表

在本章中，我們將介紹圖表幫助器以及如何在圖表上顯示資料。在上一章中，我們已在WebGrid幫助器上顯示了資料。**圖表幫助器**可用於以**圖形格式**顯示資料。

圖表幫助器可以呈現一個影像，該影像以各種圖表型別顯示資料。
它還可以支援不同的格式化和標籤選項。
它能夠呈現30多種您可能在Microsoft Office中見過的圖表型別，例如**面積圖、條形圖、柱形圖**等。
圖表顯示資料以及其他元素，如**圖例、軸、系列**等。
您在圖表中顯示的資料可以來自陣列、資料庫返回的結果或XML檔案中的資料。

如何在圖表上顯示資料？

讓我們看看一個簡單的示例，在這個示例中，我們將資料顯示在圖表上。因此，首先我們需要建立一個新的CSHTML檔案。

在“名稱”欄位中輸入**Charts.cshtml**，然後點選“確定”，然後將以下程式碼替換到Charts.cshtml檔案中。

@{
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks (%)")
   .AddSeries(
      name: "Student",
      xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
      yValues: new[] { "79", "53", "73", "81", "43" })
   .Write();
}

如您在上面的程式碼中所見，它首先將建立一個新圖表，並設定其寬度和高度。

var myChart = new Chart(width: 600, height: 400)

您可以使用**AddTitle**方法指定圖表標題，如下面的程式碼所示。

.AddTitle("Student Marks (%)")

**AddSeries**方法可用於新增資料，然後將值分配給AddSeries方法的xValue和yValues引數。name引數顯示在圖表圖例中。

.AddSeries(
   name: "Student",
   xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
   yValues: new[] { "79", "53", "73", "81", "43" })

xValue引數包含一個數據陣列，該陣列將顯示在圖表的水平軸上，而yValues引數包含一個數據陣列，該陣列將用於繪製圖表的垂直點。

**Write方法**實際上呈現圖表。在這種情況下，因為您沒有指定圖表型別，所以Chart幫助器呈現其預設圖表，即柱形圖。

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

現在讓我們看看另一個示例，在這個示例中，我們將使用資料庫查詢檢索資料，然後將該資料顯示在圖表上。因此，首先我們需要向我們的資料庫新增另一個Student表，如下面的螢幕截圖所示。

現在讓我們向Students表中新增一些資料，如下面的螢幕截圖所示。

如您所見，現在我們有了Students資料。

現在要將此資料顯示在圖表上，讓我們建立一個新的CSHTML檔案。

在“名稱”欄位中輸入**ChartDataUsingDB.cshtml**，然後點選“確定”，然後替換ChartDataUsingDB.cshtml檔案中的所有程式碼。

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();
}

如您在上面的程式碼中所見，它首先將開啟**WebPagesCustomers**資料庫，然後將其分配給一個名為db的變數。

var db = Database.Open("WebPagesCustomers");

接下來，建立一個簡單的SQL查詢，該查詢將從Students表中檢索FirstName和Marks。

var data = db.Query("SELECT FirstName, Marks FROM Students");

然後建立一個新圖表，並透過呼叫圖表的**DataBindTable**方法將其傳遞給它。

var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();

此方法有兩個引數

**dataSource**引數用於查詢中的資料。
**xField**引數允許您設定哪個資料列用於圖表的x軸。

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

您可以使用AddSeries方法而不是DataBindTable，並且您還可以在AddSeries方法中指定圖表型別引數，如下面的程式碼所示。

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
      .AddTitle("Student Marks")
      .AddSeries("Default", chartType: "Pie",
      xValue: data, xField: "FirstName",
      yValues: data, yFields: "Marks")
      .Write();
}

現在讓我們再次執行應用程式並指定以下URL - **https://:36905/ChartDataUsingDB**，您將看到以下網頁。

您還可以透過在建立圖表時簡單地指定theme引數來更改圖表的主題，如下面的程式碼中所述。

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)

現在讓我們再次執行此應用程式並指定以下URL - **https://:36905/ChartDataUsingDB**，您將看到以下網頁。

ASP.NET 網頁 - 處理檔案

在本章中，我們將介紹如何在您的網站中使用文字檔案。您可以使用文字檔案作為儲存網站資料的簡單方法。

文字檔案可以採用不同的格式，例如*.txt、*.xml或*.csv。
您可以使用**File.WriteAllText**方法指定要建立的檔案，然後向其中寫入資料。
您可以讀取/寫入和移動文字檔案中的資料。

將資料寫入檔案

讓我們看看一個簡單的示例，在這個示例中，我們將把學生資訊寫入文字檔案。首先，我們需要建立一個新的CSHTML檔案

在名稱欄位中輸入TextData.cshtml，然後單擊“確定”繼續。在本例中，我們將建立一個簡單的表單，使用者可以在其中輸入學生資訊，例如名、姓和分數。

我們還需要在App_Data資料夾中建立一個名為Data.txt的文字檔案。

讓我們替換TextData.cshtml檔案中的以下程式碼。

@{
   var result = "";
   
   if (IsPost){
      var firstName = Request["FirstName"];
      var lastName = Request["LastName"];
      var marks = Request["Marks"];
      var userData = firstName + "," + lastName + "," + marks + Environment.NewLine;
      var dataFile = Server.MapPath("~/App_Data/Data.txt");
      File.WriteAllText(@dataFile, userData);
      result = "Information saved.";
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Write Data to a File</title>
   </head>
   
   <body>
      <form id = "form1" method = "post">
         
         <div>
            <table>
               <tr>
                  <td>First Name:</td>
                  <td><input id = "FirstName" name = "FirstName" type = "text" /></td>
               </tr>
               
               <tr>
                  <td>Last Name:</td>
                  <td><input id = "LastName" name = "LastName" type = "text" /></td>
               </tr>
               
               <tr>
                  <td>Marks:</td>
                  <td><input id = "Marks" name = "Marks" type = "text" /></td>
               </tr>
              
               <tr>
                  <td></td>
                  <td><input type="submit" value="Submit"/></td>
               </tr>
            </table>
         
         </div>
         
         <div>
            @if(result != ""){
               <p>Result: @result</p>
            }
         </div>
      
      </form>
      
   </body>
</html>

在程式碼中，我們使用了IsPost屬性來確定頁面是否已提交，然後才開始處理。File物件的WriteAllText方法接受兩個引數，檔名路徑和要寫入檔案的資料。

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

讓我們在所有欄位中輸入一些資料。

現在單擊“提交”按鈕。

如您所見，資訊已儲存，現在讓我們開啟Data.txt檔案，您將看到資料已寫入檔案。

將資料追加到現有檔案

為了將資料寫入文字檔案，我們使用了WriteAllText。如果您再次呼叫此方法並傳遞相同的檔名，它將完全覆蓋現有檔案。但在大多數情況下，我們通常希望將新資料新增到檔案的末尾，因此我們可以使用檔案物件的AppendAllText方法來實現。

讓我們看一下相同的示例，我們只需將WriteAllText()更改為AppendAllText()，如下面的程式所示。

@{
   var result = "";
   
   if (IsPost){
      var firstName = Request["FirstName"];
      var lastName = Request["LastName"];
      var marks = Request["Marks"];
      var userData = firstName + "," + lastName + "," + marks + Environment.NewLine;
      var dataFile = Server.MapPath("~/App_Data/Data.txt");
      File.AppendAllText(@dataFile, userData);
      result = "Information saved.";
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Write Data to a File</title>
   </head>
   
   <body>
      <form id = "form1" method = "post">
         <div>
            
            <table>
               <tr>
                  <td>First Name:</td>
                  <td><input id = "FirstName" name = "FirstName" type = "text" /></td>
               </tr>
               
               <tr>
                  <td>Last Name:</td>
                  <td><input id = "LastName" name = "LastName" type = "text" /></td>
               </tr>
               
               <tr>
                  <td>Marks:</td>
                  <td><input id = "Marks" name = "Marks" type = "text" /></td>
               </tr>
               
               <tr>
                  <td></td>
                  <td><input type = "submit" value = "Submit"/></td>
               </tr>
            </table>
         </div>
         
         <div>
            @if(result != ""){
               <p>Result: @result</p>
            }
         </div>
      
      </form>
      
   </body>
</html>

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

輸入一些資料並單擊“提交”按鈕。

現在，當您開啟Data.txt檔案時，您將看到資料已追加到該檔案的末尾。

從檔案讀取資料

要從檔案讀取資料，您可以使用File物件，然後呼叫ReadAllLines()，它將讀取檔案中的所有行。為此，讓我們建立一個新的CSHTML檔案。

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

現在替換ReadData.cshtml檔案中的以下程式碼。

@{
   var result = "";
   Array userData = null;
   char[] delimiterChar = {','};
   var dataFile = Server.MapPath("~/App_Data/Data.txt");
   
   if (File.Exists(dataFile)) {
      userData = File.ReadAllLines(dataFile);
      if (userData == null) {
         // Empty file.
         result = "The file is empty.";
      }
   } else {
      // File does not exist.
      result = "The file does not exist.";
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Reading Data from a File</title>
   </head>
   
   <body>
      <div>
         <h1>Reading Data from a File</h1>
         @result
         
         @if (result == "") {
            <ol>
               @foreach (string dataLine in userData) {
                  <li>
                     Student
                     <ul>
                        @foreach (string dataItem in dataLine.Split(delimiterChar)) {
                           <li>@dataItem</li >
                        }
                     </ul>
                  </li>
               }
            </ol>
         }
      </div>
   
   </body>
</html>

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

ASP.NET 網頁 - 處理影像

在本章中，我們將討論如何在您的網站上新增和顯示影像。在開發網站時，您可以將影像新增到您的網站和各個頁面。如果影像已存在於您的網站上，則可以使用HTML <img> 標籤在頁面上顯示它。

動態顯示影像

讓我們透過在專案中建立一個新資料夾並將其命名為Images，然後在該資料夾中新增一些影像來了解一個簡單的示例。

現在新增另一個cshtml檔案，並將其命名為DynamicImages.cshtml。

單擊“確定”，然後替換DynamicImages.cshtml檔案中的以下程式碼。

@{
   var imagePath = "";
   if (Request["Choice"] != null){ imagePath = "images/" + Request["Choice"]; }
}

<!DOCTYPE html>
<html>
   
   <body>
      <h1>Display Images</h1>
      <form method = "post" action = "">
         I want to see:
         
         <select name = "Choice">
            <option value = "index.jpg">Nature 1</option>
            <option value = "index1.jpg">Nature 2</option>
            <option value = "index2.jpg">Nature 3</option>
         </select>
         
         <input type = "submit" value = "Submit" />
         
         @if (imagePath != ""){
            <p><img src = "@imagePath" alt = "Sample" /></p>
         }
      </form>
   
   </body>
</html>

如您所見，頁面的主體包含一個下拉列表，它是一個<select> 標籤，名為Choice。該列表有三個選項，每個列表選項的value屬性都包含已放入images資料夾中的某個影像的名稱。

在上面的程式碼中，列表允許使用者選擇一個友好的名稱，例如Nature 1，然後在提交頁面時傳遞.jpg 檔名。

在程式碼中，您可以透過讀取Request["Choice"]來獲取使用者在列表中的選擇。首先，它將檢視是否存在任何選擇，然後它將為影像設定一個路徑，該路徑包含影像的資料夾名稱和使用者的影像檔名。

讓我們執行應用程式並指定以下 URL：https://:36905/DynamicImages，然後您將看到以下輸出。

讓我們單擊“提交”按鈕，您將看到index.jpg檔案已載入到頁面上，如下面的螢幕截圖所示。

如果您想從下拉列表中選擇另一張照片，例如Nature 2，則單擊“提交”按鈕，它將更新頁面上的照片。

上傳影像

只有當影像存在於您的網站上時，您才能動態顯示它，但有時您需要顯示不在您的網站上的影像。因此，您需要先上傳它，然後才能在您的網頁上顯示該影像。

讓我們來看一個簡單的示例，我們將上傳影像，首先我們將建立一個新的CSHTML檔案。

在“名稱”欄位中輸入UploadImage.cshtml，然後單擊“確定”。現在讓我們替換UploadImage.cshtml檔案中的以下程式碼

@{ WebImage photo = null;
   var newFileName = "";
   var imagePath = "";
   
   if(IsPost){
      photo = WebImage.GetImageFromRequest();
      
      if(photo != null){
         newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;
            photo.Save(@"~\" + imagePath);
      }
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Image Upload</title>
   </head>
   
   <body>
      <form action = "" method = "post" enctype = "multipart/form-data">
         
         <fieldset>
            <legend> Upload Image </legend>
            <label for = "Image">Image</label>
            <input type = "file" name = "Image" size = "35"/>
            <br/>
            <input type = "submit" value = "Upload" />
         </fieldset>
      
      </form>
      <h1>Uploaded Image</h1>
      
      @if(imagePath != ""){
         <div class = "result"><img src = "@imagePath" alt = "image" /></div>
      }
   </body>

</html>

讓我們執行此應用程式並指定以下 URL：https://:36905/UploadImage，然後您將看到以下輸出。

要上傳影像，請單擊選擇檔案，然後瀏覽到要上傳的影像。選擇影像後，影像的名稱將顯示在“選擇檔案”按鈕旁邊，如下面的螢幕截圖所示。

如您所見，已選擇images.jpg影像，讓我們單擊“上傳”按鈕上傳影像。

ASP.NET 網頁 - 處理影片

在本章中，我們將介紹如何在您的網頁上顯示影片。在ASP.NET中，您可以輕鬆播放Flash（*.swf）、Media Player（*.wmv）和Silverlight（*.xap）影片。

有時您可能需要在您的網站上顯示影片。
您可以透過連結到已包含影片的網站（如YouTube、Dailymotion等）來顯示影片。
要將這些網站上的影片直接嵌入到您自己的頁面中，您需要從網站獲取HTML標記，然後將其複製到您的頁面中。

如何嵌入影片？

讓我們來看一個簡單的示例，我們將從YouTube嵌入影片。首先，我們需要建立一個新的CSHTML檔案。

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

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>Embedded Video Example</title>
   </head>
   
   <body>
      <h1>Embedded Video Example</h1>
      <p>The following video provides an introduction to WebMatrix:</p>
      
      <iframe 
         width = "560" 
         height = "315" 
         src = "http://www.youtube.com/embed/fxCEcPxUbYA"
         frameborder  ="0" 
         allowfullscreen>\
      </iframe>
   
   </body>
</html>

讓我們執行應用程式並指定以下 URL：https://:36905/embededvideo，然後您將看到以下輸出。

您現在可以簡單地播放影片。

選擇播放器

如果您想播放存在於您自己網站上的影片。您可以使用Video幫助器在頁面中直接呈現媒體播放器來播放來自您網站的影片。

如您所知，影片檔案有很多格式，每種格式通常需要不同的播放器和不同的配置方式。
在ASP.NET Razor頁面中，您可以使用Video幫助器在網頁中播放影片。
Video幫助器簡化了在網頁中嵌入影片的過程，因為它會自動生成物件並嵌入通常用於將影片新增到頁面的HTML元素。

Video幫助器支援以下媒體播放器：

Adobe Flash
Windows Media Player
Microsoft Silverlight

使用Windows Media Player顯示影片

讓我們來看一個簡單的示例，我們將使用Windows Media Player在我們的網頁上顯示影片。首先，我們將建立一個新的CSHTML檔案。

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

現在讓我們在您的網站中建立一個新資料夾，並將其命名為Media，然後新增要放在網頁上播放的影片檔案，如下面的螢幕截圖所示。

現在替換FlashPlayer.cshtml檔案中的以下程式碼。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Flash Video</title>
   </head>
   
   <body>
      @Video.Flash(path: "Media/Intro_WebMatrix.swf",
      width: "400",
      height: "600",
      play: true,
      loop: true,
      menu: false,
      bgColor: "red",
      quality: "medium",
      scale: "exactfit",
      windowMode: "transparent")
   </body>

</html>

當您執行此應用程式並指定以下 URL：https://:36905/MediaPlayer時，您將看到以下錯誤。

這是因為我們還沒有安裝Web幫助器。為此，讓我們從WebMatrix開啟NuGet。

搜尋ASP.NET Web Helpers Library，然後單擊“安裝”。安裝成功完成後，您可以透過指定相同的URL再次執行您的應用程式，您將看到它將使用Windows Media Player播放影片。

同樣，您也可以使用Silverlight播放器和Flash播放器在您的網頁上顯示影片。

ASP.NET 網頁 - 新增電子郵件

在本章中，我們將介紹如何在網站中新增電子郵件以及如何從您的網頁傳送電子郵件。您可能需要從您的網站傳送電子郵件的原因有很多。

您可以向用戶傳送確認訊息。
您還可以向自己傳送通知。例如，當有新使用者在網站上註冊時。

使用WebMail幫助器傳送電子郵件非常容易。要使用此WebMail幫助器，您必須能夠訪問SMTP伺服器（SMTP代表簡單郵件傳輸協議）。

SMTP伺服器是一種僅將郵件轉發到收件人伺服器的郵件伺服器。
如果您為您的網站使用託管服務提供商，則他們將設定您的電子郵件，並且可以告訴您您的SMTP伺服器名稱。
如果您在公司網路內部工作，管理員或您的IT部門通常可以為您提供有關您可以使用的SMTP伺服器的資訊。
如果您在家工作，您甚至可能能夠使用您的普通電子郵件提供商進行測試，他們可以告訴您他們的SMTP伺服器名稱。

要使用SMTP伺服器，您將需要以下內容：

SMTP伺服器的名稱。
埠號大多為25。但是，您的ISP可能要求您使用埠587。
憑據，例如使用者名稱、密碼。

讓我們來看一個簡單的示例，我們將傳送電子郵件。首先，我們需要建立一個新的CSHTML檔案。

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

現在替換EmailRequest.cshtml檔案中的以下程式碼。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Request for Assistance</title>
   </head>
   
   <body>
      <h2>Submit Email Request for Assistance</h2>
      <form method = "post" action = "ProcessRequest.cshtml">
         <div>
            Your name:
            <input type = "text" name = "customerName" />
         </div>
         
         <div>
            Your email address:
            <input type = "text" name = "customerEmail" />
         </div>
         
         <div>
            Details about your problem: <br />
            <textarea name = "customerRequest" cols = "45" rows = "4"></textarea>
         </div>
         
         <div>
            <input type = "submit" value = "Submit" />
         </div>
      </form>
   
   </body>
</html>

如您在上面的程式碼中看到的，表單的action屬性設定為ProcessRequest.cshtml，這意味著表單將提交到該頁面。因此，讓我們建立另一個CSHTML檔案ProcessRequest.cshtml並替換以下程式碼。

@{
   var customerName = Request["customerName"];
   var customerEmail = Request["customerEmail"];
   var customerRequest = Request["customerRequest"];
   var errorMessage = "";
   var debuggingFlag = false;
   
   try {
      // Initialize WebMail helper
      WebMail.SmtpServer = "smtp.mail.yahoo.com";
      WebMail.SmtpPort = 465;
      WebMail.UserName = "waqasm78@yahoo.com";
      WebMail.Password = "**********";
      WebMail.From = "waqasm78@yahoo.com";
      
      // Send email
      WebMail.Send(to: customerEmail,
         subject: "Help request from - " + customerName,
         body: customerRequest
      );
   }catch (Exception ex ) {
      errorMessage = ex.Message;
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Request for Assistance</title>
   </head>
   
   <body>
      <p>Sorry to hear that you are having trouble, <b>@customerName</b>.</p>
      
      @if(errorMessage == ""){
         <p>An email message has been sent to our customer service department regarding 
            the following problem:</p>
         <p><b>@customerRequest</b></p>
      } else{
         <p><b>The email was <em>not</em> sent.</b></p>
         <p>Please check that the code in the ProcessRequest page has 
            correct settings for the SMTP server name, a user name, 
            a password, and a "from" address.</p>
         
         if(debuggingFlag){
            <p>The following error was reported:</p>
            <p><em>@errorMessage</em></p>
         }
      }
   
   </body>
</html>

如果您使用的是雅虎電子郵件提供商，則需要替換上述程式中的以下程式碼才能使其執行。

// Initialize WebMail helper
   WebMail.SmtpServer = "smtp.mail.yahoo.com";
   WebMail.SmtpPort = 465;
   WebMail.UserName = "waqasm78@yahoo.com";
   WebMail.Password = "**********";
   WebMail.From = "waqasm78@yahoo.com";

您需要在WebMail.Password屬性中鍵入您自己的密碼。

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

現在在所有提到的欄位中輸入一些資訊，如下面的螢幕截圖所示。

單擊“提交”，然後在成功傳送電子郵件時，您將看到以下訊息。

ASP.NET 網頁 - 新增搜尋

在本章中，我們將介紹如何使用Microsoft Bing搜尋引擎在您的網站中新增搜尋功能。向您的網站新增搜尋功能非常容易，您可以使用Bing幫助器並指定要搜尋的網站的URL。Bing幫助器呈現一個文字框，使用者可以在其中輸入搜尋詞。

透過新增搜尋功能，您還可以包含Internet搜尋結果，而無需離開您的網站。您可以按以下方式使用搜索選項：

新增一個搜尋對話方塊，使用者可以在其中僅搜尋您的網站，這使得使用者可以輕鬆地在您的網站上查詢內容。
新增一個框，允許使用者輕鬆搜尋相關網站。
新增一個框，允許使用者搜尋網路，但無需離開您的網站。這可以透過在另一個視窗中啟動搜尋來完成。

您可以在您的網站中使用兩種型別的搜尋選項。

簡單搜尋
高階搜尋

簡單搜尋

在此簡單搜尋選項中，幫助器會呈現一個包含Bing搜尋圖示的框，使用者可以單擊該圖示以啟動搜尋。

在簡單搜尋中，幫助器還將呈現單選按鈕，使用者可以在其中指定是僅搜尋指定的網站還是整個網路。
當用戶提交搜尋時，簡單選項會將搜尋重定向到必應網站 - http://bing.com。
然後，結果將在新的瀏覽器視窗中顯示，就像使用者在必應主頁上搜索一樣。

高階搜尋

在高階選項中，助手將渲染一個沒有單選按鈕的搜尋框。在這種情況下，助手獲取搜尋結果，然後對其進行格式化並在該頁面上顯示，而不是僅僅重定向到必應網站。

讓我們透過建立一個新的CSHTML檔案來了解一個簡單的搜尋示例。

在“名稱”欄位中輸入Search.cshtml檔案，然後單擊“確定”。

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

<!DOCTYPE html>
<html>
   
   <head>
      <title>Custom Bing Search Box</title>
   </head>
   
   <body>
      <div>
         <h1>Simple Search</h1>
         <p>The simple option displays results by opening a new browser window 
            that shows the Bing home page.</p>
         Search the ASP.NET site: <br/>
         @Bing.SearchBox(siteUrl: "www.asp.net")
      </div>
   
   </body>
</html>

如您在上面的程式碼中看到的，@Bing.SearchBox()中的siteUrl引數是可選的，這意味著您可以指定使用者可以選擇搜尋哪個網站。如果您未指定URL，則必應將搜尋網路。

您可以看到我們指定了www.asp.net網站，因此它將搜尋該網站，但是如果您想搜尋自己的網站，則需要指定該URL而不是www.asp.net。

讓我們執行應用程式並指定以下url - https://:36905/Search，您將看到以下輸出。

讓我們在搜尋框中輸入一些文字進行搜尋。

按回車鍵，您將看到Microsoft必應主頁在新標籤頁中開啟。

向網站新增社交網路功能

如今，您會發現許多網站已經集成了社交網路服務，以使其網站更受歡迎和有趣。在本章中，您將學習如何將社交網路整合到網站中。

當人們訪問您的網站並且他們喜歡您網站上的某些內容時，他們通常會希望與朋友分享。
為了方便使用者，您可以簡單地顯示一些圖示，使用者可以點選這些圖示來分享頁面或在任何社交網路網站（如Facebook、Twitter等）上釋出。
要顯示這些字形或圖示，您可以將LinkShare助手新增到頁面中。
如果訪問您頁面的使用者在該社交網路網站上擁有帳戶，則他們可以點選單個字形/圖示，然後他們可以在該網站上釋出到您頁面或帖子的連結。

讓我們來看一個簡單的例子，在其中我們將為我們的網頁新增社交網路網站的選項。首先，我們需要建立一個新的CSHTML檔案。

在“名稱”欄位中輸入LinkSharePage.cshtml，然後單擊“確定”。替換LinkSharePage.cshtml檔案中的以下程式碼

<!DOCTYPE html>
<html>
   
   <head>
      <title>LinkShare Example</title>
   </head>
   
   <body>
      <h1>LinkShare Example</h1>
      Share: @LinkShare.GetHtml("LinkShare Example")
   </body>
      
</html>

讓我們執行應用程式並指定以下url - https://:36905/LinkSharePage，您將看到以下輸出。

讓我們點選Twitter圖示，您將在新標籤頁中看到以下Twitter登入頁面。

遊戲卡

當人們線上玩Microsoft Xbox遊戲時，每個使用者都有一個唯一的ID。每個玩家的統計資料都以遊戲卡的形式儲存，其中顯示了他們的聲譽、遊戲得分和最近玩的遊戲。如果您是Xbox遊戲玩家，則可以使用GamerCard助手在您網站的頁面上顯示您的遊戲卡。

讓我們來看一個簡單的例子，在其中我們將顯示一張遊戲卡，首先我們需要建立一個新的CSHTML檔案

在“名稱”欄位中輸入GameCard.cshtml，然後單擊“確定”，然後替換以下程式碼。

<html>
   <head>
      <title>Xbox Gamer Card</title>
   </head>
   
   <body>
      <h1>Xbox Gamer Card</h1>
      @GamerCard.GetHtml("major nelson")
   </body>
   
</html>

讓我們執行應用程式，您將看到以下輸出。

ASP.NET 網頁 - 快取

當有人從您的網站請求頁面時，Web伺服器必須執行一些工作才能滿足該請求。因此，伺服器可能需要執行需要很長時間的任務，例如從資料庫中檢索資料。

在某些情況下，如果您的網站流量很大，一系列導致Web伺服器執行復雜或緩慢任務的單個請求可能會累積成大量的工作。
這最終會影響網站的效能。
提高網站效能的一種方法是快取資料。
當您的網站收到對相同資訊的重複請求時，並且該資訊不需要為每個人修改，並且它不是時間敏感的，因此，您可以先獲取一次資料，然後儲存結果，而不是重新獲取或重新計算它。
下次收到對該資訊的請求時，您只需從快取中獲取它。

如何快取資料？

讓我們來看一個簡單的例子，在其中我們將首次載入頁面時快取資料。因此，讓我們建立一個名為WebCache.cshtml的新CSHTML檔案，並替換以下程式碼。

@{
   var cacheItemKey = "CachedTime";
   var cacheHit = true;
   var time = WebCache.Get(cacheItemKey);
   
   if (time == null){
      cacheHit = false;
   }
   
   if (cacheHit == false){
      time = @DateTime.Now;
      WebCache.Set(cacheItemKey, time, 1, false);
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>WebCache Helper Sample</title>
   </head>
   
   <body>
      <div>
         @if (cacheHit){
            @:Found the time data in the cache.
         } else {
            @:Did not find the time data in the cache.
         }
      </div>
      
      <div>
         This page was cached at @time.
      </div>
   
   </body>
</html>

如您在上面的程式碼中看到的，當我們快取資料時，我們將使用一個在整個網站中唯一的名稱將其放入快取中。在這種情況下，我們將使用名為CachedTime的快取條目。這是cacheItemKey。
程式碼首先讀取CachedTime快取條目。如果返回了一個值，則程式碼只需將time變數的值設定為快取資料。
但是，如果快取條目不存在，則程式碼設定time值，將其新增到快取中，並將過期值設定為一分鐘。
WebCache.Set(cacheItemKey, time, 1, false)顯示瞭如何將當前時間值新增到快取中並將其過期時間設定為1分鐘。

讓我們執行應用程式並指定以下url - https://:50180/WebCache.cshtml，您將看到以下頁面。

現在讓我們在一分鐘內重新整理您的頁面，您將看到相同的時間，這是因為時間是從快取中載入的。

ASP.NET 網頁 - 安全性

在本章中，我們將介紹如何保護網站，以便某些頁面僅對登入的使用者可用。要保護您的網站，您可以使您的網站能夠讓使用者登入。出於多種原因，保護您的網站可能很有用。

您的網站可能有一些頁面，這些頁面應該只對會員開放。
有時您需要使用者登入才能向您的網站傳送反饋或留下評論。
如果使用者未登入，他們仍然可以瀏覽某些頁面，但並非所有頁面。
未登入的使用者稱為匿名使用者。

如何使用身份驗證保護網站？

使用者首先需要在您的網站上註冊，然後才能登入到該網站。要在網站上註冊，使用者需要一個使用者名稱和一個電子郵件地址以及密碼，以確認使用者就是他們聲稱的那個人。這個登入和確認使用者身份的過程稱為身份驗證。

WebMatrix提供了一個稱為Starter Site的內建模板來建立網站，其中包含以下屬性。

一個可以儲存使用者使用者名稱和密碼的資料庫。
使用者可以在其中註冊的註冊頁面。
一個登入/登出頁面。
一個密碼恢復和重置頁面。

讓我們透過建立一個新的Starter Site來了解一個簡單的例子。

在“站點名稱”欄位中輸入SecurityDemo，然後單擊“下一步”。這將安裝並配置所需的軟體包。

安裝完成後，讓我們執行應用程式，您將看到以下網頁。

如您所見，頁面右上角有兩個按鈕“註冊”和“登入”。

讓我們點選“註冊”連結，您將看到以下網頁，您可以在其中透過提供以下資訊進行註冊。

這是位於站點上的Account資料夾下的Register.cshtml檔案的實現。

@* 如果您使用捆綁，請刪除此部分 *@

@section Scripts {
   <script src = "~/Scripts/jquery.validate.min.js"></script>
   <script src = "~/Scripts/jquery.validate.unobtrusive.min.js"></script>
}
@{
   Layout = "~/_SiteLayout.cshtml";
   Page.Title = "Register";
   
   // Initialize general page variables
   var email = "";
   var password = "";
   var confirmPassword = "";
   
   // Setup validation
   Validation.RequireField("email", "You must specify an email address.");
   Validation.RequireField("password", "Password cannot be blank.");
   Validation.Add("confirmPassword",
   Validator.EqualsTo("password", "Password and confirmation password do not match."));
   Validation.Add("password",
      Validator.StringLength(
         maxLength: Int32.MaxValue,
         minLength: 6,
         errorMessage: "Password must be at least 6 characters"));
   
   // If this is a POST request, validate and process data
   if (IsPost) {
      AntiForgery.Validate();
      email = Request.Form["email"];
      password = Request.Form["password"];
      confirmPassword = Request.Form["confirmPassword"];
      
      // Validate the user's captcha answer
      // if (!ReCaptcha.Validate("PRIVATE_KEY")) {
         // ModelState.AddError("recaptcha", "Captcha response was not correct");
      // }
     
      // If all information is valid, create a new account
      if (Validation.IsValid()) {
         // Insert a new user into the database
         var db = Database.Open("StarterSite");
         
         // Check if user already exists
         var user = db.QuerySingle("SELECT Email FROM UserProfile WHERE LOWER(Email) =
            LOWER(@0)", email);
         
         if (user == null) {
            // Insert email into the profile table
            db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email);
            // Create and associate a new entry in the membership database.
            // If successful, continue processing the request
            
            try {
               bool requireEmailConfirmation = !WebMail.SmtpServer.IsEmpty();
               var token = WebSecurity.CreateAccount(email, password, 
                  requireEmailConfirmation);
               
               if (requireEmailConfirmation) {
                  var hostUrl = Request.Url.GetComponents(UriComponents.SchemeAndServer,
                     UriFormat.Unescaped);
                  var confirmationUrl = hostUrl + VirtualPathUtility.ToAbsolute
                     ("~/Account/Confirm?confirmationCode = " 
                     + HttpUtility.UrlEncode(token));
                  WebMail.Send(
                     to: email,
                     subject: "Please confirm your account",
                     body: "Your confirmation code is: " + token + ". 
                     Visit <a href = \"" + confirmationUrl + "\">" + 
                     confirmationUrl + "</a> to activate your account."
                  );
               }
               
               if (requireEmailConfirmation) {
                  // Thank the user for registering and let them know an 
                     email is on its way
                  Response.Redirect("~/Account/Thanks");
               } else {
                  // Navigate back to the homepage and exit
                  WebSecurity.Login(email, password);
                  Response.Redirect("~/");
               }
            } catch (System.Web.Security.MembershipCreateUserException e) {
               ModelState.AddFormError(e.Message);
            }
         } else {
            // User already exists
            ModelState.AddFormError("Email address is already in use.");
         }
      }
   }
}

<hgroup class = "title">
   <h1>@Page.Title.</h1>
   <h2>Create a new account.</h2>
</hgroup>

<form method = "post">
   @AntiForgery.GetHtml()
   @* If at least one validation error exists, notify the user *@
   @Html.ValidationSummary("Account creation was unsuccessful. 
      Please correct the errors and try again.", 
      excludeFieldErrors: true, htmlAttributes: null)
   
   <fieldset>
      <legend>Registration Form</legend>
      <ol>
         <li class = "email">
            <label for = "email" @if(!ModelState.IsValidField("email")){
               <text>class = "error-label"</text>}>Email address</label>
            <input type = "text" id = "email" name = "email" value = "@email"   
               @Validation.For("email") />
            
            @* Write any email validation errors to the page *@
            @Html.ValidationMessage("email")
         </li>
         
         <li class = "password">
            <label for = "password" @if(!ModelState.IsValidField("password")) {<text>
               class = "error-label"</text>}>Password</label>
            <input type = "password" id = "password" name = "password"
               @Validation.For("password") />
            
            @* Write any password validation errors to the page *@
            @Html.ValidationMessage("password")
         </li>
         
         <li class = "confirm-password">
            <label for = "confirmPassword" 
               @if(!ModelState.IsValidField("confirmPassword")) 
               {<text>class = "error-label"</text>}>Confirm password</label>
            <input type = "password" id = "confirmPassword" name = "confirmPassword"
               @Validation.For("confirmPassword") />
            
            @* Write any password validation errors to the page *@
            @Html.ValidationMessage("confirmPassword")
         </li>
         
         <li class = "recaptcha">
            <div class = "message-info">
               <p>
                  To enable CAPTCHA verification, <a href = 
                  "http://go.microsoft.com/fwlink/?LinkId=204140">install the
                  ASP.NET Web Helpers Library</a> and uncomment ReCaptcha.GetHtml 
                  and replace 'PUBLIC_KEY' with your public key. At the top of this 
                  page, uncomment ReCaptcha. Validate and replace 'PRIVATE_KEY' with 
                  your private key.Register for reCAPTCHA keys at <a href = 
                  "http://recaptcha.net"> reCAPTCHA.net</a>.
               </p>
            </div>
            @*
               @ReCaptcha.GetHtml("PUBLIC_KEY", theme: "white")
               @Html.ValidationMessage("recaptcha")
            *@
         </li>
      </ol>
      <input type = "submit" value = "Register" />
      
   </fieldset>
</form>

當您點選“註冊”按鈕時，您將再次看到主頁，但您會看到您現在已登入，並提到了您的電子郵件ID。

建立僅供會員使用的頁面

在網站中，您會希望某些頁面只能由會員訪問。ASP.NET允許您配置頁面，以便只有登入的會員才能訪問它們。通常，如果匿名使用者嘗試訪問僅供會員使用的頁面，您會將其重定向到登入頁面。

讓我們來看一個簡單的例子，在其中我們將修改關於頁面。當用戶登入時，使用者可以訪問此頁面，否則使用者將被重定向到登入頁面。因此，讓我們替換About.cshtml檔案中的以下程式碼。

@if (!WebSecurity.IsAuthenticated) {
   Response.Redirect("~/Account/Login");
}
@{
   Layout = "~/_SiteLayout.cshtml";
   Page.Title = "About My Site";
}

<hgroup class = "title">
   <h1>@Page.Title.</h1>
   <h2>Your app description page.</h2>
</hgroup>

<article>
   <p>Use this area to provide additional information.</p>
   <p>Use this area to provide additional information.</p>
   <p>Use this area to provide additional information.</p>
</article>

<aside>
   <h3>Aside Title</h3>
   <p>Use this area to provide additional information.</p>
   
   <ul>
      <li><a href = "~/">Home</a></li>
      <li><a href = "~/About">About</a></li>
      <li><a href = "~/Contact">Contact</a></li>
   </ul>

</aside>

讓我們執行應用程式，您將看到以下主頁。