asp.net core2 mvc 基础教程--再讲 Tag Helpers

Tag Helpers

 

asp.net core2 mvc 基础教程--再讲 Tag Helpers

 

  • Tag Helpers 是服务器端的 C# 代码,它在 Razor 文件里,它会参与到创建和渲染 HTML 元素过程中
  • 和 HTML Helpers 类似
  • 跟 HTML 的命名规范一致
  • 内置了很多 Tag Helpers,也可以自定义

 

JavaScript Tag Helpers

  • asp-src-include
  • asp-src-exclude
  • asp-fallback-src:指定回落文件
  • asp-fallback-test:回落测试
<script asp-src-include="~/app/**/*.js"
        asp-src-exclude="~/app/services/**/*.js">
</script>

测试默认 js 里面有没有 window.jQuery 对象,如果没有就使用回落源。

<script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"
        asp-fallback-src="-/lib/bootstrap/js/bootstrap.min.js"
        asp-fallback-test="window.jQuery">
</script>

CSS Tag Helpers

回落测试:CDN 的 CSS 中是否有 hidden class,hidden class 中是否有 visibility property,且其值为 hidden。

<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.8.e/css/bootstrap.min.css"
      asp-fallback-href="/lib/bootstrap/css/bootstrap.min.css"
      asp-fallback-test-class="hidden"
      asp-fallback-test-property="visibility"
      asp-fallback-test-value="hidden"/>

其它 Tag Helpers

  • asp-append-version
  • <img src="~/images/asplogo.png" asp-append-version="true" />
  • <img src="/images/asplogo.png?v=KI_dqr9NVtnMdsM2MUg4qthUnWzm5T1fCEimBPWDNgM" />

asp-append-version 生成了图片文件的 Hash 值,并附到图片链接后面。

 

环境的 Tag Helpers

<environment names="Staging,Production">
  <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
</environment>
<environment include="Staging,Production">
    <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
</environment>
<environment exclude="Development">
    <strong>HostingEnvironment.EnvironmentName is not Development</strong>
</environment>

 

自定义 Tag Helpers

  1. 继承 TagHelper 父类
  2. 实现(override)Process 方法
  1. 或实现异步的 ProcessAsync 方法

 

记得需在 _ViewImport 中注入 @addTagHelper *, Heavy.Web

 

同步实现

public class EmailTagHelper : TagHelper
{
    public string MailTo { get; set; }
    public override void Process(
        TagHelperContext context,
        TagHelperOutput output)
    {
        // Replaces <email> with <a> tag
        output.TagName = "a";
        output.Attributes.SetAttribute("href", $"mailto:{MailTo}");
        output.Content.SetContent(MailTo);
    }
}

 

 

使用和效果:

<email mail-to="Support@contoso.com"></email>
<a href="mailto:Support@contoso.com">Support@contoso.com</a>

异步实现

public override async Task ProcessAsync(
    TagHelperContext context,
    TagHelperOutput output)
{
    output.TagName = "a";
    var content = await output.GetChildContentAsync();
    var target = content.GetContent();
    output.Attributes.SetAttribute("href", $"mailto:{target}");
    output.Content.SetContent(target);
}

 

使用和效果:

<email>Support@contoso.com</email>
<a href="mailto:Support@contoso.com">Support@contoso.com</a>

作为元素级 & 作为属性

 

两种用法:

<bold color="green">这个是粗体字吗?</bold>
<p bold color="red">应该是粗体字。</p>

BoldTagHelper:

[HtmlTargetElement("bold")]
[HtmlTargetElement(Attributes = "bold")]
public class BoldTagHelper : TagHelper
{
    [HtmlAttributeName("color")]
    public string MyColor { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.RemoveAll("bold");
        output.PreContent.SetHtmlContent("<strong>");
        output.PostContent.SetHtmlContent("</strong>");
        output.Attributes.SetAttribute("style", $"color:{MyColor};");
    }
}

复杂的 Tag Helper 属性

Model 类 MyStyle :

namespace Heavy.Web.TagHelpers.Models
{
    public class MyStyle
    {
        public string Color { get; set; }
        public int FontSize { get; set; }
        public string FontFamily { get; set; }
    }
}

使用了 MyStyle 属性的 BlodTagHelper:

[HtmlTargetElement("bold")]
[HtmlTargetElement(Attributes = "bold")]
public class BoldTagHelper : TagHelper
{
    [HtmlAttributeName("my-style")]
    public MyStyle MyStyle { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.RemoveAll("bold");
        output.PreContent.SetHtmlContent("<strong>");
        output.PostContent.SetHtmlContent("</strong>");
        output.Attributes
            .SetAttribute("style", $"color: {MyStyle.Color}; font-size: {MyStyle.FontSize}; font-family: {MyStyle.FontFamily};");
    }
}

 

使用:

<p bold my-style="@(new MyStyle
                    {
                        Color = "red",
                        FontSize = 30,
                        FontFamily = "SimHei"
                    })">应该是粗体字。</p>

 

asp.net core2 mvc 基础教程--再讲 Tag Helpers 效果:

<p style="color: red; font-size: 30; font-family: SimHei;"><strong>应该是粗体字。</strong></p>

注:更多关于自定义 Tag Helpers 的知识请参考 Docs

asp.net core2 mvc 基础教程--再讲 Tag Helpers

上一篇:PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC........


下一篇:change 和 propertychange 事件监听input 并发起ajax请求