ASP.NET MVC Core的ViewComponent

转:https://www.cnblogs.com/shenba/p/6629212.html

MVC Core新增了ViewComponent的概念,直接强行理解为视图组件,用于在页面上显示可重用的内容,这部分内容包括逻辑和展示内容,而且定义为组件那么其必定是可以独立存在并且是高度可重用的。

其实从概念上讲,在ASP.NET的历史版本中早已有实现,从最开始的WebForm版本就提供了ascx作为用户的自定义控件,以控件的方式将独立的功能封装起来。到了后来的MVC框架,提供了partial view,但是partial view就是提供视图的重用,业务数据还是依赖于action提供。

MVC还要一个更加独立的实现方式就是用Child Action,所谓Child Action就是一个Action定义在Controller里面,然后标记一个[ChildAction]属性标记。我在早期做MVC项目的时候,感觉到Child Action的功能很不错,将一些每个页面(但不是所有页面)需要用到的小部件都做成Child Action,比如登录信息,左侧菜单栏等。一开始觉得不错,后来发现了严重性能问题结果被吊打。问题的元凶是Child Action执行的时候会把Controller的那一套生命周期的环节再执行一遍,比如OnActionExecuting,OneActionExecuted等,也就是说导致了很多无用的重复操作(因为当时OnActionExecuting也被用得很泛滥)。之后复盘分析,Child Action执行动作的时候就好比在当前ActionExcuted之后再开出一个分支去执行其他任务,导致了Controller执行过程又嵌套了一个Controller执行过程,严重违背了扁平化的思想(当时公司的主流设计思想),所以后来都没用Child Action。

简单回顾了过去版本的实现,我们来看看MVC Core的ViewComponenet。从名称定义来看,是要真的把功能数据和页面都独立出来,要不然配不上组件二字。ViewComponent独立于其所在的View页面和Action,更不会跟当前的Controller有任何的瓜葛,也就是说不是Child Action了。当然ViewComponent也可以重用父页面的数据或者从然后用自己的View。当然ViewComponent是不能独立使用的,必须在一个页面内被调用。

接下来看看ViewComponent的几种创建方式

首先准备一个项目,这里使用基于Starter kit项目项目模板创建一个用于练习的项目

