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

作者:Rick AndersonBy Rick Anderson

這是一個系列的第一個教學課程,教您建立 ASP.NET 核心 Razor 頁面 web 應用程式的基本概念。This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

如需更高階的簡介,適用于熟悉控制器和 views 的開發人員,請參閱 Razor 頁面簡介For a more advanced introduction aimed at developers who are familiar with controllers and views, 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 頁面 web 應用程式。Create a Razor Pages web app.
  • 執行應用程式。Run the app.
  • 檢查專案檔。Examine the project files.

在本教學課程結尾,您將會有一個工作 Razor 頁面 web 應用程式,您將在稍後的教學課程中加以增強。At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

Home 或:::非 loc (Index) ::: page

必要條件Prerequisites

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

  1. 啟動 Visual Studio,然後選取 [建立新專案]。Start Visual Studio and select Create a new project. 如需詳細資訊,請參閱 在 Visual Studio 中建立新專案For more information, see Create a new project in Visual Studio.

    從 [開始] 視窗建立新專案

  2. 在 [建立新專案] 對話方塊中,選取 [ASP.NET Core Web 應用程式],然後選取 [下一步]。In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

    新增 ASP.NET Core Web 應用程式

  3. 在 [ 設定您的新專案 ] 對話方塊中,輸入 [ RazorPagesMovie 專案名稱]。In the Configure your new project dialog, enter RazorPagesMovie for Project name. 請務必將專案命名為 Razor PagesMovie,包括符合大小寫,如此一來,當您複製並貼上範例程式碼時,命名空間會相符。It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

  4. 選取 [建立] 。Select Create.

    新增 ASP.NET Core Web 應用程式

  5. 在 [ 建立新的 ASP.NET Core web 應用程式 ] 對話方塊中,選取:In the Create a new ASP.NET Core web application dialog, select:

    1. 下拉式清單中的 .Net coreASP.NET core 5.0.NET Core and ASP.NET Core 5.0 in the dropdowns.
    2. Web 應用程式Web Application.
    3. CreateCreate.

    新增 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.

    如需有關信任 Firefox 瀏覽器的詳細資訊,請參閱 firefox SEC_ERROR_INADEQUATE_KEY_USAGE 憑證錯誤For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    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.

檢查專案檔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:

  • 使用語法以 c # 程式碼撰寫 HTML 標籤的 cshtml 檔案。 RazorA .cshtml file that has HTML markup with C# code using Razor syntax.
  • 具有處理頁面事件之 c # 程式碼的 cshtml.cs 檔案。A .cshtml.cs file that has 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 assets, like HTML files, JavaScript files, and CSS files. 如需詳細資訊,請參閱ASP.NET Core 中的靜態檔案For more information, see ASP.NET Core 中的靜態檔案.

appsettings.json

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

Program.csProgram.cs

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

Startup.csStartup.cs

包含設定應用程式行為的程式碼。Contains code that configures app behavior. 如需詳細資訊,請參閱ASP.NET Core 中的應用程式啟動For more information, see ASP.NET Core 中的應用程式啟動.

下一步Next steps

這是一個系列的第一個教學課程,教您建立 ASP.NET 核心 Razor 頁面 web 應用程式的基本概念。This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

如需更高階的簡介,適用于熟悉控制器和 views 的開發人員,請參閱 Razor 頁面簡介For a more advanced introduction aimed at developers who are familiar with controllers and views, 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 頁面 web 應用程式。Create a Razor Pages web app.
  • 執行應用程式。Run the app.
  • 檢查專案檔。Examine the project files.

在本教學課程結尾,您將會有一個工作 Razor 頁面 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 或:::非 loc (Index) ::: page

