教學課程:開始使用 ASP.NET Core 中的 Razor Pages

作者: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 應用程式。

Home 或索引頁面

必要條件

建立 Razor Pages Web 應用程式

  • 啟動 Visual Studio,然後選取 [建立新專案]。

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

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

  • 選取 [下一步]。

  • 在 [其他資訊] 對話方塊中:

    • 選取 [.NET 7.0]。
    • 驗證:未核取 不使用最上層語句
  • 選取 [建立]。

    其他資訊

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

    方案總管

如需建立專案的替代方法,請參閱 在 Visual Studio 中建立新專案

執行應用程式

選取Razor[方案總管中的 PagesMovie],然後按 Ctrl+F5 以在沒有偵錯工具的情況下執行。

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

此專案已設定為使用 SSL。若要避免瀏覽器中出現 SSL 警告,您可以選擇信任IIS Express產生的自我簽署憑證。您要信任IIS Express SSL 憑證嗎?

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

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

安全性警告對話方塊

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

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

Visual Studio:

  • 執行啟動伺服器的應用程式Kestrel
  • 在 啟動預設瀏覽器 https://localhost:<port> ,以顯示應用程式 UI。 <port> 是建立應用程式時所指派的隨機埠。

檢查專案檔

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

Pages 資料夾

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

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

支援檔案的名稱以底線開頭。 例如,檔案 _Layout.cshtml 會設定所有頁面通用的 UI 元素。 _Layout.cshtml 設定頁面頂端的導覽功能表,以及頁面底部的著作權聲明。 如需詳細資訊,請參 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。 如需影片簡介,請參閱 適用于初學者的 Entity Framework Core

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

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

在本教學課程中,您:

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

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

Home 或索引頁面

必要條件

建立 Razor Pages Web 應用程式

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

    從開始視窗建立新專案

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

    建立 ASP.NET Core Web 應用程式

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

    設定新專案

  4. 選取 [下一步]。

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

    其他資訊

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

方案總管

執行應用程式

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

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

此專案已設定為使用 SSL。若要避免瀏覽器中的 SSL 警告,您可以選擇信任IIS Express產生的自我簽署憑證。您要信任IIS Express SSL 憑證嗎?

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

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

安全性警告對話方塊

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

如需信任 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 或索引頁面

必要條件

建立 Razor Pages Web 應用程式

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

    從開始視窗建立新專案

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

    建立 ASP.NET Core Web 應用程式

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

  4. 選取 [建立]。

    設定專案

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

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

    選取 [ASP.NET Core Web 應用程式]

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

方案總管

執行應用程式

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

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

    此專案已設定為使用 SSL。若要避免瀏覽器中出現 SSL 警告,您可以選擇信任IIS Express產生的自我簽署憑證。您要信任IIS Express SSL 憑證嗎?

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

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

    安全性警告對話方塊

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

    如需信任 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# 程式碼使用 HTML 標籤的 Razor 檔案。
  • .cshtml.cs具有處理頁面事件的 C# 程式碼的檔案。

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

wwwroot 資料夾

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

appsettings.json

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

Program.cs

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

Startup.cs

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

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

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

下一步

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

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

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

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

在本教學課程中,您:

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

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

Home或 索引頁面

必要條件

建立 Razor Pages Web 應用程式

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

  • 建立新的 ASP.NET Core Web 應用程式並選取 [下一步]從開始視窗建立新專案

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

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

選取 ASP.NET Core Web 應用程式

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

方案總管

執行應用程式

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

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

    此專案已設定為使用 SSL。若要避免瀏覽器中的 SSL 警告,您可以選擇信任IIS Express產生的自我簽署憑證。您要信任IIS Express SSL 憑證嗎?

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

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

    安全性警告對話方塊

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

    如需信任 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 中的 .NET 泛型主機

Startup.cs

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

下一步