Razor Page介紹

前言

??? 上周期待已久的Asp.Net Core 2.0提前發(fā)布了，一下子Net圈熱鬧了起來(lái)，2.0帶來(lái)了很多新的特性和新的功能，其中Razor Page引起我的關(guān)注，作為web程序員來(lái)說(shuō)，Asp.Net下的任何web框架都會(huì)去特別關(guān)注，因?yàn)槊看我粋€(gè)新的框架出來(lái)，意味著一次革命。此次的Razor Page是否能帶來(lái)不一樣的體驗(yàn)?zāi)?#xff0c;讓我們一起來(lái)看看吧。

什么是Razor Page

??? 我們都知道在Asp.Net MVC中，Razor是其一種視圖引擎。而今天我們介紹的Razor Page卻是一種web框架，它是一種簡(jiǎn)化的MVC框架，如果你曾經(jīng)做過(guò)WebForm的開(kāi)發(fā)者，你會(huì)發(fā)現(xiàn)，Razor Page有點(diǎn)類似Web Form，一個(gè)page，一個(gè)class。

??? 大家或許會(huì)有疑惑，我們現(xiàn)在Asp.Net MVC已經(jīng)很完善了，為何還需要出來(lái)一種新型的框架呢？在我看來(lái)，MVC確實(shí)已經(jīng)足夠強(qiáng)大了，只是因?yàn)樘珡?qiáng)大了，卻變成了它的缺點(diǎn)。當(dāng)我們的業(yè)務(wù)越來(lái)越龐大的時(shí)候，你是否覺(jué)得你的一個(gè)Controller內(nèi)部已經(jīng)凌亂不堪？當(dāng)我們業(yè)務(wù)模塊劃分越多的時(shí)候，你是否會(huì)為你的Model創(chuàng)建而頭疼呢？當(dāng)我們創(chuàng)建一個(gè)新的View的時(shí)候，我們需要在MVC層增加1個(gè)View，1個(gè)Model，修改一個(gè)Controller，每當(dāng)這個(gè)時(shí)候，我都會(huì)疑惑這不是違反Open-Closed Principle（對(duì)擴(kuò)展開(kāi)放，對(duì)修改關(guān)閉）了嘛！這個(gè)時(shí)候我會(huì)想起以前的webform，現(xiàn)在不需要了，我們有了Razor Page，一種更輕量級(jí)的MVC（我覺(jué)得更像MVVM）。

如何創(chuàng)建Razor Page

我們可以通過(guò)多種方式來(lái)創(chuàng)建Razor Page項(xiàng)目，最簡(jiǎn)單的就是利用dotnet命令方式，當(dāng)然我還是建議您使用Visual Studio 2017（宇宙最強(qiáng)的IDE）。要?jiǎng)?chuàng)建Razor Page，你需要先安裝.Net Core 2.0 SDK，如果要使用VS2017來(lái)創(chuàng)建，您還必須要更新到15.3版本以上

dotnet命令方式創(chuàng)建

打開(kāi)cmd或者powershell工具，先檢查下你的dotnet 版本是否為2.0.0

dotnet –version

先通過(guò)命令，到你需要?jiǎng)?chuàng)建項(xiàng)目的目錄，我這里為E盤下demos目錄：cd e:\demos\RazorPageDemo1

dotnet new razor

輸入以上命令，你就已經(jīng)創(chuàng)建了razorPage的項(xiàng)目了，這里說(shuō)一下dotnet 2.0默認(rèn)是自動(dòng)restore的，你也可以通過(guò)--no-restore選項(xiàng)關(guān)閉。我們直接通過(guò)命令dotnet run 可以直接運(yùn)行，看到的頁(yè)面應(yīng)該跟之前mvc創(chuàng)建的類似。

輸入dir，我們看下生成了哪些：

跟之前mvc不同的是，我們不再看到model，view，controller目錄了，取而代之的是Pages目錄，這個(gè)就是我們的razor Page的主要工作目錄。

Visual Studio 2017創(chuàng)建Razor Page

用Visual Studio 2017創(chuàng)建是非常方便的（宇宙最強(qiáng)IDE），不過(guò)我們必須要先升級(jí)到15.3，升級(jí)之后選擇新建項(xiàng)目->.Net Core –> Asp.Net Core Web應(yīng)用程序，接下來(lái)會(huì)彈出一個(gè)對(duì)話框，讓我們選擇模板類型：

多了好多模板，好興奮啊！我們?cè)谶@里無(wú)法找到Razor Page，那是因?yàn)镽azor Page已經(jīng)變成默認(rèn)的【W(wǎng)eb應(yīng)用程序模板】了，而傳統(tǒng)的MVC方式已經(jīng)變成【W(wǎng)eb應(yīng)用程序（模型視圖控制器）】。選擇【W(wǎng)eb應(yīng)用程序模板】，點(diǎn)擊確定我們就完成創(chuàng)建了，通過(guò)Solution Explore，我們可以看到：

與命令方式創(chuàng)建的一致。

QuickStart Razor Page

Hello Razor Page

通過(guò)上節(jié)我們創(chuàng)建了Razor Page項(xiàng)目，直接通過(guò)dotnet run或者在vs中F5運(yùn)行。上文中我們說(shuō)到，Razor Page的項(xiàng)目中，我們的關(guān)注點(diǎn)都在Pages目錄下，在VS Explore中，我們看到在Index.cshtml的左邊有一個(gè)三角箭頭，點(diǎn)擊就會(huì)看到Index.cshtml.cs文件，是不是感覺(jué)回到了webform。我們看下代碼：

public class IndexModel : PageModel { ?
??public void OnGet(){} }

因?yàn)槲覀兊腎ndex頁(yè)面沒(méi)有綁定任何數(shù)據(jù)，所以這里基本上只繼承了PageModel，OnGet方法是個(gè)約定，查看mvc的源碼你會(huì)發(fā)現(xiàn)它會(huì)獲取On{handler}{Async}()。比如OnGet，它會(huì)在Get Index的時(shí)候被執(zhí)行，我們可以通過(guò)這個(gè)約定進(jìn)行數(shù)據(jù)綁定，這里知道下在Razor Page下HttpMethod也是一個(gè)handler，所以Razor Page的處理方式是通過(guò)handler進(jìn)行的。

舉個(gè)例子，我們?cè)贗ndexModel中添加一個(gè)String類型的屬性Message，在OnGet中進(jìn)行賦值：

public void OnGet() {Message = "this is a test!"; }

然后我們修改下Index.csthml：

@page @model IndexModel @{ViewData["Title"] = "Home page"; }<div class="row">Message : @Model.Message</div>

運(yùn)行下，如果我們?cè)陧?yè)面上看到Message ： this is a test!，說(shuō)明賦值成功。

是不是很方便，一般我們的web基本上百分之八十在Get和Post，特別情況會(huì)出現(xiàn)其他HttpMethod，當(dāng)然我們的RazorPage也支持，不過(guò)不建議。

現(xiàn)在來(lái)說(shuō)PageModel就是一個(gè)Model，Action，HttpMethod的合體，對(duì)于Controller使用文件自己的路徑+文件名的方式，比如原先我們的HomeController，默認(rèn)情況下我們可以通過(guò)’/’訪問(wèn)也可以通過(guò)’/Home/’ 訪問(wèn)，這其實(shí)有歧義的，為了避免這種情況，我們必須去修改Route，非常不方便，而現(xiàn)在，我們只需要在Pages主目錄下創(chuàng)建相應(yīng)的Action就可以了，微軟提供了Razor Page的對(duì)應(yīng)Url關(guān)系，如圖：

快速自定義Routing

你是否會(huì)問(wèn)現(xiàn)在還支持/Controller/Action/ID 嗎？

支持，不過(guò)你需要在cshtml頁(yè)面上，通過(guò)@page設(shè)置路由

@page "{parameter:type?}"

例如 /Address/Province/City? 我們只需要在Address/Index.cshtml頁(yè)面上加入如下：

@page "{Province}/{City?}"

問(wèn)號(hào)代表可選參數(shù)。這樣的好處就是我們不需要在RegisterRoute的時(shí)候去填寫規(guī)則了，是不是很棒！

那像原來(lái)我們?cè)谝粋€(gè)Controller中，有Get()和Get(id)表示獲取列表和獲取單個(gè)Item，那在Razor Page中如何運(yùn)用呢？

抱歉，目前我沒(méi)有找到最佳的解決方法，原本我打算在@page "~/user/{id:int}"，但是測(cè)試結(jié)果發(fā)現(xiàn)不支持，因?yàn)槲覀兊膒age對(duì)應(yīng)到url也是一個(gè)目錄，@page route的時(shí)候它不會(huì)識(shí)別絕對(duì)路徑和相對(duì)路徑，它只會(huì)在當(dāng)前路徑后面添加映射，也就是說(shuō)我們的url變成了/users/user/{id}，目前最佳的解決方式是建立兩個(gè)目錄，如下：

模型綁定

