教學課程:在 ASP.NET Core 中使用 Razor 頁面開始

作者:Rick Anderson

這是系列的第一個教學課程,會教導建置 ASP.NET Core Razor Pages Web 應用程式的基本概念。

如需更進階的簡介,以熟悉控制器和檢視的開發人員為目標,請參閱 頁面簡介 Razor。 如需影片簡介,請參閱 適用于初學者的 Entity Framework Core

如果您不熟悉 ASP.NET Core開發,而且不確定哪些 ASP.NET Core Web UI 解決方案最適合您的需求,請參閱選擇 ASP.NET Core UI

在本系列結束時,您將會有一個可管理電影資料庫的應用程式。

在本教學課程中,您:

  • 建立 Razor Pages Web 應用程式。
  • 執行應用程式。
  • 檢查專案檔。

在本教學課程結束時,您將有一個工作 Razor 頁面 Web 應用程式,您將在稍後的教學課程中增強。

Home or Index page

必要條件

建立 Razor Pages Web 應用程式

  1. 開始Visual Studio 2022,然後選取[建立新專案]。

    Create a new project from the start window

  2. 在 [建立新專案] 對話方塊中,選取[ASP.NET Core Web 應用程式],然後選取 [下一步]。

    Create an ASP.NET Core Web App

  3. 在 [設定新專案] 對話方塊中,輸入 RazorPagesMovieProject 名稱。 請務必命名專案Razor PagesMovie,包括比對大寫,因此當您複製並貼上範例程式碼時,命名空間將會相符。

    Configure your new project

  4. 選取 [下一步] 。

  5. [其他資訊] 對話方塊中,選取 [.NET 6.0 (長期支援) ],然後選取 [ 建立]。

    Additional information

    下列起始專案會隨即建立:

    Solution Explorer

執行應用程式

選取Razor 方案總管 中的 PagesMovie,然後按 Ctrl+F5 執行而不需偵錯工具。

當專案尚未設定為使用 SSL 時,Visual Studio會顯示下列對話方塊:

This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?

如果您信任 IIS Express SSL 憑證,請選取 [是]

此時會顯示下列對話方塊:

Security warning dialog

若您同意信任開發憑證,請選取 [是]

如需信任 Firefox 瀏覽器的資訊,請參閱 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE憑證錯誤

Visual Studio:

  • 執行啟動 Kestrel 伺服器的應用程式。
  • 在 啟動預設瀏覽器 https://localhost:5001 ,以顯示應用程式 UI。

檢查專案檔

下列各節包含您將在稍後教學課程中使用的主要專案資料夾和檔案概觀。

Pages 資料夾

包含 Razor 頁面和支援的檔案。 每個 Razor 頁面都是一對檔案:

  • 使用 .cshtml 語法搭配 C# 程式碼 Razor 使用 HTML 標籤的檔案。
  • 檔案 .cshtml.cs ,具有可處理頁面事件的 C# 程式碼。

支援檔案的名稱以底線開頭。 例如,檔案 _Layout.cshtml 會設定所有頁面通用的 UI 元素。 此檔案會設定頁面頂端的導覽功能表和頁面底部的著作權標示。 如需詳細資訊,請參 ASP.NET 中的配置

wwwroot 資料夾

包含靜態資產,例如 HTML 檔案、JavaScript 檔案和 CSS 檔案。 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案

appsettings.json

包含組態資料,例如連接字串。 如需詳細資訊,請參閱 ASP.NET Core 中的組態

Program.cs

包含下列程式碼:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

此檔案中的下列幾行程式碼會建立 WebApplicationBuilder 具有預先設定預設值的 、將 Pages 支援新增 Razor 至相 依性插入 (DI) 容器,以及建置應用程式:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

預設會啟用開發人員例外狀況頁面,並提供例外狀況的實用資訊。 生產應用程式不應該在開發模式中執行,因為開發人員例外狀況頁面可能會洩漏敏感性資訊。

下列程式碼會將例外狀況端點設定為 /Error ,並在應用程式在開發模式中執行時,啟用HSTS (HSTS)

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

例如,上述程式碼會在應用程式處於生產或測試模式時執行。 如需詳細資訊,請參閱在 ASP.NET Core 中使用多個環境

