Question

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

那么什么时候会用到另一个呢？或者我错过了一些信息？

Answer 1

TagHelpers和ViewComponents之间肯定存在一些概念上的重叠。 TagHelpers是您使用HTML的实用程序，其中ViewComponents是您坚持使用C＃，执行隔离工作然后吐出HTML的方法。我将详细介绍每一个：

<强> ViewComponents
概念上等同的迷你控制器;您将看到ViewComponents公开的许多方法/属性对于Controller上存在的方法/属性非常熟悉。现在，对于调用ViewComponents，这更像是利用HTML帮助程序（TagHelpers做得更好）。总结ViewComponents：他们的主要目的是感觉像一个控制器，留在C＃land（可能没有必要为HTML添加实用程序），做小/隔离的工作，然后吐出字符串化的HTML。

<强> TagHelpers
一种实用程序，使您可以使用现有的HTML或创建新的HTML元素来修改页面上发生的事情。与ViewComponents不同，TagHelpers可以定位任何现有的HTML并修改其行为;示例：您可以将条件属性添加到有条件地呈现元素服务器端的所有HTML元素。 TagHelpers还允许您混合常见的HTML术语，例如：

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

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

<强>附加
我最近做了一个视频，展示了TagHelpers的好处。基本上是了解他们擅长什么以及如何使用它们。你可以看here。

Answer 2

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

关于泰勒的评论＆＃34;他们的主要目的是感觉像一个控制器＆＃34;，这是真的，但是因为你不能直接称这个＆＃34;微控制器＆＃34;直接，＆＃34;控制器般的＆＃34;行为是有限的，因为你只能创建一个页面的一部分，你不能再次调用它（比如通过ajax调用，编辑操作等）。

Answer 3

TagHelpers和ViewComponents之间的一个主要区别在于对象需要完成多少工作。 TagHelpers是相当基础的，只需要一个覆盖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就是您的选择。

Answer 4

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

如果它像树状视图或寻呼机一样简单

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

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

另一方面，如果它是复杂的HTML，包含许多div，图像和配置，就像一个完整的菜单，它可以是垂直或水平的视图组件。视图组件的好处是您可以使用多个视图，以便菜单，以便您可以分开 horizontal.cshtml ＆amp; vertical.cshtml ，同时重复使用相同的后端代码。

Answer 5

但是，如果你使用标签帮助器语法，那么从View Component类中可以看出无法访问VC的内部Html的东西：

>

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

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

在ASP.NET MVC6中使用TagHelpers与ViewComponents

5 个答案: