原文地址：http://asp.net-hacker.rocks/2016/02/18/extending-razor-views.html
作者：Jürgen Gutsch
翻譯：楊曉東(Savorboard)

現(xiàn)在，已經(jīng)有很多種方式來(lái)擴(kuò)展Razor視圖了，我們循循漸進(jìn)，先從最簡(jiǎn)單的開(kāi)始。
如果你之前熟悉MVC5（以及之前的MVC）中的視圖的話(huà)，有一部分你應(yīng)該已經(jīng)很熟悉了。在新的ASP.NET Core 中，那些你熟悉的方式有一部分仍然能用，只是Core版本針對(duì)視圖又添加了一些東西。這篇文章，我們就來(lái)一起看看吧。

#1：數(shù)據(jù)視圖（Typed Views）

這是一個(gè)不具有動(dòng)態(tài)內(nèi)容的最基本的一個(gè)視圖，就是你定義一個(gè)ViewModel , 然后ViewModel具有一些默認(rèn)值，在視圖上直接呈現(xiàn)而已。定死的ViewModel，好像不是很常見(jiàn)，以至于你使用Visual Studio新建一個(gè)默認(rèn)的Web應(yīng)用程序的話(huà)，都看不到它。它就看起來(lái)像一個(gè)*.cshtml結(jié)尾的HTML文件，但是，cshtml文件卻是服務(wù)端可以解析的一種文件，所以你可以在里面使用一些Razor語(yǔ)法，比如HtmlHelpers，UrlHelpers等。同樣，你可以使用ViewBag或者ViewData來(lái)從Controller的Action傳輸數(shù)據(jù)到View里面，來(lái)讓它具有動(dòng)態(tài)的內(nèi)容。但是ViewBag和ViewData都是弱類(lèi)型的，所以沒(méi)有智能提示，用起來(lái)略不爽。

要在你的視圖中使用強(qiáng)類(lèi)型數(shù)據(jù)對(duì)象，你需要定義一個(gè)Model來(lái)在視圖中使用。

@model ExtendViews.ViewModels.AboutModel<!-- usage: --->@Model.FullName

這種方式是不是很常見(jiàn)的？ 下一種方式是一個(gè)更好的方式來(lái)布局我們的視圖：

#2：布局（Layouts）：

相當(dāng)于ASP.NET的WebForms的母版頁(yè)，不過(guò)它是定義Razor視圖的基本布局的一種方式。它就是_Layout.cshtml, 位于 Views\Shared\ 文件夾里 。通常情況下這個(gè)文件通常包含HTML的header，body和公用的一些東西。你可以多建幾個(gè)互相進(jìn)行組合，來(lái)完成整個(gè)站點(diǎn)的布局。其他頁(yè)面引用布局視圖頁(yè)的時(shí)候，是這樣子寫(xiě)的（注意不需要擴(kuò)展名）：

@{Layout = "_Layout"; }

此調(diào)用需要在您的視圖的第一行中。但你不需要在每一個(gè)視圖中定義布局，如果你使用Visual Studio新建一個(gè)ASP.NET Core項(xiàng)目，Views文件夾有一個(gè)_ViewStart.cshtml,在運(yùn)行的時(shí)候它會(huì)自動(dòng)的導(dǎo)入到每個(gè)視圖中去。

在_Layout.cshtml有一個(gè)方法法叫?RenderBody()，它就是用來(lái)渲染詳細(xì)的視圖頁(yè)到模板布局視圖中：

@RenderBody()

在此方法的位置，詳情視圖就會(huì)被渲染到這里。

#3: 區(qū)域（Sections）

有時(shí)候子視圖中想在主視圖中顯示一部分html代碼，比如javascript代碼或者是css，這個(gè)時(shí)候就可以使用Sections,通常情況下在頁(yè)面的結(jié)尾部分。

在主視圖中（_Layout.cshtml）定義一個(gè)Javascripts Section：

@RenderSection("scripts", required: false)

有一個(gè)required參數(shù)來(lái)聲明這個(gè)Section是否必須的。然后你就可以在子視圖中這樣使用：