(该项目模板可以在这里下载https://marketplace.visualstudio.com/items?itemName=junwenluo.ASPNETMVCCoreStarterKit

运行后的初始界面是这样的

ASP.NET MVC Core的ViewComponent

方式一 创建POCO View Component

POCO估计写过程序的都知道是什么东西,可以简单理解为一个比较纯粹的类,不依赖于任何外部框架或者包含附加的行为,纯粹的只用CLR的语言创建。

用POCO方式创建的ViewComponent类必须用ViewComponent结尾,这个类能定义在任何地方(只要能被引用到),这里我们新建一个ViewComponents目录,然后新建如下类

ASP.NET MVC Core的ViewComponent
public class PocoViewComponent
    {
        private readonly IRepository _repository;

        public PocoViewComponent(IRepository repository)
        {
            _repository = repository;
        }

        public string Invoke()
        {
            return $"{_repository.Cities.Count()} cities, "
                   + $"{_repository.Cities.Sum(c => c.Population)} people";
        }
    }
ASP.NET MVC Core的ViewComponent

这个类很简单,就是提供一个Invoke方法,然后返回城市的数量和总人口信息。

然后在页面中应用,我们把调用语句放在_Layout.cshtml页面中

@await Component.InvokeAsync("Poco")

将右上角的City Placeholder替换掉,那么运行之后可以看到右上角的内容输出了我们预期的内容

ASP.NET MVC Core的ViewComponent

那么这个就是最简单的实现ViewComponent的方式,从这个简单的例子可以看到我们只需要提供一个约定的Invoke方法即可。

从这个简单的Component可以看到有以下3个优势

1 ViewComponent支持通过构造函数注入参数,也就是支持常规的依赖注入。有了依赖注入的支持,那么Component就有了自己

独立的数据来源

2 支持依赖注入意味着可以进行独立的单元测试

3 由于Component的实现的高度独立性,其可以被应用于多处,当然不会跟任何一个Controller绑定(也就不会有ChildAction带来的麻烦)

 

方式二 基于ViewComponentBase创建

基于POCO方式创建的ViewComponent的好处是简单,不依赖于其他类。如果基于ViewComponentBase创建,那么就有了一个上下文,毕竟也是一个基础类,总会提供一些帮助方法吧,就跟Controller一个道理。

下面是基于ViewComponent作为基类创建一个ViewComponent

ASP.NET MVC Core的ViewComponent
public class CitySummary : ViewComponent
    {
        private readonly IRepository _repository;

        public CitySummary(IRepository repository)
        {
            _repository = repository;
        }

        public string Invoke()
        {
            return $"{_repository.Cities.Count()} cities, "
                   + $"{_repository.Cities.Sum(c => c.Population)} people";
        }
    }
ASP.NET MVC Core的ViewComponent

咋一看跟用POCO的方式没有什么区别,代码拷贝过来就能用,当然输出的内容也是一致的。

当然这个例子只是证明这种实现方式,还没体现出继承了ViewComponentBase的好处。下面来了解一下这种方式的优势

1.实际项目中使用deViewComponent哪有这么简单,仅仅输出一行字符串。如果遇到需要输出很复杂的页面,那岂不是要拼凑很复杂的字符串,这样不优雅,更不用说单元测试,前后端分离这样的高大上的想法。所以ViewComponentBase就提供了一个类似Controller那样的解决方法,提供了几个内置的ResultType,然你返回到结果符合面向对象的思想,一次过满足上述的要求,主要有以下三种结果类型

a.ViewVIewComponentResult

可以理解为Controller的ViewResult,就是结果是通过一个VIew视图来展示

b.ContentViewComponentResult

类似于Controller的ContentResult,返回的是Encode之后的文本结果

c.HtmlContentViewComponentResult

这个用于返回包含Html字符串的内容,也就是说这些Html内容需要直接显示,而不是Encode之后再显示。

有了上述的理解,借助ViewComponentBase提供的一些基类方法就可以轻松实现显示一个复杂的视图,跟Controller类似。

下面我们改进一下CitySummary,改成输出一个ViewModel,并通过独立的View去定义Html内容。

ASP.NET MVC Core的ViewComponent
public class CitySummary : ViewComponent
    {
        private readonly IRepository _repository;

        public CitySummary(IRepository repository)
        {
            _repository = repository;
        }

        public IViewComponentResult Invoke()
        {
            return View(new CityViewModel
            {
                Cities = _repository.Cities.Count(),
                Population = _repository.Cities.Sum(c => c.Population)
            });
        }
    }
ASP.NET MVC Core的ViewComponent

注意Invoke的实现代码,其中使用了View的方法。

这个View方法的实现逻辑类似Controller的View,但是寻找View页面的方式不同,其寻找页面文件的路径规则如下

/Views/{CurrentControllerName}/Components/{ComponentName}/Default.cshtml

/Views/Shared/Components/{ComponentName}/Default.cshtml

根据这规则,在View/Shared/目录下创建一个Components目录,然后再创建CitySummary目录,接着新建一个Default.cshtml页面

ASP.NET MVC Core的ViewComponent
@model CityViewModel
<table class="table table-condensed table-bordered">
<tr>
<td>Cities:</td>
<td class="text-right">
@Model.Cities
</td>
</tr>
<tr>
<td>Population:</td>
<td class="text-right">
@Model.Population.ToString("#,###")
</td>
</tr>
</table>
ASP.NET MVC Core的ViewComponent

尽管页面比较简单,但是比起之前拼字符串的方式更加强大了,下面是应用后右上角的变化效果

ASP.NET MVC Core的ViewComponent

这就是使用View的方式,其他两种结果类型的使用方式跟Controller的类似。

除了调用View方法之外,通过ViewComponentBase还可以获得当前请求的上下文信息,比如路由参数。

比如读取请求id,然后加载对应Country的数据

ASP.NET MVC Core的ViewComponent
public IViewComponentResult Invoke()
        {
            var target = RouteData.Values["id"] as string;
            var cities =
                _repository.Cities.Where(
                    city => target == null || Compare(city.Country, target, StringComparison.OrdinalIgnoreCase) == 0).ToArray();
            return View(new CityViewModel
            {
                Cities = cities.Count(),
                Population = cities.Sum(c => c.Population)
            });
        }
ASP.NET MVC Core的ViewComponent

当然也可以通过方法参数的形式传入id,比如我们可以在页面调用的时候传入id参数,那么Invoke方法可以改成如下

ASP.NET MVC Core的ViewComponent
public IViewComponentResult Invoke(string target)
        {
            target = target ?? RouteData.Values["id"] as string;
            var cities =
                _repository.Cities.Where(
                    city => target == null || Compare(city.Country, target, StringComparison.OrdinalIgnoreCase) == 0).ToArray();
            return View(new CityViewModel
            {
                Cities = cities.Count(),
                Population = cities.Sum(c => c.Population)
            });
        }
ASP.NET MVC Core的ViewComponent

然后在界面调用的时候

@await Component.InvokeAsync("CitySummary", new { target = "USA" }),传入target参数。

 

上面介绍的都是同步执行的ViewComponent,接下来我们来看看支持异步操作的ViewComponent。

下面我们创建一个WeatherViewComponent,获取城市的天气,这获取天气通过异步的方式从外部获取。

在Components文件夹创建一个CityWeather文件夹,然后创建一个Default.cshtml文件,内容如下

@model string
<img src="http://@Model"/>

这个页面只是显示一个天气的图片,具体的值通过服务端返回。

然后在ViewComponents目录新建一个CityWeather类,如下

ASP.NET MVC Core的ViewComponent
public class CityWeather : ViewComponent
{
    private static readonly Regex WeatherRegex = new Regex(@"<img id=cur-weather class="mtt" title="".+?"" src=""//(.+?.png)"" width=80 height=80>");

    public async Task<IViewComponentResult> InvokeAsync(string country, string city)
    {
        city = city.Replace(" ", string.Empty);
        using (var client = new HttpClient())
        {
            var response = await client.GetAsync($"https://www.timeanddate.com/weather/{country}/{city}");
            var content = await response.Content.ReadAsStringAsync();
            var match = WeatherRegex.Match(content);
            var imageUrl = match.Groups[1].Value;
            return View("Default", imageUrl);
        }
    }
}
ASP.NET MVC Core的ViewComponent

这个ViewComponent最大的特别之处是,它从外部获取城市的天气信息,这个过程使用的async的方法,异步从http下载得到内容后,解析返回当前天气的图片。

对于每一个城市我们都可以调用这个ViewComponent,在城市列表中增加一列显示当前的天气图片

ASP.NET MVC Core的ViewComponent

 

最后一种创建方式:混杂在Controller中

听名字就觉得不对劲了,难道又回到ChildAction的老路。其实不是,先看看定义。

就是说将ViewComponent的Invoke方法定义在Controller中,Invoke的方法签名跟之前两种方式相同。

那么这么做的目的实际上是为了某些代码的共用,不多说先看看代码如何实现。

在HomeController加入如下方法

public IViewComponentResult Invoke() => new ViewViewComponentResult
        {
            ViewData = new ViewDataDictionary<IEnumerable<City>>(ViewData,
        _repository.Cities)
        };

这个Invoke方法就是普通的ViewComponent必须的方法,最关键是重用了这个Controller里面的_repository,当然实际代码会更有意义些。

然后给HomeController加入如下属性标记

[ViewComponent(Name = "ComboComponent")]

这里使用了ViewComponent这个属性标记在Controller上,一看就知道这是用来标记识别ViewComponent的。

接着创建视图,在Views/Shared/Components/下创建一个ComboComponent目录,并创建一个Default.cshtml文件

ASP.NET MVC Core的ViewComponent
@model IEnumerable<City>
<table class="table table-condensed table-bordered">
    <tr>
        <td>Biggest City:</td>
        <td>
            @Model.OrderByDescending(c => c.Population).First().Name
        </td>
    </tr>
</table>
ASP.NET MVC Core的ViewComponent

然后调用跟其他方式一样,按名称去Invoke

@await Component.InvokeAsync("ComboComponent")

 

小结

OK,以上就是ViewComponent的三种创建方式,都比较简单易懂,推荐使用方式二。

示例代码:https://github.com/shenba2014/AspDotNetCoreMvcExamples/tree/master/CustomViewComponent

ASP.NET MVC Core的ViewComponent

上一篇:js:浅拷贝和深拷贝


下一篇:Ajax请求后台发送String类型总是进入Error function解决办法总结