ASP.NET 使用者入門

由 Tom FitzMacken

針對新的 Web 應用程式開發，我們建議 使用 Blazor。

注意

已不再建議使用 WebMatrix 做為 ASP.NET 網頁的整合式開發環境。 請使用 Visual Studio 或 Visual Studio Code。

本指引和應用程式提供 ASP.NET 網頁 (第 2 版或更新版本) 和 Razor 語法的概觀，這是用來建立動態網站的輕量型架構。 它也會介紹 WebMatrix，這是用來建立頁面和網站的工具。

程度：使用 ASP.NET 網頁的新手。
假設擁有技能：HTML、基本級階層式樣式表 (CSS)。

您將在課程集的第一個教學課程中學到的內容：

• ASP.NET 網頁技術是什麼及其用途。
• WebMatrix 是什麼。
• 如何安裝一切。
• 如何使用 WebMatrix 建立網站。

討論的功能/技術：

• Microsoft Web Platform Installer。
• WebMatrix。
• .cshtml 頁面

最初為 Mike Pope 撰寫了本教學課程。 Tom FitzMacken 已更新 Microsoft WebMatrix 3 的部分。

教學課程中使用的軟體版本

• ASP.NET 網頁 (Razor) 2
• WebMatrix 3

您應該知道什麼？

我們假設您已熟悉：

• HTML。 不需要深入的專業知識。 我們不會解釋 HTML，但我們也不會使用任何複雜的內容。 我們將提供 HTML 教學課程的連結，我們認為相當實用。
• 階層式樣式表 (CSS)。 與 HTML 相同。
• 基本資料庫概念。 如果您已將試算表用於資料，並能排序和篩選資料，這就是我們在本教學課程集普遍假設適用的專業知識等級。

我們也假設您有興趣學習基本程式設計。 ASP.NET 網頁使用稱為 C# 的程式設計語言。 您不需要在程式設計方面有任何背景，只要對它感興趣即可。 如果您之前曾經在網頁中撰寫過任何 JavaScript，就算是有充足的背景知識。

請注意，如果您熟悉程式設計，您可能會發現本教學課程集一開始會進展緩慢，這是為了讓新的程式設計人員逐漸適應進度。 不過，當我們完成前幾個教學課程後，基本程式設計內容會變少，就會以更快的速度推進。

您需要什麼？

以下是您需要的項目：

• 執行 Windows 8、Windows 7、Windows Server 2008 或 Windows Server 2012 的電腦。
• 即時網路連接。
• 管理員特殊權限 (安裝過程必要)。

什麼是 ASP.NET 網頁？

ASP.NET 網頁是可用來建立動態網頁的架構。 簡單的 HTML 網頁是靜態的；其內容取決於頁面中的固定 HTML 標記。 動態頁面就例如您使用 ASP.NET 網頁建立的頁面，可讓您使用程式碼即時建立頁面內容。

動態頁面可讓您執行各種工作。 您可以使用表單要求使用者輸入，然後變更頁面顯示的內容或外觀。 您可以從使用者取得資訊、將它儲存在資料庫中，然後稍後加以列出。 您可以從您的網站傳送電子郵件。 您可以與網路上的其他服務互動 (例如對應服務)，並整合來自這些來源資訊而產生頁面。

WebMatrix 是什麼？

WebMatrix 是一個工具，可整合網頁編輯器、資料庫公用程式、用於測試頁面的網頁伺服器，以及具備將網站發佈至網路的功能。 WebMatrix 是免費的，而且很容易安裝和易於使用。 (它也適用於純 HTML 頁面，以及 PHP 等其他技術。)

您實際上不需要使用 WebMatrix 來處理 ASP.NET 網頁。 您可以使用文字編輯器來建立頁面，例如，使用您有權存取的網頁伺服器來測試頁面。 不過，WebMatrix 讓這一切變得非常簡單，因此這些教學課程會在整個過程中使用 WebMatrix。

關於這些教學課程