@section scripts { ? ?<script> ? ? ? ?$(function() { ? ? ? ? ? ?// some more js code here; ? ? ? ?}); ? ?</script>}

如果你使用嵌套的布局，你可能需要嵌套這個(gè)區(qū)域。意思就是你在Section里面嵌套調(diào)用RenderSection():

@section scripts { ? ?@RenderSection("scripts", required: false) }

#4: 分部視圖（ PartialViews）

你可以提取html頁(yè)面中重用的部分，把它放到一個(gè)新的Razor視圖中，這個(gè)視圖沒(méi)有自己的Action，這種視圖就叫做分部視圖。 分部視圖通常也在Views\Shard\文件夾。

分部視圖同樣也可以是一個(gè)數(shù)據(jù)視圖,它可以從父視圖中獲取數(shù)據(jù)（但不是必須的）：

@model IEnumerable<UserModel> @if (Model.Any()) {<ul>@foreach (var user in Model){<li>@user.FullName</li>}</ul> }

這個(gè)分部視圖需要從父視圖中獲取用戶(hù)列表的數(shù)據(jù)

@{ await Html.RenderPartialAsync("Users", Model.Users);}

如果你的分部視圖沒(méi)有定義用戶(hù)模型，你就不需要傳第二個(gè)參數(shù)。

#5：視圖組件（ViewComponents）

這個(gè) ASP.NET Core特有的。

譯者注：類(lèi)似于以前的用戶(hù)控件

有時(shí)候你需要做一些分部視圖的事情，但是又包含一些業(yè)務(wù)邏輯在里面。在過(guò)去，你可以使用ChildAction渲染結(jié)果到一個(gè)視圖中，但是，在 ASP.NET Core中，有一種新的方式來(lái)做這件事情，它就是ViewComponents（我已經(jīng)寫(xiě)了一篇關(guān)于ViewComponents的博文）。它類(lèi)似于在MVC中的一種迷你的MVC，也就是說(shuō)他們可以有自己的Controller，和單個(gè)的action以及view。ViewComponents是完全獨(dú)立于你的當(dāng)前視圖的，但是可以通過(guò)你當(dāng)前的視圖傳輸數(shù)據(jù)。

想這樣調(diào)用它，來(lái)渲染一個(gè)ViewComponents:

@Component.Invoke("Top10Articles");

可以看我的博客來(lái)學(xué)習(xí)怎么創(chuàng)建自己的ViewComponent。

請(qǐng)?jiān)谖业念A(yù)覽后viewcomponent一看學(xué)習(xí)如何創(chuàng)建你自己的。

#6: HTML助手（HtmlHelpers）

在HTMLHelper類(lèi)中，你可以創(chuàng)建你自己的擴(kuò)展方法來(lái)擴(kuò)展Razor語(yǔ)法：

public static class HtmlHelperExtensions{ ? ?public static HtmlString MyOwnHtmlHelper(this HtmlHelper helper, string message) ? ?{ ? ? ? ?return new HtmlString($"<span>{message}<span>");} }

在你的視圖中，創(chuàng)建一個(gè)可重用的部分是非常有用的，它比分部視圖多包含了一些業(yè)務(wù)邏輯。比HTMLHelpers擴(kuò)展更好的是新的TagHelpers，但是在擴(kuò)展你視圖的時(shí)候，HTMLHelpers仍然有它自己的一些適用的地方。

#7: 標(biāo)簽助手（TagHelper）

這是 ASP.NET Core 非常好的一個(gè)新特性。

一個(gè)擴(kuò)展你視圖的小助手，它看起來(lái)像一個(gè)原生的HTML標(biāo)簽一樣。 在ASP.NET Core MVC中你應(yīng)該使用 TagHelpers 來(lái)替換 HtmlHelpers，因?yàn)樗鼈兏拥暮?jiǎn)潔和容易使用。另一個(gè)巨大的好處就是依賴(lài)注入，在HtmlHelpers中是使用不了的，因?yàn)镠tmlHelpers 擴(kuò)展的都是靜態(tài)內(nèi)容。 但TagHelpers是一個(gè)公共類(lèi)，我們可以很容易的在它的構(gòu)造函數(shù)中注入服務(wù)。

下面是一個(gè)很簡(jiǎn)單的小示例，來(lái)展示怎么樣定義一個(gè)TagHelper：

[TargetElement("hi")] public class HelloTagHelper : TagHelper { public override void Process(TagHelperContext context, TagHelperOutput output) ? ?{ output.TagName = "p"; output.Attributes.Add("id", context.UniqueId); output.PreContent.SetContent("Hello "); output.PostContent.SetContent(string.Format(", time is now: {0}", ?DateTime.Now.ToString("HH:mm"))); } }

這里定義了一個(gè)叫做hi的標(biāo)簽，它以HTML標(biāo)記來(lái)呈現(xiàn)，p標(biāo)簽的內(nèi)容是當(dāng)前時(shí)間。

使用:

<hi>John Smith</hi>

結(jié)果:

<p>Hello John Smith, time is now: 18:55</p>

ASP.NET Core MVC 已經(jīng)默認(rèn)提供了很多TagHelpers來(lái)替換以前的HtmlHelpers。例如ActionLink已經(jīng)被新的TagHelper所替換：

@Html.ActionLink(“About me”, “About”, “Home”)

新的TagHelper像這樣來(lái)創(chuàng)建一個(gè)link：

<a asp-controller=”Home” asp-action=”About”>About me</a>

以上兩種方式來(lái)創(chuàng)建一個(gè)a標(biāo)簽的結(jié)果：

<a href=”/Home/About”>About me</a>

可以看到，TagHelpers看起來(lái)更像原生的HTML，他們?cè)谝晥D中更加的直觀，更高的可讀性，并且更容易使用。

#8: 依賴(lài)注入（Dependency Injection）

這也是ASP.NET Core的新特性。

在擴(kuò)展你的視圖的時(shí)候，可以使用依賴(lài)注入了，這是一個(gè)非常大改進(jìn)。是的，你可以在你的視圖中使用DI了。

在StackOverflow和reddit有人這樣問(wèn)？
這真的有意義嗎? 這不是會(huì)搞亂我的視圖嗎？ 這不是與MVC模式背離嗎？

我認(rèn)為，不是這樣的。 的確，在真正需要的地方你才使用，并且，你使用的時(shí)候需要非常小心。 有這樣一個(gè)有效的場(chǎng)景：你創(chuàng)建一個(gè)表單來(lái)編輯用戶(hù)的資料信息（User Profile）, 用戶(hù)可以添加他的公司位置，地址， 國(guó)家城市等等，我不愿意從Action到View中傳輸公司位置 ,地址和國(guó)家城市。我只愿意通過(guò)用戶(hù)資料本身（User Profile）, 我只想在 Action 中處理用戶(hù)資料（User Profile）。這時(shí)候可以注入服務(wù)來(lái)給我查詢(xún)數(shù)據(jù)，這就是為什么這種情況下它是非常有用的。它可以讓我們的Action和ViewModel 保持非常的干凈。

在Startup.cs中的ConfigureServices來(lái)注冊(cè)你具體的服務(wù)，然后你就可以在視圖中這樣來(lái)使用，只需要一行代碼：

@inject DiViews.Services.ICountryService CountryService;

現(xiàn)在你可以在你的視圖中使用ContryService來(lái)填充國(guó)家下拉列表。

我在這篇博客中寫(xiě)了很多關(guān)于依賴(lài)注入的博文。

#9: 函數(shù)（Functions）

在一個(gè)ASP.NET MVC 項(xiàng)目中，我從來(lái)沒(méi)有真正的使用過(guò)函數(shù)這個(gè)功能。我只在一個(gè)Umbraco的CMS系統(tǒng)中用過(guò)一次。不管怎么說(shuō)，這也是擴(kuò)展你視圖的另一種小技巧。也許你有很復(fù)雜視圖方面的業(yè)務(wù)邏輯，在這種情況下，你可以在你的視圖中寫(xiě)C#方法：

@functions{ ? ?public string ReverseString(string input){ ? ? ? ?return String.Join("", input.Reverse());} }

#10: 配置全局視圖（Global view configuration）

最后一點(diǎn)，你可以在_ViewImports.cshtml文件中，來(lái)配置你其他視圖中使用的一些比較公用的 using 引用，依賴(lài)注入等。

總結(jié)

不管是以前的MVC還是新的的Core的MVC, 都有很多方法來(lái)擴(kuò)展視圖，雖然擴(kuò)展這些視圖的方式有些類(lèi)似，但是每一種都有它最適合的地方，所以我們?cè)谑褂眠@些特性來(lái)解決我們的問(wèn)題的時(shí)候，我們應(yīng)該多加思考，找到最合適的方式。

譯者注：本文翻譯并非逐字翻譯，由于水平有限，難免出現(xiàn)一些錯(cuò)誤和翻譯不準(zhǔn)確的地方，希望讀者能夠指出并堪正，不勝感激。

相關(guān)文章：

• 微軟.NET 正式劈腿成功，橫跨所有平臺(tái)

• .NET Core 1.0 CentOS7 嘗試

• 解讀發(fā)布：.NET Core RC2 and .NET Core SDK Preview 1

• [.NET Core].NET Core R2安裝及示例教程

• ASP.NET Core 開(kāi)發(fā)-中間件(Middleware)

