转：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）
运行后的初始界面是这样的
方式一 创建POCO View Component
POCO估计写过程序的都知道是什么东西，可以简单理解为一个比较纯粹的类，不依赖于任何外部框架或者包含附加的行为，纯粹的只用CLR的语言创建。
用POCO方式创建的ViewComponent类必须用ViewComponent结尾，这个类能定义在任何地方(只要能被引用到),这里我们新建一个ViewComponents目录，然后新建如下类
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";
}
}
这个类很简单，就是提供一个Invoke方法，然后返回城市的数量和总人口信息。
然后在页面中应用，我们把调用语句放在_Layout.cshtml页面中
@await Component.InvokeAsync("Poco")
将右上角的City Placeholder替换掉，那么运行之后可以看到右上角的内容输出了我们预期的内容
那么这个就是最简单的实现ViewComponent的方式，从这个简单的例子可以看到我们只需要提供一个约定的Invoke方法即可。
从这个简单的Component可以看到有以下3个优势
1 ViewComponent支持通过构造函数注入参数，也就是支持常规的依赖注入。有了依赖注入的支持，那么Component就有了自己
独立的数据来源
2 支持依赖注入意味着可以进行独立的单元测试
3 由于Component的实现的高度独立性，其可以被应用于多处，当然不会跟任何一个Controller绑定（也就不会有ChildAction带来的麻烦）
方式二 基于ViewComponentBase创建
基于POCO方式创建的ViewComponent的好处是简单，不依赖于其他类。如果基于ViewComponentBase创建，那么就有了一个上下文，毕竟也是一个基础类，总会提供一些帮助方法吧，就跟Controller一个道理。
下面是基于ViewComponent作为基类创建一个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";
}
}
咋一看跟用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内容。
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)
});
}
}
注意Invoke的实现代码，其中使用了View的方法。
这个View方法的实现逻辑类似Controller的View，但是寻找View页面的方式不同，其寻找页面文件的路径规则如下
/Views/{CurrentControllerName}/Components/{ComponentName}/Default.cshtml
/Views/Shared/Components/{ComponentName}/Default.cshtml
根据这规则，在View/Shared/目录下创建一个Components目录，然后再创建CitySummary目录，接着新建一个Default.cshtml页面
@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>
尽管页面比较简单，但是比起之前拼字符串的方式更加强大了，下面是应用后右上角的变化效果
这就是使用View的方式，其他两种结果类型的使用方式跟Controller的类似。
除了调用View方法之外，通过ViewComponentBase还可以获得当前请求的上下文信息，比如路由参数。
比如读取请求id，然后加载对应Country的数据
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)
});
}
当然也可以通过方法参数的形式传入id，比如我们可以在页面调用的时候传入id参数，那么Invoke方法可以改成如下
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)
});
}
然后在界面调用的时候
@await Component.InvokeAsync("CitySummary", new { target = "USA" })，传入target参数。
上面介绍的都是同步执行的ViewComponent，接下来我们来看看支持异步操作的ViewComponent。
下面我们创建一个WeatherViewComponent，获取城市的天气，这获取天气通过异步的方式从外部获取。
在Components文件夹创建一个CityWeather文件夹，然后创建一个Default.cshtml文件，内容如下
@model string <img src="http://@Model"/>
这个页面只是显示一个天气的图片，具体的值通过服务端返回。
然后在ViewComponents目录新建一个CityWeather类，如下
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);
}
}
}
这个ViewComponent最大的特别之处是，它从外部获取城市的天气信息，这个过程使用的async的方法，异步从http下载得到内容后，解析返回当前天气的图片。
对于每一个城市我们都可以调用这个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文件
@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>
然后调用跟其他方式一样，按名称去Invoke
@await Component.InvokeAsync("ComboComponent")
小结
OK，以上就是ViewComponent的三种创建方式，都比较简单易懂，推荐使用方式二。
示例代码：https://github.com/shenba2014/AspDotNetCoreMvcExamples/tree/master/CustomViewComponent