找网站公司做网站的陷阱,重庆任务盟网站建设,photoshop 网站设计,seo营销网站简介
Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能。将它们添加到视图中#xff0c;会经过Razor模板引擎处理并创建一个HTML#xff0c;之后再返回给浏览器。有一些Tag Helpers#xff0c;其实作为元素或实际的标签#xff08;如environment#xff0c;cache…简介
Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能。将它们添加到视图中会经过Razor模板引擎处理并创建一个HTML之后再返回给浏览器。有一些Tag Helpers其实作为元素或实际的标签如environmentcache等。
它们使用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指令。在AngularJS 1组件进入AngularJS 1.5之前中两种最常见的指令类型是元素指令和属性指令。元素指令将创建一个新的DOM元素属性指令用来改变现有DOM元素的行为。不同的是Tag Helpers在服务端运行AngularJS在浏览器中运行。
使用Tag Helpers的方法
我们可以
把它们作为HTML属性或作为HTML标签/元素或者我们使用它们作为现有HTML元素的子元素
HTML属性
我们可以使用内置或自定义的Tag Helpers作为现有HTML元素的一部分通常是作为属性的方式。 关于Image TagHelper更多细节将在下面内容中介绍
HTML元素 在上面的图片中我们可以看到一个自定义的super-cool-elementTagHelper作为自定义HTML标签还可以看到一个内置的environmentTagHelper它对于基于当前环境呈现内容非常有用。
内置Tag Helpers列表
表单相关Tag Helpers
FormFormActionInputLabelOptionSelectTextAreaValidationMessageValidationSummary
缓存
CacheDistributed
其他
ImageAnchorScriptLinkEnvironment 注意所有内置的Tag Helpers以 asp- 作为前缀。 在这篇文章中我们将看到一些常用的Tag Helpers确切地说就是上面“其他”类别的Tag Helpers。在接下来的几个帖子中将会看到最重要的Form Tag Helpers另外我们将介绍缓存Tag Helpers最重要的细节。
Image Tag Helper
此Tag Helper确保要显示的图片是文件系统中的最新图像。
在这个例子中使用Image Tag Helper它基于当前提供的image元素追加版本 这意味着每当我们更改服务器上的图片~/images/ aspnetcore.png时Image Tag Helper将附加一个不同的字符串新的图像将不会被缓存所以在每次图片改变时用户都可以访问到最新的图片同时如果在服务器上的图片没有更改我们仍然会使用图像缓存的版本。
让我们看看发生了什么 如果我们刷新页面将获得相同内容和相同版本的后缀。
在MVC应用程序运行时我们将相同文件名的另一个图片复制到images文件夹。如果我们再刷新页面 除了版本后缀其它都是一样的。
Anchor Tag Helpers 常见的a或者anchor标签可以使用很多类型的Tag Helpers进行扩展您最可能使用到 asp-controller 和 asp-action 这两个标签助手它们可以帮助我们快速创建指向特定Action方法的链接。
如果您熟悉MVC您可以使用Html.ActionLink帮助类达到与Anchor Tag Helpers相同的结果。 在这个特殊的例子中老的方式可能看起来更简短和方便但是由于我们使用“自定义属性”或Tag Helpers扩展现有的HTML标记所以新的方式更加自然此外这些方式更清晰因为我们可以很容易地辨别哪一部分是Action哪一部分是控制器。
Script and Link Tag Helpers
这两个Tag Helpers使我们在HTML中添加JS和CSS引用更容易如果我们使用像CDN这样的外部资源还能使用本地备用的URL地址。
此外它们大大简化了使用全局模式时引用大量资源文件。
就像image标签助手Script和Link Tag Helpers也可以帮助我们缓存资源文件。 这个例子显示我们引用了来自 aspnetcdn 的 Bootstrap JS文件。如果该网站不可用将引用本地文件使用 asp-fallback-src Tag Helper什么是 asp-fallback-test它是一种知道是否会使用本地备用的方法在这个示例中我们使用一个特定的代码来检查Bootstrap的JS功能是否存在。
如果 asp-fallback-test 中的表达式返回falsefalsy将使用 asp-fallback-src 指定的源文件。
引用多个文件 - asp-src-include、asp-src-exclude
这是我最喜欢Tag Helpers的功能之一它可以节省引用特定文件夹及其子文件夹中所有或多个文件的时间。
让我们看一个例子我在wwwroot文件夹下有多个文件夹和js文件 现在让我们看看在 About.cshtml 视图使用 asp-src-include TagHelper引用多个文件时会发生什么 现在当我们运行应用程序并查看页面的内容 漂亮我们不必一个一个地手动引用文件可以使用全局模式引用多个文件夹也可以方便排除其中的某一些。
让我们看看如何使用 asp-src-exclude TagHelper 现在的输出是 我们从about文件夹中得到所有js文件中但排除了a文件夹。只需要一个Script标签可以现实如此复杂HTML。gulp永别了grunt以及您曾经在HTML引用JS文件任何方式
这真的让我太兴奋了因为这不是开发Angular、React应用程序而是ASP.NET Core MVC程序。
Link Tag Helper
Link Tag Helper几乎具有相同的功能它使用的是 href 属性而不是 src 它还具有几个不同的备用探测属性 此代码将检查类、属性和值。如果找不到任何一个那么将使用本地Bootstrap文件。
Environment Tag Helper
Environment Tag Helper将根据应用程序运行的环境呈现对应的内容。
让我们看一看下面的代码 在开发环境中运行页面将输出如下效果 相关文章
asp.net core mvc实现伪静态功能如何在多个项目中分离Asp.Net Core Mvc的Controller和Areasasp.net core 编译mvcroutingsecurity源代码进行本地调试ASP.NET Core MVC四种枚举绑定方式ASP.NET Core MVC 模型绑定用法及原理ASP.NET Core MVC 控制器创建与依赖注入ASP.NET Core MVC 过滤器介绍
原文地址http://www.cnblogs.com/tdfblog/p/about-tag-helpers-in-asp-net-core.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
