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。
這裡是一些重要頁面文件和路由匹配的列表:
頁面文件路徑 | 匹配的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頁面介紹的文章就介紹到這瞭。希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- ASP.NET Core Razor頁面用法介紹
- ASP.NET Core MVC中的Form Tag Helpers用法
- Asp.net core前端框架Blazor介紹
- ASP.NET Core MVC中使用Tag Helper組件
- ASP.NET Core MVC自定義Tag Helpers用法介紹