下列程式碼會啟用各種 中介軟體

  • app.UseHttpsRedirection(); :將 HTTP 要求重新導向至 HTTPS。
  • app.UseStaticFiles(); :允許提供靜態檔案,例如 HTML、CSS、影像和 JavaScript。 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案
  • app.UseRouting(); :將路由比對新增至中介軟體管線。 如需詳細資訊,請參閱ASP.NET Core 中的路由
  • app.MapRazorPages();:設定頁面的 Razor 端點路由。
  • app.UseAuthorization(); :授權使用者存取安全資源。 此應用程式不會使用授權,因此可以移除這一行。
  • app.Run(); :執行應用程式。

使用已完成的範例進行疑難排解

若您遇到無法解決的問題,請將您的程式碼與已完成的專案進行比較。 檢視或下載已完成的專案 (如何下載) 。

後續步驟

這是系列的第一個教學課程,會教導建置 ASP.NET Core Razor Pages Web 應用程式的基本概念。

如需更進階的簡介,以熟悉控制器和檢視的開發人員為目標,請參閱 頁面簡介 Razor

如果您不熟悉 ASP.NET Core開發,而且不確定哪些 ASP.NET Core Web UI 解決方案最適合您的需求,請參閱選擇 ASP.NET Core UI

在本系列結束時,您將會有一個可管理電影資料庫的應用程式。

在本教學課程中,您:

  • 建立 Razor Pages Web 應用程式。
  • 執行應用程式。
  • 檢查專案檔。

在本教學課程結束時,您將有一個工作 Razor 頁面 Web 應用程式,您將在稍後的教學課程中增強。

Home or Index page

必要條件

建立 Razor Pages Web 應用程式

  1. 啟動 Visual Studio,然後選取 [建立新專案]。 如需詳細資訊,請參閱在 Visual Studio 中建立新專案

    Create a new project from the start window

  2. 在 [建立新專案] 對話方塊中,選取 [ASP.NET Core Web 應用程式],然後選取 [下一步]

    Create an ASP.NET Core Web Application

  3. 在 [設定新專案] 對話方塊中,輸入 RazorPagesMovieProject 名稱。 請務必命名專案Razor PagesMovie,包括比對大寫,因此當您複製並貼上範例程式碼時,命名空間將會相符。

  4. 選取 [建立]。

    Configure the project

  5. 在 [建立新的 ASP.NET Core Web 應用程式] 對話方塊中,選取:

    1. 下拉式清單中的.NET CoreASP.NET Core 5.0
    2. Web 應用程式
    3. Create

    Select ASP.NET Core Web App

    下列起始專案會隨即建立:

    Solution Explorer

執行應用程式

  • 按 Ctrl+F5 即可執行而不使用偵錯工具。

    當專案尚未設定為使用 SSL 時,Visual Studio會顯示下列對話方塊:

    This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?

    如果您信任 IIS Express SSL 憑證,請選取 [是]

    此時會顯示下列對話方塊:

    Security warning dialog

    若您同意信任開發憑證,請選取 [是]

    如需信任 Firefox 瀏覽器的資訊,請參閱 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE憑證錯誤

    Visual Studio 會啟動 IIS Express,並執行應用程式。 位址列會顯示 localhost:port#,而不是類似於 example.com 的內容。 這是因為 localhost 是本機電腦的標準主機名稱。 Localhost 只會為來自本機電腦的 Web 要求提供服務。 當 Visual Studio 建立 Web 專案時,會為網頁伺服器使用隨機連接埠。

檢查專案檔

以下概要說明主要專案資料夾和檔案,您將在稍後的教學課程中使用這些資料夾和檔案。

Pages 資料夾

包含 Razor 頁面和支援的檔案。 每個 Razor 頁面都是一對檔案:

  • 使用 .cshtml 語法搭配 C# 程式碼 Razor 使用 HTML 標籤的檔案。
  • 檔案 .cshtml.cs ,具有可處理頁面事件的 C# 程式碼。

支援檔案的名稱以底線開頭。 例如,檔案 _Layout.cshtml 會設定所有頁面通用的 UI 元素。 此檔案會設定頁面頂端的導覽功能表和頁面底部的著作權標示。 如需詳細資訊,請參 ASP.NET 中的配置

wwwroot 資料夾

包含靜態資產,例如 HTML 檔案、JavaScript 檔案和 CSS 檔案。 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案

