.Net Core 视图组件新玩法（ViewComponent视图组件族）

大家好，最近发现一个彩蛋，使得.Net Core的视图组件有了新玩法，也有实用价值，所以分享出来给大家，哈哈

概念：视图组件族

这是我自己取的叫法，因为这些组件有个共同的扩展名，所以就给它叫“族”吧。

通常，创建一个视图组件后，必须有个对应的文件夹存放视图文件（默认为Default.cshtml），如果多个视图就得创建多个文件夹，有点累赘了。

现在有个新的做法：

我们对视图组件命名的时候，用点分隔，例如：.HHF，small.HHF，big.HHF

程序在运行的时候，是调用完整名称的，但在寻找视图的时候，只认最后一个点后面的名字，

不知道是微软的bug，还是什么的，就管它叫彩蛋吧，而且有不少实用价值，起码能节省一些文件夹，哈哈。

这三个视图组件，只需建立一个“HHF”的文件夹，将视图文件Default.cshtml、Small.cshtml、Big.cshtml放进去。

 

请看项目演示

 

vcClass.cs

using Microsoft.AspNetCore.Mvc;
using System;

namespace WebApplication1
{

    [ViewComponent(Name = ".HHF")]
    public class vcClass1 : ViewComponent
    {
        public IViewComponentResult Invoke(string name, string province)
        {
            ViewBag.v = "姓名："+ name+ "  省份：" + province;

            return View();
        }

    }



    [ViewComponent(Name = "small.HHF")]
    public class vcClass2 : ViewComponent
    {
        public IViewComponentResult Invoke(string name,string province, int age)
        {
            ViewBag.a = "国籍：中国";
            ViewBag.b = "省份：" + province;
            ViewBag.c = "姓名：" + name;
            ViewBag.d = "年龄：" + Convert.ToString(age);

            return View("small");
        }
    }


    [ViewComponent(Name = "big.HHF")]
    public class vcClass3 : ViewComponent
    {
        public IViewComponentResult Invoke(string name, string province, int age)
        {
            ViewBag.a = "国籍：中国";
            ViewBag.b = "省份：" + province;
            ViewBag.c = "姓名：" + name;
            ViewBag.d = "年龄：" + Convert.ToString(age);

            return View("big");
        }
    }

}

再看视图文件

 

 

 

Default.cshtml

视图组件族——演示（默认）
<p>@ViewBag.v</p>

Small.cshtml

<hr />
<div style="font-size:12px;color:#0094ff">
    视图组件族——演示（小字体，蓝颜色）
    <p>@ViewBag.a</p>
    <p>@ViewBag.b</p>
    <p>@ViewBag.c</p>
    <p>@ViewBag.d</p>
</div>
<hr />

Big.cshtml

<hr />
<div style="font-size:20px;">
    视图组件族——演示（大字体）
    <p>@ViewBag.a</p>
    <p>@ViewBag.b</p>
    <p>@ViewBag.c</p>
    <p>@ViewBag.d</p>
</div>
<hr />

 

前台调用视图组件代码：

Index.cshtml

@{
    ViewData["Title"] = "南无阿弥陀佛";
}

@await Component.InvokeAsync(".HHF", new { name = "一颗菩提树", province = "安徽省东至县" })

@await Component.InvokeAsync("small.HHF", new { name = "张飞", province = "河北", age = 28})

@await Component.InvokeAsync("big.HHF", new { name = "周杰伦", province = "台湾省", age = 30})

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

咱运行一下，看看效果^_^

 

 

 

 

 

视图组件族中，不仅可以灵活的调用视图，而且还可以实现类似函数重载的功能，具体在项目中怎么运用，就看大家自己发挥了。

感谢大家的阅读，祝大家生活愉快！ ^_^