ASP.NET Core中的Razor頁面介紹

簡介

隨著ASP.NET Core 2 即將來臨，最熱門的新事物是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 / OnGetAsyncOnPost / OnPostAsyncOnDelete / 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。

這裡是一些重要頁面檔案和路由匹配的列表：

總結

• 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頁面介紹的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。