本教學課程集是如何使用 ASP.NET 網頁的簡介。 此簡介教學課程集中共有 9 個教學課程。 這是一系列課程集的一部分，可引導您從 ASP.NET 網頁新手成長至建立真實、專業型的網站。

此為第一個教學課程集，著重於展示如何使用 ASP.NET 網頁的基本概念。 完成時，您可以接續本課程的結尾繼續了解其他教學課程集，可讓您深入地探索網頁。

我們會刻意在艱澀解釋上簡易說明。 在本教學課程集中，每當我們顯示某個內容時，我們一律會選擇我們認為最容易理解的方式。 稍後的教學課程集會深入探討，並示範更有效率或更有彈性的方法 (也更有趣)。 但這些教學課程會要求您先瞭解基本概念。

您剛開始的教學課程集會涵蓋 ASP.NET 網頁的這些功能：

• 簡介並安裝所有項目。 (這正是您在閱讀的教學課程。)
• ASP.NET 網頁程式設定的基本概念。
• 建立資料庫。
• 建立及處理使用者輸入表單。
• 在資料庫中加入、更新和刪除資料。

您要建立什麼？

本教學課程集和後續的教學課程都會圍繞一個網站為例，可以在其中列出您想要的電影。 您將能夠輸入電影、編輯電影，並列出它們。 以下是您將在本教學課程集中建立的幾個頁面。 第一個顯示您將建立的電影清單頁面：

以下是可讓您將新電影資訊新增至網站的頁面：

後續的教學課程集是以此課程集為基礎，並新增更多功能，例如上傳圖片、讓人們登入、傳送電子郵件，以及與社群媒體整合。

參閱此應用程式在 Azure 上執行

您想要檢視以即時 Web 應用程式執行的已完成網站嗎？ 只要按下列按鈕，即可將應用程式的完整版本部署到您的 Azure 帳戶。

您需要 Azure 帳戶，才能將此解決方案部署至 Azure。 如果您還沒有帳戶，您有以下選擇：

• 免費開設 Azure 帳戶 - 您將獲得可用於試用付費 Azure 服務的點數，即使點數用完後，您也可以保留該帳戶並使用免費的 Azure 服務。
• 啟用 MSDN訂閱者權益：MSDN 訂用帳戶會每月提供額度，讓您可使用付費型 Azure 服務。

安裝所有項目

您可以使用來自 Microsoft 的 Web Platform Installer 來安裝所有項目。 實際上是您安裝安裝程式，然後使用它來安裝其他所有項目。

若要使用網頁，您必須至少具備安裝 SP3 的 Windows XP 或 Windows Server 2008 或更新版本。

在 ASP.NET 網站的網頁頁面，按一下 [安裝]。

安裝 WebMatrix 之前，系統會要求您接受授權條款和隱私權聲明。

按一下 [執行] 以開始安裝。 (如果您要儲存安裝程式，請按一下 [儲存] 然後在儲存它的資料夾執行安裝程式。)

Web Platform Installer 隨即出現，準備好安裝 WebMatrix。 按一下 [安裝]。

安裝程式會找出電腦上必須安裝的內容，並開始流程。 視確切需安裝的專案而定，此流程可能需要一下子到幾分鐘的時間。 選取 [我接受] 以接受授權條款。

歡迎使用 WebMatrix

完成時，安裝程式可自動啟動 WebMatrix。 如果沒有，可在 Windows 中從 [開始] 功能表啟動 Microsoft WebMatrix。

當您第一次啟動 WebMatrix 時，您有機會使用您的 Microsoft 帳戶登入 Microsoft Azure。 登入後，您將會透過 Azure 收到 10 個免費的 Web 應用程式。 這些免費的 Web 應用程式提供方便的方式來測試您的應用程式。 如果您還沒有 Azure 帳戶，但擁有 MSDN 訂用帳戶，則可以 啟用您的 MSDN 訂用帳戶權益。 否則，您也只需要幾分鐘的時間，就可以建立免費試用帳戶。 如需詳細資料，請參閱 Azure 免費試用。

