在 ASP.NET MVC6 中使用 TagHelpers 与 ViewComponents答案

【问题标题】：Using TagHelpers vs ViewComponents in ASP.NET MVC6在 ASP.NET MVC6 中使用 TagHelpers 与 ViewComponents
【发布时间】：2015-02-06 16:47:24
【问题描述】：

我试图了解 asp.net 5 中 TagHelpers 和 ViewComponents 之间的用例差异，因为最终结果功能似乎非常相似。我们有 TagHelpers 可以创建新的 HTML 标记，这些标记由 Razor 引擎解析，然后是显式调用的 ViewComponents。两者都返回一些 HTML 内容，都由各自的基类提供支持，都具有可以实现以完成工作的方法的异步版本。

那么什么时候可以使用一个而不是另一个呢？还是我遗漏了一些信息？

【问题讨论】：

标签： asp.net-core asp.net-core-mvc

【解决方案1】：

TagHelpers 和 ViewComponents 之间肯定存在一些概念上的重叠。 TagHelpers 是您使用 HTML 的实用程序，其中 ViewComponents 是您坚持使用 C#、进行独立工作然后输出 HTML 的方式。我将详细介绍每个：

视图组件
您的概念上等效的微型控制器；您将看到 ViewComponents 公开的许多方法/属性与 Controller 中存在的方法/属性非常相似。现在至于调用 ViewComponents，这更等同于使用 HTML 帮助器（TagHelpers 做得更好的一件事）。总结一下 ViewComponents：它们的主要目的是感觉像一个控制器，停留在 C# 领域（可能不需要向 HTML 添加实用程序），做较小/孤立的工作，然后输出字符串化的 HTML。

标签助手
一个实用程序，使您能够与现有 HTML 一起工作或创建新的 HTML 元素来修改页面上发生的事情。与 ViewComponents 不同，TagHelpers 可以针对任何现有的 HTML 并修改其行为；例如：您可以将 conditional 属性添加到将有条件地呈现元素服务器端的所有 HTML 元素。 TagHelpers 还允许您混合常见的 HTML 术语，例如：

<myTagHelper class="btn">Some Content</myTagHElper>

如您所见，我们正在向 TagHelper 添加一个类属性，就像它是 HTML 一样。要在 ViewComponents 中执行此操作，您需要传入属性字典或等效的东西（不自然）。最后，多个 TagHelper 可以运行在单个 HTML 元素上；每个在修改输出时都有自己的阶段（允许进入模块化 TagHelper 工具包）。总结一下 TagHelpers：他们可以做任何 ViewComponents 可以做的事情，但对 ASP.NET 开发人员习惯的控制器之类的东西感觉不熟悉；还有一些项目可能不想混合服务器端 HTML。

额外：
我最近做了一个视频来展示 TagHelpers 的好处。基本上介绍了他们擅长什么以及如何使用它们。可以here观看。

【讨论】：

【解决方案2】：

在决定使用哪一个时，我总是考虑组件的 HTML 有多复杂。

如果是简单的东西，比如树视图或寻呼机

<ul class="jstree">
    <li>Node 1</li>
    <li>...</li>
</ul>

这是标签助手的候选者，因为它很简单。 C# 代码中的大型 HTML 很难维护。

另一方面，如果它是具有许多 div、图像和配置的复杂 HTML，例如一个完整的菜单，它可以是垂直或水平的，这就是您的 视图组件。视图组件的好处是您可以使用多个视图，因此您可以在重用相同的后端代码的同时将 horizontal.cshtml 和 vertical.cshtml 分开。

【讨论】：

【解决方案3】：

事实证明，在 .Net Core 1.1 中，您可以使用 tagHelper 语法调用 ViewComponent。

关于 Taylor 的评论“他们的主要目的是感觉像一个控制器”，这是真的，但是由于您不能直接直接调用此“微控制器”，因此“类似控制器”的行为是有限的，因为您只能创建页面的一部分，您不能再次调用它（例如通过 ajax 调用、编辑操作等）。

【讨论】：

【解决方案4】：

TagHelpers 和 ViewComponents 之间的一个主要区别在于对象需要完成多少工作。 TagHelper 是相当基本的，只需要一个覆盖Process 方法的类来生成TagHelper 的输出。不利的一面是，如果您在 TagHelper 中创建内部 HTML 进行任何复杂的工作，则必须全部在代码中完成。在 ViewComponent 中，您有一个能够做更多工作的迷你控制器，此外它还返回一个视图，其中您有可以映射到模型的实际 Razor 语法代码。

另一篇文章提到 ViewComponents 更像是“HTML Helper”——在你如何称呼它们方面。 ASP.NET 1.1 解决了这个问题，因此您可以调用它

<vc:view-component-name param1="value1" param2="value2></vc:view-component-name>

对于大多数用途，TagHelper 具有明显的优势，因为它更容易。但如果您需要更强大的解决方案，ViewComponent 是您的不二之选。

【讨论】：

【解决方案5】：

然而，与视图组件 (IMHO) 的目的相悖的是，如果您使用标签助手语法，似乎无法从视图组件类访问 VC 的内部 Html：

 <vc:MyComponent id="1" att="something">
     Some HTML markup you would not want to put in an attribute
 </vc:MyComponent>

然而，VC 也有很好的应用，例如我在一篇 TechieJourney 博客文章中看到的 Bootstrap 导航栏视图组件。

【讨论】：

您可以将 ViewComponent 包装在自定义 TagHelper 中，如 described here。这样您就可以在 TagHelper 中访问 HTML 标记，并在需要时将其传递给 ViewComponent。