ASP.NET Core MVC中如何高效运用Tag Helpers实现页面元素动态构建？

本文共计1846个文字，预计阅读时间需要8分钟。

简介：Tag Helpers提供了在视图中修改和增强现有HTML元素功能的方法。将它们添加到视图中后，会经过Razor模板引擎处理，创建一个HTML元素，然后返回给浏览器。有些Tag Helpers实际上作为元素或组件实现。

简介

Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能。将它们添加到视图中，会经过Razor模板引擎处理并创建一个HTML，之后再返回给浏览器。有一些Tag Helpers，其实作为元素或实际的标签（如environment，cache等）。

它们使用HTML方式编写，同时利用了Razor的强大功能、C#的简洁和HTML的友好性。由于使用Tag Helpers感觉如此自然，看起来像标准的HTML，前端开发人员也可以轻松地适应，不需要学习C#语法；此外，它们可以在现有元素范围内获得完美的智能提示支持。

看一下简单的例子，注意上下两行代码的区别：

因为我们在其中使用了Tag Helper，所以Visual Studio自动为img元素更改颜色。

为什么称为Tag Helper？因为我们将HTML元素称为标签（< div >，< body >，< span >），并且希望改进或可能改变这些元素的行为。

它们可能会使您想到Razor中的HTML Helpers，的确，它们也具有部分相同的功能，但是，Tag Helpers使用起来更加自然；我们通常会使用它们来扩展现有HTML元素，使用HTML Helpers是用来创建一个新的HTML元素。

它们让我想到的另一件事：AngularJS指令。