必要條件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 應用程式new ASP.NET Core Web Application

  • 將專案命名為 Razor PagesMovieName the project RazorPagesMovie. 請務必將專案命名為 Razor PagesMovie ,如此一來,當您複製並貼上程式碼時,命名空間才會相符。It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. 新增 ASP.NET Core Web 應用程式new ASP.NET Core Web Application

  • 在 [ Web 應用程式] 下拉式清單中選取 [ ASP.NET Core 3.1 ],然後選取 [建立]。Select ASP.NET Core 3.1 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.

    如需有關信任 Firefox 瀏覽器的詳細資訊,請參閱 firefox SEC_ERROR_INADEQUATE_KEY_USAGE 憑證錯誤For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    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.

檢查專案檔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:

  • 使用語法以 c # 程式碼撰寫 HTML 標籤的 cshtml 檔案。 RazorA .cshtml file that has HTML markup with C# code using Razor syntax.
  • 具有處理頁面事件之 c # 程式碼的 cshtml.cs 檔案。A .cshtml.cs file that has 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, like HTML files, JavaScript files, and CSS files. 如需詳細資訊,請參閱ASP.NET Core 中的靜態檔案For more information, see ASP.NET Core 中的靜態檔案.

appSettings.jsonappSettings.json

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

Program.csProgram.cs

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

Startup.csStartup.cs

包含設定應用程式行為的程式碼。Contains code that configures app behavior. 如需詳細資訊,請參閱ASP.NET Core 中的應用程式啟動For more information, see ASP.NET Core 中的應用程式啟動.

下一步Next steps

這是本系列的第一個教學課程。This is the first tutorial of a series. 此系列 會教您建立 ASP.NET 核心 Razor 頁面 web 應用程式的基本概念。The series teaches the basics of building an ASP.NET Core Razor Pages web app.

如需更高階的簡介,適用于熟悉控制器和 views 的開發人員,請參閱 Razor 頁面簡介For a more advanced introduction aimed at developers who are familiar with controllers and views, 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 頁面 web 應用程式。Create a Razor Pages web app.
  • 執行應用程式。Run the app.
  • 檢查專案檔。Examine the project files.

在本教學課程結尾,您將會有一個工作 Razor 頁面 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 或:::非 loc (Index) ::: page

必要條件Prerequisites

警告

如果您使用 Visual Studio 2017,請參閱 dotnet/sdk 問題 #3124 (英文),以取得未使用 Visual Studio 的 .NET Core SDK 版本相關資訊。If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

建立 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 應用程式

  • 將專案命名為 Razor PagesMovieName the project RazorPagesMovie. 請務必將專案命名為 Razor PagesMovie ,如此一來,當您複製並貼上程式碼時,命名空間才會相符。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.

    使用 Ctrl + F5 啟動應用程式 (非 debug 模式) 可讓您進行程式碼變更、儲存檔案、重新整理瀏覽器,以及查看程式碼變更。Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. 許多開發人員偏好使用非偵錯模式來快速啟動應用程式並檢視變更。Many developers prefer to use non-debug mode to quickly launch the app and view changes.

    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.

    如需有關信任 Firefox 瀏覽器的詳細資訊,請參閱 firefox SEC_ERROR_INADEQUATE_KEY_USAGE 憑證錯誤For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    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 或:::非 loc (Index) ::: page

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

    Home 或:::非 loc (Index) ::: page

檢查專案檔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:

  • 使用語法以 c # 程式碼撰寫 HTML 標籤的 cshtml 檔案。 RazorA .cshtml file that has HTML markup with C# code using Razor syntax.
  • 具有處理頁面事件之 c # 程式碼的 cshtml.cs 檔案。A .cshtml.cs file that has 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 中的配置.

Razor 頁面衍生自 PageModelRazor Pages are derived from PageModel. 依照慣例, PageModel 衍生的類別會命名為 <PageName>ModelBy convention, the PageModel-derived class is named <PageName>Model.

wwwroot 資料夾wwwroot folder

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

appSettings.jsonappSettings.json

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

Program.csProgram.cs

包含程式的進入點。Contains the entry point for the program. 如需詳細資訊,請參閱ASP.NET Core 中的 .NET 泛型主機For more information, see ASP.NET Core 中的 .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