• 結(jié)合Jexus + Kestrel 部署 asp.net core 生產(chǎn)環(huán)境

• 通過(guò)Jexus 部署 dotnetcore版本MusicStore 示例程序

• ASP.NET Core 中文文檔 第一章 入門(mén)

• 用 Visual Studio Code 在 macOS 上創(chuàng)建首個(gè) ASP.NET Core 應(yīng)用程序

• 用 Visual Studio 和 ASP.NET Core MVC 創(chuàng)建首個(gè) Web API

• 用 Visual Studio 發(fā)布一個(gè) Azure 云 Web 應(yīng)用程序

• ASP.NET Core MVC 與 Visual Studio 入門(mén)

• 第二章指南（4.2）添加 Controller

• DotNet Core 介紹

• asp.net core 中間件詳解及項(xiàng)目實(shí)戰(zhàn)

• 教你實(shí)踐ASP.NET Core Authorization（免看文檔教程）

• asp.net core 使用 Redis 和 Protobuf 進(jìn)行 Session 緩存

• asp.net core 中間件詳解及項(xiàng)目實(shí)戰(zhàn)

• 第二章 指南（4.3）添加 View

• dotnet core開(kāi)發(fā)體驗(yàn)之開(kāi)始MVC

• dotnet core 開(kāi)發(fā)體驗(yàn)之Routing

• 聊聊ASP.NET Core默認(rèn)提供的這個(gè)跨平臺(tái)的服務(wù)器——KestrelServer

• 簡(jiǎn)析.NET Core 以及與 .NET Framework的關(guān)系

• .NET Core 使用Dapper 操作MySQL

• 使用 CommandLineApplication 類(lèi)創(chuàng)建專(zhuān)業(yè)的控制臺(tái)程序

• 簡(jiǎn)析 .NET Core 構(gòu)成體系

• .NET Core也可以使用MongoDB了

• .NET Core & ASP.NET Core 1.0在Redhat峰會(huì)上正式發(fā)布

• .NET Core：面向未來(lái)的開(kāi)源跨平臺(tái)開(kāi)發(fā)技術(shù)

• 微軟說(shuō)它深?lèi)?ài)著Linux，現(xiàn)在它用行動(dòng)證明了

• 移植.NET Core計(jì)劃，整合各平臺(tái)變得更簡(jiǎn)單了！

• ASP.NET Core 介紹

• 通過(guò)幾個(gè)Hello World感受.NET Core全新的開(kāi)發(fā)體驗(yàn)

• ASP.NET Core 運(yùn)行原理剖析1:初始化WebApp模版并運(yùn)行

• .NET Core系列 ： 1、.NET Core 環(huán)境搭建和命令行CLI入門(mén)

• Asp.Net Core 發(fā)布和部署（ MacOS + Linux + Nginx ）

• Asp.Net Core 發(fā)布和部署（Linux + Jexus ）
  

• 學(xué)習(xí)ASP.NET Core，你必須了解無(wú)處不在的“依賴(lài)注入”

• .NET Core應(yīng)用類(lèi)型（Portable apps & Self-contained apps）

• .NET Core 1.0發(fā)布：微軟開(kāi)源跨平臺(tái)大布局序幕

• ASP.NET Core 運(yùn)行原理剖析2:Startup 和 Middleware(中間件)

• 在Windows Server 2012 R2 Standard 部署 ASP.NET Core程序

• ASP.NET Core 開(kāi)發(fā)-Entity Framework (EF) Core 1.0 Database First

• 擁抱.NET Core，跨平臺(tái)的輕量級(jí)RPC：Rabbit.Rpc

• 使用 dotnet watch 開(kāi)發(fā) ASP.NET Core 應(yīng)用程序

• ASP.NET Core 發(fā)布至Linux生產(chǎn)環(huán)境 Ubuntu 系統(tǒng)

• ASP.NET Core Docker部署

• ASP.NET Core "完整發(fā)布,自帶運(yùn)行時(shí)" 到j(luò)exus

• 全球首發(fā)免費(fèi)的MySql for Entity Framework Core

• ASP.NET Core開(kāi)發(fā)-使用Nancy框架

• .NET Core全新路線圖

• 解決.NET Core中MailKit無(wú)法使用阿里云郵件推送服務(wù)的問(wèn)題
  

原文地址：http://www.cnblogs.com/savorboard/p/aspnetcore-views.html

---

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

總結(jié)

以上是生活随笔為你收集整理的ASP.NET Core 十种方式扩展你的 Views的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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