您現在不需要登入，即可繼續進行本教學課程。 如果您現在未登入，您仍然可以選擇稍後登入。 本教學課程系列的最後一個主題，會涵蓋如何將您的網站部署至 Azure；因此，您必須登入才能完成該主題。

現在，請登入您的 Microsoft 帳戶，或選取右下角的 [現在不要]。

首先，您將建立空白網站並新增頁面。 在本集稍後的教學課程中，您將使用其中一個內建網站範本小試身手。

在 [開始] 視窗中，按一下 [新增]。

範本是針對不同類型的網站預先建置的檔案和頁面。 若要查看預設可用的所有範本，請選取 [範本庫] 選項。

在 [快速入門] 視窗，從 ASP.NET 群組中選取 [空白網站] 並將新網站命名為「WebPagesMovies」。

按一下 [下一步] 。

如果您已登入 Microsoft 帳戶，您將有機會在 Azure 上建立網站。 根據您的網站名稱，建議使用預設名稱 WebPagesMovies.azurewebsites.net；不過，驚嘆號表示 Windows Azure 上無法使用此名稱。 為了簡單起見，請選取 [略過] 以略過立即在 Azure 上建立網站。 在此系列稍後，我們會將網站發佈至 Azure。

WebMatrix 會建立並開啟網站：

在頂端有快速存取工具列和功能區。 在左下方，您會看到您在工作之間 (網站、檔案、資料庫、報告) 切換的工作區選取器。 右側是編輯用和報告的內容窗格。 在底部，您偶爾會看到訊息的通知列。

您會在繼續這些教學課程時，深入瞭解 WebMatrix 及其功能。

建立網頁

若要熟悉 WebMatrix 和 ASP.NET 網頁，您將建立簡單的頁面。

在工作區選取器中，選取 [檔案] 工作區。 此工作區可讓您處理檔案和資料夾。 左側窗格會顯示網站的檔案結構。 功能區會變更以顯示檔案相關工作。

在功能區中，按一下 [新增] 下的箭頭，然後按一下 [新增檔案]。

WebMatrix 會顯示檔案類型清單。 選取 [CSHTML]，然後在 [名稱] 方塊中輸入 「HelloWorld」。 CSHTML 頁面是 ASP.NET 網頁頁面。

按一下 [確定]。

WebMatrix 會建立頁面，並在編輯器中開啟它。

如您所見，頁面包含大部分的一般 HTML 標記，但頂端的區塊看起來如下：

@{ 

}

這是為了可新增程式碼，您很快就可看到。

請注意，頁面的不同部分：元素名稱、屬性和文字，加上頂端的區塊，全都以不同的色彩顯示。 這稱為語法醒目提示，可讓您更輕鬆地將所有項目顯示地一清二楚。 這是一項功能，可讓您在 WebMatrix 中更容易處理網頁。

新增 <head> 和 <body> 元素的內容，如下列範例所示。 (如有需要，您可以複製下列區塊，並以此程式碼取代整個現有的頁面。)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

在 [快速存取工具列] 或 [檔案] 功能表中，按一下 [儲存]。

測試頁面

在 [檔案] 工作區中，以滑鼠右鍵按一下 [HelloWorld.cshtml] 頁面，然後按一下 [在瀏覽器中啟動]。

WebMatrix 會啟動內建網頁伺服器 (IIS Express)，可用來在電腦上測試頁面。 (如果沒有 WebMatrix 中的 IIS Express，您必須先將頁面發佈至某個位置的網頁伺服器，才能進行測試)。會在預設瀏覽器中顯示頁面。

請注意，當您在 WebMatrix 中測試網頁時，瀏覽器中的 URL 會類似於 http://localhost:33651/HelloWorld.cshtml.。localhost 名稱是指本地伺服器，這表示該頁面是由您自己電腦上的網頁伺服器提供服務。 如前所述，WebMatrix 包含名為 IIS Express 的網頁伺服器程式，可在您啟動頁面時執行。

