教學課程:開始使用 ASP.NET Core 中的 Razor PagesTutorial: Get started with Razor Pages in ASP.NET Core

作者:Rick AndersonBy Rick Anderson

這是本系列的第一個教學課程。This is the first tutorial of a series. 本系列將教導您建置 ASP.NET Core Razor Pages Web 應用程式的基本概念。The series teaches the basics of building an ASP.NET Core Razor Pages web app.

如需針對有經驗之開發人員說明的更進階簡介,請參閱 Razor Pages 簡介For a more advanced introduction aimed at experienced developers, see Introduction to Razor Pages.

在本系列結束時,您將會有一個可管理電影資料庫的應用程式。At the end of the series, you'll have an app that manages a database of movies.

檢視或下載範例程式碼 (如何下載)。View or download sample code (how to download).

在本教學課程中,您已:In this tutorial, you:

  • 建立 Razor Pages Web 應用程式。Create a Razor Pages web app.
  • 執行應用程式。Run the app.
  • 檢查專案檔。Examine the project files.

在本教學課程結束時,您將會有一個能夠運作的 Razor Pages Web 應用程式,並將在稍後的教學課程中以此為建置基礎。At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Home 或 Index 頁面

必要條件Prerequisites

建立 Razor 頁面 Web 應用程式Create a Razor Pages web app

  • 從 Visual Studio 的 [檔案] 功能表中,選取 [新增] > [專案] 。From the Visual Studio File menu, select New > Project.

  • 建立新的 ASP.NET Core Web 應用程式並選取 [下一步] 。Create a new ASP.NET Core Web Application and select Next.

    新增 ASP.NET Core Web 應用程式

  • 將專案命名為 RazorPagesMovieName the project RazorPagesMovie. 請務必將專案命名為 RazorPagesMovie,以便在您複製並貼上程式碼時,名稱空間會相符。It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    新增 ASP.NET Core Web 應用程式

  • 在下拉式清單中選取 [ASP.NET Core 2.2] ,然後選取 [Web 應用程式] 及 [建立] 。Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

新增 ASP.NET Core Web 應用程式

下列起始專案會隨即建立:The following starter project is created:

底下提供說明,包括方案總管

執行應用程式Run the app

  • 按 Ctrl+F5 即可執行而不使用偵錯工具。Press Ctrl+F5 to run without the debugger.

    Visual Studio 會顯示下列對話方塊:Visual Studio displays the following dialog:

    此專案設定為使用 SSL。

    如果您信任 IIS Express SSL 憑證,請選取 [是]。Select Yes if you trust the IIS Express SSL certificate.

    此時會顯示下列對話方塊:The following dialog is displayed:

    安全性警告對話方塊

    若您同意信任開發憑證,請選取 [是]。Select Yes if you agree to trust the development certificate.

    如需詳細資訊,請參閱信任 ASP.NET Core HTTPS 開發憑證See Trust the ASP.NET Core HTTPS development certificate for more information.

    Visual Studio 會啟動 IIS Express,並執行應用程式。Visual Studio starts IIS Express and runs the app. 位址列會顯示 localhost:port#,而不是類似於 example.com 的內容。The address bar shows localhost:port# and not something like example.com. 這是因為 localhost 是本機電腦的標準主機名稱。That's because localhost is the standard hostname for the local computer. Localhost 只會為來自本機電腦的 Web 要求提供服務。Localhost only serves web requests from the local computer. 當 Visual Studio 建立 Web 專案時,會對網頁伺服器使用隨機連接埠。When Visual Studio creates a web project, a random port is used for the web server.

  • 在應用程式的首頁上,選取 [接受] 同意追蹤。On the app's home page, select Accept to consent to tracking.

    此應用程式不會追蹤個人資訊,但專案範本會包含同意功能,以防您需要同意才符合歐盟的一般資料保護規定 (GDPR)This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Home 或 Index 頁面

    下圖顯示您同意追蹤之後的應用程式:The following image shows the app after you give consent to tracking:

    Home 或 Index 頁面

檢查專案檔Examine the project files

以下概要說明主要專案資料夾和檔案,您將在稍後的教學課程中使用這些資料夾和檔案。Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pages 資料夾Pages folder

包含 Razor 頁面和支援檔案。Contains Razor pages and supporting files. 每個 Razor 頁面都是一組檔案:Each Razor page is a pair of files:

  • .cshtml 檔案,其中包含 C# 程式碼的 HTML 標記 (使用 Razor 語法)。A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • .cshtml.cs 檔案,其中包含處理頁面事件的 C# 程式碼。A .cshtml.cs file that contains C# code that handles page events.

支援檔案的名稱以底線開頭。Supporting files have names that begin with an underscore. 例如, _Layout.cshtml 檔案會設定所有頁面通用的 UI 元素。For example, the _Layout.cshtml file configures UI elements common to all pages. 此檔案會設定頁面頂端的導覽功能表和頁面底部的著作權標示。This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. 如需詳細資訊,請參閱 ASP.NET Core 中的配置For more information, see ASP.NET Core 中的配置.

wwwroot 資料夾wwwroot folder

包含靜態檔案,例如 HTML 檔案、JavaScript 檔案和 CSS 檔案。Contains static files, such as HTML files, JavaScript files, and CSS files. 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案For more information, see ASP.NET Core 中的靜態檔案.

appSettings.jsonappSettings.json

包含組態資料,例如連接字串。Contains configuration data, such as connection strings. 如需詳細資訊,請參閱 ASP.NET Core 的設定For more information, see ASP.NET Core 的設定.

Program.csProgram.cs

包含程式的進入點。Contains the entry point for the program. 如需詳細資訊,請參閱 .NET 泛型主機For more information, see .NET 泛型主機.

Startup.csStartup.cs

包含設定應用程式行為的程式碼,例如是否需要同意使用 Cookie。Contains code that configures app behavior, such as whether it requires consent for cookies. 如需詳細資訊,請參閱 ASP.NET Core 中的應用程式啟動For more information, see ASP.NET Core 中的應用程式啟動.

其他資源Additional resources

後續步驟Next steps

在本教學課程中,您已:In this tutorial, you:

  • 建立 Razor Pages Web 應用程式。Created a Razor Pages web app.
  • 執行應用程式。Ran the app.
  • 檢查專案檔。Examined the project files.

前進到系列中的下一個教學課程:Advance to the next tutorial in the series: