ASP.NET 消費者入門

發行項
07/13/2023

針對新的 Web 應用程式開發，我們建議使用 Razor Pages。如需詳細資訊，請參閱開始使用 Razor 頁面。

注意

不再建議 WebMatrix 作為 ASP.NET Web Pages的整合式開發環境。使用Visual Studio或Visual Studio Code。

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

層級：ASP.NET Web Pages的新功能。
假設技能：HTML、基本級聯樣式表單 (CSS) 。

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

ASP.NET Web Pages技術是什麼及其用途。

什麼是 WebMatrix。

如何安裝所有專案。

如何使用 WebMatrix 建立網站。

討論的功能/技術：

Microsoft Web Platform Installer。

WebMatrix。

.cshtml 頁面

Mike Pope 最初撰寫了本教學課程。 Tom FitzMacken 已針對 Microsoft WebMatrix 3 更新它。

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

ASP.NET Web Pages (Razor) 2

WebMatrix 3

您應該知道什麼？

我們假設您已熟悉：

HTML。不需要深入專業知識。我們不會說明 HTML，但我們也不會使用任何複雜專案。我們將提供 HTML 教學課程的連結，其中認為這些教學課程很有用。
級聯樣式表單 (CSS) 。與 HTML 相同。
基本資料庫概念。如果您已針對資料使用試算表，並排序和篩選資料，這就是我們通常針對本教學課程集所假設的專業知識層級。

我們也假設您有興趣學習基本程式設計。 ASP.NET Web Pages使用稱為 C# 的程式設計語言。您不需要在程式設計中具有任何背景，只是對它感興趣。如果您之前曾在網頁中撰寫過任何 JavaScript，則您有許多背景。

請注意，如果您熟悉程式設計，您可能會發現本教學課程集一開始會緩慢移動，而我們會讓新的程式設計人員加快速度。不過，當我們貼上前幾個教學課程時，會比較不基本的程式設計來說明，而且專案會隨著更快速的剪輯一起移動。

您需要什麼？

以下是您需要的內容：

執行 Windows 8、Windows 7、Windows Server 2008 或 Windows Server 2012 的電腦。
即時網際網路連線。
安裝程式) 所需的系統管理員許可權 (。

什麼是 ASP.NET Web Pages？

ASP.NET Web Pages是可用來建立動態網頁的架構。簡單的 HTML 網頁是靜態的;其內容是由網頁中的固定 HTML 標籤所決定。動態頁面，例如您使用 ASP.NET Web Pages建立的動態頁面，可讓您使用程式碼即時建立頁面內容。

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

什麼是 WebMatrix？

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

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

關於這些教學課程

本教學課程集是如何使用 ASP.NET Web Pages的簡介。本簡介教學課程集中總共有 9 個教學課程。這是一系列教學課程集的一部分，可帶您從 ASP.NET Web Pages新手到建立真實、專業型式的網站。

本第一個教學課程集著重于示範如何使用 ASP.NET Web Pages的基本概念。當您完成時，您可以處理其他教學課程集，以挑選這一個結束的位置，並更深入地探索網頁。

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

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

安裝所有專案的簡介和取得。 (您正在閱讀的教學課程中。)
ASP.NET Web Pages程式設計的基本概念。
建立資料庫。
建立及處理使用者輸入表單。
新增、更新和刪除資料庫中的資料。

您要建立什麼？

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

顯示電影清單的 Finshed Movie 應用程式

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

顯示 [新增電影] 頁面的已完成電影應用程式

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

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

您是否想要看到以即時 Web 應用程式身分執行的已完成網站？只要按一下下列按鈕，即可將應用程式的完整版本部署至 Azure 帳戶。

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

免費開啟 Azure 帳戶 - 您可以取得可用來試用付費 Azure 服務的點數，即使在用完之後，您仍可保留帳戶並使用免費的 Azure 服務。
啟用 MSDN 訂閱者權益 - 您的 MSDN 訂用帳戶每月提供您可用於付費 Azure 服務的點數。

安裝所有專案

您可以使用 Microsoft 的 Web Platform Installer 來安裝所有專案。實際上，您會安裝安裝程式，然後使用它來安裝所有其他專案。

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

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

ASP.NET 顯示 [安裝 WebMatrix] 按鈕的網站

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

接受字詞以開始安裝

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

瀏覽器視窗程式執行橫幅的螢幕擷取畫面，其中顯示醒目提示紅色矩形的 [執行] 按鈕。

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

顯示 Microsoft Web 矩陣安裝程式的 Web 平臺安裝程式螢幕擷取畫面，其中已醒目提示紅色矩形的 [安裝] 按鈕。

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

Hello， WebMatrix

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

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

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

此時，請使用您的 Microsoft 帳戶登入，或選取右下角的 [ 立即不要 ]。

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

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

WebMatrix 啟動畫面

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

選取範本庫

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

已選取空白網站範本的 WebMatrix 快速入門視窗

按一下 [下一步] 。

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

建立 Azure 網站

WebMatrix 會建立並開啟網站：

在 WebMatrix 中開啟新的 WebPagesMovies 網站

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

當您進行這些教學課程時，您將深入瞭解 WebMatrix 及其功能。

建立網頁

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

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

WebMatrix 中的檔案工作區

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

在功能區中使用「New」命令來建立新的檔案

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

建立名為 HelloWorld.cshtml 的新 CSHTML 頁面

按一下 [確定]。

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

WebMatrix 編輯器中的新 HelloWorld 頁面

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

@{ 

}

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

請注意，頁面的不同部分 —元素名稱、屬性和文字，加上頂端的區塊全都是不同的色彩。這稱為 語法醒目提示，可讓您更輕鬆地讓所有專案保持清楚。這是其中一項功能，可讓您輕鬆地在 WebMatrix 中使用網頁。

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

@{

}

<!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>

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

WebMatrix 快速存取工具列中的 [儲存] 按鈕

測試頁面

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

使用 WebMatrix 功能區中的 [執行] 按鈕執行頁面

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

在瀏覽器中執行的「Hello World」頁面

請注意，當您在 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 或任何頁面。您將在本教學課程系列稍後深入瞭解發佈網站。

新增一些Server-Side程式碼

關閉瀏覽器，然後返回 WebMatrix 中的頁面。

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

@{
   var currentDateTime = DateTime.Now;
}

這是一些 Razor 程式碼。它可能清楚取得目前的日期和時間，並將該值放入名為的 currentDateTime變數中。您將在下一個教學課程中深入瞭解 Razor 語法。

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

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

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

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

在瀏覽器中執行的 [Hello World] 頁面，並顯示動態產生的時間

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

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

<!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 或任何) ，就像 @currentDateTime 您在 .cshtml 頁面中一樣。此處所發生的情況是當您執行頁面時，ASP.NET 處理所有程式碼 (，在此案例中) 標示 @ 為。程式碼會產生輸出，而且該輸出已插入頁面。

這就是 ASP.NET Web Pages的用途

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

ASP.NET 如何動態產生 HTML 的概念流程

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

即將推出下一個

在本系列中的下一個教學課程中，您會進一步探索 ASP.NET Web Pages程式設計。

其他資源

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

下一步

ASP.NET 消費者入門

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

您應該知道什麼？

您需要什麼？

什麼是 ASP.NET Web Pages？

什麼是 WebMatrix？

關於這些教學課程

您要建立什麼？

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

安裝所有專案

Hello， WebMatrix

建立網頁

測試頁面

新增一些Server-Side程式碼

這就是 ASP.NET Web Pages的用途

即將推出下一個

其他資源

意見反應

意見反應

其他資源