localhost 之後的數字 (例如：localhost:33651) 是指電腦上的連接埠號碼。 這是 IIS Express 用於此特定網站的「通道」數目。 當您建立網站時，會隨機從 1024 到 65536 的範圍選取連接埠號碼，對於您所建立的每個網站而言，此數字均不同。 (當您測試自己的網站時，連接埠號碼幾乎絕對會不同於 33561)。透過為每個網站使用不同的連接埠，IIS Express 可以確實跟要與其交流的網站溝通。

稍後當您將網站發佈至公用網頁伺服器時，就不會再在 URL 中看到 localhost。 此時，您會看到更典型的 URL，例如 http://myhostingsite/mywebsite/HelloWorld.cshtml 或任何頁面。 您稍後將在本教學課程系列深入了解發佈網站。

新增一些伺服器端程式碼

關閉瀏覽器並返回 WebMatrix 中的頁面。

將一行新增至程式碼區塊，使其看起來像下列程式碼：

@{
   var currentDateTime = DateTime.Now;
}

這包含一點 Razor 程式碼。 很明顯地它會取得目前的日期和時間，並將值放入名為 currentDateTime 的變數中。 您將在下一個教學課程中進一步瞭解 Razor 語法。

在頁面主體的 <p>Hello World!</p> 元素後，新增下列：

<p>Right now it's @currentDateTime</p>

此程式碼會取得您放入頂端 currentDateTime 變數中的值，並將它插入頁面的標記中。 @ 字元會標示頁面中 ASP.NET 網頁程式碼。

再次執行頁面 (WebMatrix 會在執行頁面之前為您儲存變更)。 這次您會在頁面中看到日期和時間。

稍等片刻，然後在瀏覽器中重新整理頁面。 日期和時間顯示已更新。

在瀏覽器中，查看頁面來源。 其內容如下列標記所示：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

請注意，頂端的 @{ } 區塊不存在。 另請注意，日期和時間顯示會顯示實際的字元字串 (1/18/2012 2:49:50 PM 或其他)，不像你在 .cshtml 頁面中有的 @currentDateTime 。 這裡所發生的情況是，當您執行頁面時，ASP.NET 會處理所有標示為 @ 的程式碼 (在此案例中很少)。 程式碼會產生輸出，且該輸出已插入頁面。

這是關於 ASP.NET 網頁的內容

當您讀到 ASP.NET 網頁會產生動態 Web 內容，您在這裡看到的就是這個概念。 您剛才建立的頁面包含您先前看到的相同 HTML 標記。 它也可以包含可執行各種工作的程式碼。 在此範例中，它執行取得目前日期和時間的簡單工作。 如您所見，您可以與 HTML 交錯放置程式碼，以在頁面中產生輸出。 當有人在瀏覽器中要求 .cshtml 頁面時，ASP.NET 會在其仍位於該網頁伺服器中時處理頁面。 ASP.NET 將程式碼 (若有) 的輸出以 HTML 的形式插入頁面。 當程式碼處理完成時，ASP.NET 將產生的頁面傳送至瀏覽器。 所有瀏覽器取得的都是 HTML。 下方為圖表：

這個想法很簡單，但程式碼可以執行許多有趣的工作，而且您能使用多種有趣的方式動態新增 HTML 內容至頁面。 而 ASP.NET .cshtml 頁面就像任何 HTML 頁面一樣，也可以包含在瀏覽器本身中執行的程式碼 (JavaScript 和 jQuery 程式碼)。 您將在本教學課程集和後續課程集中探索所有這些內容。

接續內容

在本系列中的下一個教學課程中，您會探索更多 ASP.NET 網頁程式設計。

其他資源

從頭開始建立 ASP.NET 網站。 這是關於使用 WebMatrix (而不是 ASP.NET 網頁) 的特定教學課程。 它更詳細地說明我們在本教學課程集中不會涵蓋的 WebMatrix 部分其他功能。

下一步