原文地址：http://asp.net-hacker.rocks/2016/02/18/extending-razor-views.html
作者：Jürgen Gutsch
翻译：杨晓东(Savorboard)
现在，已经有很多种方式来扩展Razor视图了，我们循循渐进，先从最简单的开始。
如果你之前熟悉MVC5（以及之前的MVC）中的视图的话，有一部分你应该已经很熟悉了。在新的ASP.NET Core 中，那些你熟悉的方式有一部分仍然能用，只是Core版本针对视图又添加了一些东西。这篇文章，我们就来一起看看吧。
这是一个不具有动态内容的最基本的一个视图，就是你定义一个ViewModel , 然后ViewModel具有一些默认值，在视图上直接呈现而已。定死的ViewModel，好像不是很常见，以至于你使用Visual Studio新建一个默认的Web应用程序的话，都看不到它。它就看起来像一个*.cshtml结尾的HTML文件，但是，cshtml文件却是服务端可以解析的一种文件，所以你可以在里面使用一些Razor语法，比如HtmlHelpers，UrlHelpers等。同样，你可以使用ViewBag或者ViewData来从Controller的Action传输数据到View里面，来让它具有动态的内容。但是ViewBag和ViewData都是弱类型的，所以没有智能提示，用起来略不爽。
要在你的视图中使用强类型数据对象，你需要定义一个Model来在视图中使用。
|
1 2 3 4 |
<span class="xml">@model ExtendViews.ViewModels.AboutModel <span class="hljs-comment"><!-- usage: ---></span> @Model.FullName</span> |
这种方式是不是很常见的？ 下一种方式是一个更好的方式来布局我们的视图：
相当于ASP.NET的WebForms的母版页，不过它是定义Razor视图的基本布局的一种方式。它就是_Layout.cshtml, 位于 Views\Shared 文件夹里 。通常情况下这个文件通常包含HTML的header，body和公用的一些东西。你可以多建几个互相进行组合，来完成整个站点的布局。其他页面引用布局视图页的时候，是这样子写的（注意不需要扩展名）：
|
1 2 3 |
@<span class="hljs-keyword">{</span> Layout = <span class="hljs-string">"_Layout"</span>; } |
此调用需要在您的视图的第一行中。但你不需要在每一个视图中定义布局，如果你使用Visual Studio新建一个ASP.NET Core项目，Views文件夹有一个_ViewStart.cshtml,在运行的时候它会自动的导入到每个视图中去。
在_Layout.cshtml有一个方法法叫 RenderBody()，它就是用来渲染详细的视图页到模板布局视图中：
|
1 |
<span class="hljs-meta">@RenderBody()</span> |
在此方法的位置，详情视图就会被渲染到这里。
有时候子视图中想在主视图中显示一部分html代码，比如javascript代码或者是css，这个时候就可以使用Sections,通常情况下在页面的结尾部分。
在主视图中（_Layout.cshtml）定义一个Javascripts Section：
|
1 2 |
<span class="hljs-meta">@RenderSection</span>(<span class="hljs-string">"scripts"</span>, <span class="hljs-string">required:</span> <span class="hljs-literal">false</span>) |
有一个required参数来声明这个Section是否必须的。然后你就可以在子视图中这样使用：
|
1 2 3 4 5 6 7 8 |
<span class="xml">@section scripts { <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> $(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ <span class="hljs-comment">// some more js code here;</span> }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> }</span> |
如果你使用嵌套的布局，你可能需要嵌套这个区域。意思就是你在Section里面嵌套调用RenderSection():
|
1 2 3 4 |
<span class="hljs-meta">@section</span> scripts { <span class="hljs-meta">@RenderSection</span>(<span class="hljs-string">"scripts"</span>, <span class="hljs-string">required:</span> <span class="hljs-literal">false</span>) } |
你可以提取html页面中重用的部分，把它放到一个新的Razor视图中，这个视图没有自己的Action，这种视图就叫做分部视图。 分部视图通常也在Views\Shard\文件夹。
分部视图同样也可以是一个数据视图,它可以从父视图中获取数据（但不是必须的）：
|
1 2 3 4 5 6 7 8 9 10 |
@<span class="hljs-keyword">model</span> IEnumerable<UserModel> @if (Model.Any()) { <<span class="hljs-selector-tag">ul</span>> @<span class="hljs-keyword">foreach</span> (var user in Model) { <<span class="hljs-selector-tag">li</span>>@<span class="hljs-keyword">user.FullName</li></span> } </ul> } |
这个分部视图需要从父视图中获取用户列表的数据
|
1 |
@<span class="hljs-keyword">{</span> await Html.RenderPartialAsync(<span class="hljs-string">"Users"</span>, Model.Users);} |
如果你的分部视图没有定义用户模型，你就不需要传第二个参数。
这个 ASP.NET Core特有的。
译者注：类似于以前的用户控件
有时候你需要做一些分部视图的事情，但是又包含一些业务逻辑在里面。在过去，你可以使用ChildAction渲染结果到一个视图中，但是，在 ASP.NET Core中，有一种新的方式来做这件事情，它就是ViewComponents（我已经写了一篇关于ViewComponents的博文）。它类似于在MVC中的一种迷你的MVC，也就是说他们可以有自己的Controller，和单个的action以及view。ViewComponents是完全独立于你的当前视图的，但是可以通过你当前的视图传输数据。
想这样调用它，来渲染一个ViewComponents:
|
1 |
@Component.Invoke(<span class="hljs-string">"Top10Articles"</span>); |
可以看我的博客来学习怎么创建自己的ViewComponent。
在HTMLHelper类中，你可以创建你自己的扩展方法来扩展Razor语法：
|
1 2 3 4 5 6 7 |
<span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">class</span> <span class="hljs-title">HtmlHelperExtensions</span> { <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> HtmlString <span class="hljs-title">MyOwnHtmlHelper</span>(<span class="hljs-params"><span class="hljs-keyword">this</span> HtmlHelper helper, <span class="hljs-keyword">string</span> message</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> HtmlString($<span class="hljs-string">"<span>{message}<span>"</span>); } } |
在你的视图中，创建一个可重用的部分是非常有用的，它比分部视图多包含了一些业务逻辑。比HTMLHelpers扩展更好的是新的TagHelpers，但是在扩展你视图的时候，HTMLHelpers仍然有它自己的一些适用的地方。
这是 ASP.NET Core 非常好的一个新特性。
一个扩展你视图的小助手，它看起来像一个原生的HTML标签一样。 在ASP.NET Core MVC中你应该使用 TagHelpers 来替换 HtmlHelpers，因为它们更加的简洁和容易使用。另一个巨大的好处就是依赖注入，在HtmlHelpers中是使用不了的，因为HtmlHelpers 扩展的都是静态内容。 但TagHelpers是一个公共类，我们可以很容易的在它的构造函数中注入服务。
下面是一个很简单的小示例，来展示怎么样定义一个TagHelper：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[TargetElement(<span class="hljs-string">"hi"</span>)] <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">HelloTagHelper</span> : <span class="hljs-title">TagHelper</span> { <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">override</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Process</span>(<span class="hljs-params">TagHelperContext context, TagHelperOutput output</span>) </span>{ output.TagName = <span class="hljs-string">"p"</span>; output.Attributes.Add(<span class="hljs-string">"id"</span>, context.UniqueId); output.PreContent.SetContent(<span class="hljs-string">"Hello "</span>); output.PostContent.SetContent(<span class="hljs-keyword">string</span>.Format(<span class="hljs-string">", time is now: {0}"</span>, DateTime.Now.ToString(<span class="hljs-string">"HH:mm"</span>))); } } |
这里定义了一个叫做hi的标签，它以HTML标记来呈现，p标签的内容是当前时间。
使用:
|
1 |
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">hi</span>></span>John Smith<span class="hljs-tag"></<span class="hljs-name">hi</span>></span></span> |
结果:
|
1 |
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hello John Smith, time is now: 18:55<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span> |
ASP.NET Core MVC 已经默认提供了很多TagHelpers来替换以前的HtmlHelpers。例如ActionLink已经被新的TagHelper所替换：
|
1 |
<span class="hljs-meta">@Html.ActionLink(“About me”, “About”, “Home”)</span> |
新的TagHelper像这样来创建一个link：
|
1 |
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">asp-controller</span>=<span class="hljs-string">”Home”</span> <span class="hljs-attr">asp-action</span>=<span class="hljs-string">”About”</span>></span>About me<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span> |
以上两种方式来创建一个a标签的结果：
|
1 |
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">”</span>/<span class="hljs-attr">Home</span>/<span class="hljs-attr">About</span>”></span>About me<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span> |
可以看到，TagHelpers看起来更像原生的HTML，他们在视图中更加的直观，更高的可读性，并且更容易使用。
这也是ASP.NET Core的新特性。
在扩展你的视图的时候，可以使用依赖注入了，这是一个非常大改进。是的，你可以在你的视图中使用DI了。
在StackOverflow和reddit有人这样问？
这真的有意义吗? 这不是会搞乱我的视图吗？ 这不是与MVC模式背离吗？
我认为，不是这样的。 的确，在真正需要的地方你才使用，并且，你使用的时候需要非常小心。 有这样一个有效的场景：你创建一个表单来编辑用户的资料信息（User Profile）, 用户可以添加他的公司位置，地址， 国家城市等等，我不愿意从Action到View中传输公司位置 ,地址和国家城市。我只愿意通过用户资料本身（User Profile）, 我只想在 Action 中处理用户资料（User Profile）。这时候可以注入服务来给我查询数据，这就是为什么这种情况下它是非常有用的。它可以让我们的Action和ViewModel 保持非常的干净。
在Startup.cs中的ConfigureServices来注册你具体的服务，然后你就可以在视图中这样来使用，只需要一行代码：
|
1 |
@<span class="hljs-keyword">inject</span> DiViews.Services.ICountryService CountryService; |
现在你可以在你的视图中使用ContryService来填充国家下拉列表。
我在这篇博客中写了很多关于依赖注入的博文。
在一个ASP.NET MVC 项目中，我从来没有真正的使用过函数这个功能。我只在一个Umbraco的CMS系统中用过一次。不管怎么说，这也是扩展你视图的另一种小技巧。也许你有很复杂视图方面的业务逻辑，在这种情况下，你可以在你的视图中写C#方法：
|
1 2 3 4 5 6 7 |
@<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-title">s</span> </span>{ <span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> ReverseString(<span class="hljs-built_in">string</span> input) { <span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>.Join(<span class="hljs-string">""</span>, input.Reverse()); } } |
最后一点，你可以在_ViewImports.cshtml文件中，来配置你其他视图中使用的一些比较公用的 using 引用，依赖注入等。
不管是以前的MVC还是新的Core MVC, 都有很多方法来扩展视图，虽然扩展这些视图的方式有些类似，但是每一种都有它最适合的地方，所以我们在使用这些特性来解决我们的问题的时候，我们应该多加思考，找到最合适的方式。
译者注：本文翻译并非逐字翻译，由于水平有限，难免出现一些错误和翻译不准确的地方，希望读者能够指出并堪正，不胜感激。
from:http://www.cnblogs.com/savorboard/p/aspnetcore-views.html