簡介

隨著ASP.NET Core 2 即將來臨，最熱門的新事物是Razor頁面。在之前的一篇文章中，我們簡要介紹了ASP.NET Core Razor 頁面。

Razor頁面是ASP.NET Core的一個新功能，可以使基于頁面的編程方式更容易，更高效。

大眾的初步印象是對于那些只專注于頁面的小型應用來說，Razor頁面更容易、更快地取代MVC。然而，事實證明，它可能比這更強大。使用ASP.NET Core 2在創建新的應用程序時，Razor頁面（空，Razor頁面，Web API，MVC）是默認選項，似乎ASP.NET團隊對Razor頁面有更多的計劃，并希望它成為創建Web應用程序時首選。

所有的Razor頁面類型和特征都在Microsoft.AspNetCore.Mvc.RazorPages程序集中，MVC默認包Microsoft.AspNetCore.Mvc已經包含了Razor頁面組件，這意味著您可以在MVC應用程序中直接使用Razor頁面。

Razor頁面的優點之一是設置和創建非常容易。您創建一個新的空項目，添加Pages文件夾，添加頁面，只需在?.cshtml?文件中編寫代碼和標記。非常適合新手，是學習ASP.NET Core簡單快速的方法！

Why？

如果您想使用MVC構建幾個簡單的頁面，你需要將控制器 Action、HTML視圖、視圖模型、路由分別在單獨的位置編寫，這看起來似乎很過分了。

在Razor頁面中，只有一個Razor文件（.cshtml），后臺的代碼也位于該文件內，該文件也表示應用程序的URL結構（稍后將會介紹）。因此，您可以將所有內容都放在一個文件中，就這么簡單。

但是，您可以使用?.cshtml.cs?擴展名文件將后臺代碼分開。通常在該文件中包括視圖模型和Handlers （如MVC中的Acion方法），也可以在該文件中的處理邏輯。當然，您也可以將您的視圖模型移動到單獨的文件中。

創建Razor頁面應用程序

在VS 2017中安裝.NET Core 2 SDK的情況下，如果我們按照這樣的方式：文件 - > 新建項目 - > Web - > ASP.NET Core Web應用程序，我們將得到下面的窗口：

手動將身份驗證類型改為“個人用戶帳戶”。

我們也可以通過CLI實現同樣的效果

dotnet new razor --auth Individual

在dotnet CLI創建一個新項目之后，我們將在的項目中得到以下結構：

首先注意到是沒有Views文件夾, 如果沒有選擇"授權"選項, 那么也不會有"Controllers"文件夾。在我們的例子中，有AccountController控制器，在?Pages?文件夾中包含Account 文件夾。該文件夾的中，我們存放Razor頁面，在MVC中這些代碼通常放在?~Views/Account?文件夾中：

頁面的默認位置是"Pages"文件夾，但可以更改

大部分頁面都附帶.cs文件，表示頁面的模型:

在.cs文件中，我們可以定義我們的邏輯、Handlers（Action）、模型和所有需要的邏輯。我們也可以把它當作是.cshtml頁面的粘合劑，僅處理GET / POST / PUT / DELETE，也可以將邏輯移到單獨的類或層/項目中。

需要注意的一點是，我們需要在?.cshtml?文件的頂部定義?? @page?指令。這告訴Razor這個?.cshtml?文件是Razor Page文件：

ASP.NET Core Razor頁面 - 核心功能

由于Razor頁面是MVC框架的一部分，我們可以在Razor頁面中使用MVC所附帶的任何功能。

模型綁定

在MVC中模型綁定也適用于Razor頁面，就像MVC控制器中的Action方法一樣，在Razor頁面代碼有Handlers 。

在ChangePassword頁面.cshtml文件編寫如下表單：

ChangePassword.cshtml.cs文件中實現ChangePasswordModel類：

這里是InputModel類：

InputModel提供了我們在MVC中熟悉的ViewModel功能。

Handlers

我們使用Handlers作為處理HTTP請求（GET，POST，PUT，DELETE ..）的方法。例如，我們可以有以下方法：

• OnGet / OnGetAsync

• OnPost / OnPostAsync

• OnDelete / OnDeleteAsync

這些方法將由ASP.NET Core根據HTTP請求的類型自動匹配。

讓我們回到之前ChangePassword的示例。這是ChangePassword.cshtml.cs文件的一部分代碼：

OnGetAsync和OnPostAsync是Razor頁面 handlers約定好了的名稱。一旦您打開ChangePassword頁面，OnGetAsync?handler 將執行，當您從ChangePassword.cshtml頁面提交表單，OnPostAsync?handler 將被觸發。

此外，我們可以將所有的頁面代碼放在?.cshtml?文件中。例如，我們可以將這兩個函數從ChangePassword.cshtml.cs文件移動到ChangePassword.cshtml中：

關鍵字?? @functions?指令，它使Razor文件范圍內的代碼成為功能級方法。

Tag Helpers and HTML Helpers

我們還可以在Razor頁面內使用所有現有的Tag Helpers 和HTML Helpers；此外，可以創建自定義的幫助類，并在Razor頁面中使用它們。

路由

我在GitHub中的小項目設置演示了如何使用Razor頁面進行CRUD -?倉庫鏈接?。您需要.NET Core 2.0 preview 3（build 6764?才能正常運行）或更高版本以及Visual Studio 2017.3或更高版本。

以下是所有文件的項目結構：

除了兩個標準文件?Program.cs?和?Startup.cs?，一切都在Pages文件夾中；請注意，某些頁面具有匹配的后臺代碼文件。

如前所述，項目中頁面的位置（文件系統中的路徑）將確定匹配的URL。

這里是一些重要頁面文件和路由匹配的列表：

頁面文件路徑匹配的URL

~Pages/Index.cshtml	/ ， /Index
~Pages/Categories/Index.cshtml	/Categories ， Categories/Index
~Pages/Categories/Edit.cshtml	/Categories/Edit/1
~Pages/Categories/Create.cshtml	/Categories/Create

總結

• Razor頁面是以網頁為重點的Web編程方式

• 您可以（如果您想）在一個文件中實現所有的代碼和HTML

• Razor頁面文件的路徑決定了您的頁面的URL/路由

• 這不是老的ASP.NET網頁的新實現

• 在MVC中可以使用的的功能，我們也可以Razor頁面中使用：

• • 模型綁定

  • Razor支持

  • Tag Helpers

  • HTML Helpers

  • Handlers (Action方法)

  • 等等...

• 我們有（OnGet，OnGetAsync，OnPostAsync等）Handlers

• 文件系統（項目結構）中的頁面位置決定URL路徑

• 需要一個根文件夾

• 默認存儲在?Pages?根文件夾中（可配置）

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ASP.NET Core - Razor 页面介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。