appsettings.json

包含組態資料,例如連接字串。 如需詳細資訊,請參閱 ASP.NET Core 中的組態

Program.cs

包含應用程式的進入點。 如需詳細資訊,請參閱ASP.NET Core 中的 .NET 泛型主機

Startup.cs

包含設定應用程式行為的程式碼。 如需詳細資訊,請參閱 ASP.NET Core 中的應用程式啟動

使用已完成的範例進行疑難排解

若您遇到無法解決的問題,請將您的程式碼與已完成的專案進行比較。 檢視或下載已完成的專案 (如何下載) 。

後續步驟

這是系列的第一個教學課程,會教導建置 ASP.NET Core Razor Pages Web 應用程式的基本概念。

如需更進階的簡介,以熟悉控制器和檢視的開發人員為目標,請參閱 頁面簡介 Razor

在本系列結束時,您將會有一個可管理電影資料庫的應用程式。

檢視或下載範例程式碼 (如何下載)。

在本教學課程中,您:

  • 建立 Razor Pages Web 應用程式。
  • 執行應用程式。
  • 檢查專案檔。

在本教學課程結束時,您將有一個可在稍後教學課程中建置的工作 Razor 頁面 Web 應用程式。

The Home or Index page

必要條件

建立 Razor Pages Web 應用程式

  • 從 Visual Studio 的 [檔案] 功能表中,選取 [新增]>[專案]

  • 建立新的 ASP.NET Core Web 應用程式並選取 [下一步]Create the new project from the start window

  • 將專案Razor 命名為 PagesMovie。 請務必將專案Razor 命名為 PagesMovie,因此當您複製並貼上程式碼時,命名空間將會相符。 Name the project

  • 在下拉式清單中選取[ASP.NET Core 3.1],然後選取 [Web 應用程式],然後選取 [建立]。

Select ASP.NET Core Web Application

下列起始專案會隨即建立:

Solution Explorer

執行應用程式

  • 按 Ctrl+F5 即可執行而不使用偵錯工具。

    當專案尚未設定為使用 SSL 時,Visual Studio會顯示下列對話方塊:

    This project is configured to use SSL. To avoid SSL warnings in the browser you can choose to trust the self-signed certificate that IIS Express has generated. Would you like to trust the IIS Express SSL certificate?

    如果您信任 IIS Express SSL 憑證,請選取 [是]

    此時會顯示下列對話方塊:

    Security warning dialog

    若您同意信任開發憑證,請選取 [是]

    如需信任 Firefox 瀏覽器的資訊,請參閱 Firefox SEC_ERROR_INADEQUATE_KEY_USAGE憑證錯誤

    Visual Studio 會啟動 IIS Express,並執行應用程式。 位址列會顯示 localhost:port#,而不是類似於 example.com 的內容。 這是因為 localhost 是本機電腦的標準主機名稱。 Localhost 只會為來自本機電腦的 Web 要求提供服務。 當 Visual Studio 建立 Web 專案時,會為網頁伺服器使用隨機連接埠。

檢查專案檔

以下概要說明主要專案資料夾和檔案,您將在稍後的教學課程中使用這些資料夾和檔案。

Pages 資料夾

包含 Razor 頁面和支援的檔案。 每個 Razor 頁面都是一對檔案:

  • 使用 .cshtml 語法搭配 C# 程式碼 Razor 使用 HTML 標籤的檔案。
  • 檔案 .cshtml.cs ,具有可處理頁面事件的 C# 程式碼。

支援檔案的名稱以底線開頭。 例如,檔案 _Layout.cshtml 會設定所有頁面通用的 UI 元素。 此檔案會設定頁面頂端的導覽功能表和頁面底部的著作權標示。 如需詳細資訊,請參 ASP.NET 中的配置

wwwroot 資料夾

包含靜態檔案,例如 HTML 檔案、JavaScript 檔案和 CSS 檔案。 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案

appSettings.json

包含組態資料,例如連接字串。 如需詳細資訊,請參閱 ASP.NET Core 中的組態

Program.cs

包含程式的進入點。 如需詳細資訊,請參閱ASP.NET Core 中的 .NET 泛型主機

Startup.cs

包含設定應用程式行為的程式碼。 如需詳細資訊,請參閱 ASP.NET Core 中的應用程式啟動

後續步驟