在Razor Page中，數(shù)據(jù)綁定是非常簡(jiǎn)單的， 您只要在需要綁定的屬性上添加[BindProperty]特性即可。

public class IndexModel : PageModel { ? ?public string Message { get; set; }[BindProperty] ?
? ?public User TestUser { get; set; }}

public class User { ? ?public Guid UserID { get; set; } ? ?public string Name { get; set; } }

默認(rèn)情況模型綁定不支持Get方法，你需要使用[BindProperty(SupportsGet=true)]

TempData 臨時(shí)數(shù)據(jù)

TempData是Asp.Net Core 2.0新增的特性，你只需要在PageModel中的屬性上加上TempData特性即可。加上TempData特性的屬性，會(huì)在你跳轉(zhuǎn)路由或者頁(yè)面的時(shí)候隱性的傳遞過(guò)去。

什么意思呢？比如當(dāng)你創(chuàng)建一個(gè)用戶的時(shí)候，你會(huì)希望跳轉(zhuǎn)回用戶列表頁(yè)，并在用戶列表頁(yè)提示添加成功的信息，這時(shí)候你可以通過(guò)在Message屬性上加上[TempData]特性，引用下微軟Docs的例子：

public class CreateDotModel : PageModel {[TempData] ?
??public string Message { get; set; }[BindProperty] ?
? ?public Customer Customer { get; set; }

? ?public async Task<IActionResult> OnPostAsync(){ ? ? ? ?if (!ModelState.IsValid){ ? ? ? ? ? ?return Page();} ? ? ? ?//todo create a new customerMessage = $"Customer {Customer.Name} added"; ? ? ? ?return RedirectToPage("./Index");} }

跳轉(zhuǎn)到Index后，我們的IndexModel的Message屬性（需要同樣設(shè)置TempData特性）就會(huì)被賦值。有點(diǎn)類似于之前的model傳遞，但又不一樣，感覺(jué)棒棒噠！

遇到的一些問(wèn)題

Q:自定義routing的時(shí)候，無(wú)法支持絕對(duì)路徑和相對(duì)路徑

A:應(yīng)該可以通過(guò)重寫某個(gè)接口達(dá)到目的，稍后我會(huì)看下

Q:不支持多個(gè)handler在同一個(gè)pageModel中，比如OnGet, OnGetAsync不能在同一個(gè)PageModel中

A：可以通過(guò)自己重寫IPageHandlerMethodSelector接口，然后注冊(cè)到service中應(yīng)該可以解決。

Q:用VS2017創(chuàng)建新的Page的時(shí)候，會(huì)在頁(yè)面上顯示紅線

A：關(guān)閉頁(yè)面再打開(kāi)。。。。

寫在最后

??? 最近工作有點(diǎn)忙，Core2.0的出現(xiàn)使Net圈沸騰了，RazorPage的出現(xiàn)更是讓我們這種web開(kāi)發(fā)者為之振奮，今天介紹的有限，畢竟也是剛出來(lái)的東西。個(gè)人覺(jué)得Razor Page還是非常棒的，雖然還有些問(wèn)題，如果遇到Razor Page無(wú)法解決的事情，請(qǐng)大家結(jié)合MVC，國(guó)外有大神就是這么做的，但我相信不久之后，Razor Page會(huì)瘋狂出現(xiàn)在我們面前，特別是對(duì)于微服務(wù)架構(gòu)來(lái)說(shuō)，簡(jiǎn)單和快速是微服務(wù)的重要所在。

相關(guān)文章：?

• .NET Core 2.0 正式發(fā)布信息匯總

• .NET Standard 2.0 特性介紹和使用指南

• .NET Core 2.0 的dll實(shí)時(shí)更新、https、依賴包變更問(wèn)題及解決

• .NET Core 2.0 特性介紹和使用指南

• Entity Framework Core 2.0 新特性

• 體驗(yàn) PHP under .NET Core

• .NET Core 2.0使用NLog

• 升級(jí)項(xiàng)目到.NET Core 2.0，在Linux上安裝Docker，并成功部署

• 解決Visual Studio For Mac Restore失敗的問(wèn)題

• ASP.NET Core 2.0 特性介紹和使用指南

• .Net Core下通過(guò)Proxy 模式 使用 WCF

• .NET Core 2.0 開(kāi)源Office組件 NPOI

• ASP.NET Core Razor頁(yè)面 vs MVC
  

原文地址：http://www.cnblogs.com/inday/p/razor-page-in-asp-net-core-2.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

總結(jié)

以上是生活随笔為你收集整理的Razor Page–Asp.Net Core 2.0新功能 Razor Page介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。