ASP.NET Core-扩展Views的几种方式

在新的ASP.NET Core 中，那些你熟悉的方式有一部分仍然能用，只是Core版本针对视图又添加了一些东西。

 

Layout(布局)：

位于 Views\Shared\ 文件夹里 。通常情况下这个文件通常包含HTML的header，body和公用的一些东西。你可以多建几个互相进行组合，来完成整个站点的布局。

有时候子视图中想在布局视图中显示一部分html代码，比如javascript代码或者是css，这个时候就可以使用Sections，Layout中定义 @RenderSection("scripts", required: false) ，子视图中使用 @section scripts{/*........*/} 

 

ViewImports（全局视图）：

可以在全局视图中配置你其他视图中使用的一些比较公用的 using 引用，依赖注入等。

 

PartialView（分部视图）：

你可以提取html页面中重用的部分，把它放到一个新的Razor视图中，这个视图没有自己的Action，这种视图就叫做分部视图。 分部视图通常也在Views\Shard\文件夹。

分部视图同样也可以是一个数据视图,它可以从父视图中获取数据。例：在视图中引用分部视图 @{ await Html.RenderPartialAsync("Users", Model.Users);} 

 

ViewComponent（视图组件）：

MVC Core中新增了视图组件，用于显示页面可重用功能，包含代码、视图。组件必须包含在页面中，不能单独显示，类似以前的用户控件。

有时候你需要做一些分部视图的事情，但是又包含一些业务逻辑在里面。在过去，你可以使用ChildAction渲染结果到一个视图中，但是，在 ASP.NET Core中，有一种新的方式来做这件事情，它就是ViewComponent

与MVC5.0中的Html.RenderAction类似，区别是RenderAction性能差，会走Cotroller生命周期，如滤器会执行一遍。

与MVC5.0中的Html.RenderPartial区别是RenderPartial中业务数据依赖Action，ViewComponent业务数据不依赖Action，有自己的后台代码提供

@Component.Invoke("Top10Articles");

参考文章：

https://www.cnblogs.com/shenba/p/6629212.html
https://www.cnblogs.com/powertoolsteam/p/4212740.html

 

HtmlHelper：

在Core中比HTMLHelpers扩展更好的是新的TagHelpers，但是在扩展你视图的时候，HTMLHelpers仍然有它自己的一些适用的地方。

 

TagHelper：

MVC Core中的新功能，用来代替MVC版本的HtmlHelper，用来辅助生成html标记。

在ASP.NET Core MVC中你应该使用 TagHelpers 来替换 HtmlHelpers，因为它们更加的简洁和容易使用。另一个巨大的好处就是依赖注入，在HtmlHelpers中是使用不了的，因为HtmlHelpers 扩展的都是静态内容。

但TagHelpers是一个公共类，我们可以很容易的在它的构造函数中注入服务。

利用自定义标记赋予元素功能或添加属性的方式，跟Angular有点类似。

案例：

[HtmlTargetElement("nav-li")]
    public class NavTagHelper : TagHelper
    {
        public string Step { get; set; }
        public string Current { get; set; }
        public string Text { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            //output.Attributes.SetAttribute("class", $"btn btn-{BsButtonColor}");
            string _class = "breadcrumb__item--current";
            var content = new StringBuilder();
            _class = this.Step == this.Current ? "breadcrumb__item--current" : "breadcrumb__item--completed";
            content.Append($"<span class='breadcrumb__text' aria-current='step'>{this.Text}</span>");
            output.TagName = "li";
            output.Attributes.Add("class", $"breadcrumb__item {_class}");
            if (this.Current != ECheckoutStep.Pay.GetText())
            {
                content.Append(@"<svg class='icon-svg icon-svg--color-adaptive-light icon-svg--size-10 breadcrumb__chevron-icon' aria-hidden='true' focusable='false'><use xlink:href='#chevron-right'><svg id='chevron-right'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 1l1-1 4 4 1 1-1 1-4 4-1-1 4-4'></path></svg></svg></use></svg>");
            }

            output.Content.SetHtmlContent(content.ToString());
        }
    }

<ul class="breadcrumb breadcrumb--center">
            <nav-li step="@ViewBag.Step" current="@ECheckoutStep.Cart" text="Cart">
            </nav-li>
            <nav-li step="@ViewBag.Step" current="@ECheckoutStep.Info" text="Information">
            </nav-li>
            <nav-li step="@ViewBag.Step" current="@ECheckoutStep.Ship" text="Shipping">
            </nav-li>
            <nav-li step="@ViewBag.Step" current="@ECheckoutStep.Pay" text="Payment">
            </nav-li>
        </ul>

案例：

https://www.cnblogs.com/fanfan-90/p/11939962.html

 

 

 

未完待续...