zoukankan      html  css  js  c++  java
  • Asp.net Core 一个实用的自定义TagHelpers

    在编程中,常常有这样的需求:当某条件为真时,显示Html代码段A;条件为假时,显示代码段B。

    如下所示:

        @if (true)
        {
            <h1>条件为真</h1>
        }
        else
        {
            <h1>条件为假</h1>
        }
    

    现在,我就写了个自定义的TagHelpers,方便实现这种需求。格式如下:

    <HF.gl selbool="true" >
    <h1>条件为真</h1>
    【或】
    <h1>条件为假</h1>
    </HF.gl>
    selbool属性用来填写条件,“【或】”是分隔符。
    把条件为真的代码填写在【或】前面,条件为假的代码发放在【或】后面。
    这样就实现了第一段代码的功能。
    可能有人要问,何必这么复杂,第一段代码不是挺好吗?
    确实,第一段代码也很简单就实现了这个功能。下面我们对比一下

        @if (Ones.uPermit("A06"))
        {
            <text>得到A06授权显示</text>
        }
        else
        {
            <text>未得到A06授权显示</text>
        }
    
    
    
    <HF.gl selbool=@Ones.uPermit("A06")>得到A06授权显示【或】未得到A06授权显示</HF.gl>

    这样如何呢?是不是一句话代码看起来比较舒服?

    还有,我们也会常用到switch,那我们在这个TagHelpers里面也加上这个功能吧。

    如下:

    <HF.gl selint="2" >第一段【或】第二段【或】第三段【或】第四段</HF.gl>

    selint属性表示显示第几段的内容,上面这句运行结果就是:第二段

    希望这个自定义的TagHelpers能给大家带来点帮助。

    下面附上这段源码:

    namespace HHFcoreTag.TagHelpers
    {
        [HtmlTargetElement("HF.gl")]//<HF.gl selbool="true" selint="2" >abc【或】def</HF.gl>
        [HtmlTargetElement(Attributes = nameof(Selbool))]
        [HtmlTargetElement(Attributes = nameof(Selint))]
        public class MyTagHelper : TagHelper
        {
            public bool Selbool { get; set; }
            public int Selint { get; set; }
            public override void Process(TagHelperContext context, TagHelperOutput output)
            {
                output.TagName = "";
                var htmls = Regex.Split(output.GetChildContentAsync().Result.GetContent(), "【或】", RegexOptions.IgnoreCase);
    
                //不可同时使用两个条件
                if (context.AllAttributes.ContainsName("selbool") == true &&context.AllAttributes.ContainsName("selint") == true)
                {
                    output.Content.SetHtmlContent("<b><font color=#ff0000>错误:selbool、selint条件属性不可同时使用!</font></b>");
                    return;
                }
    
                //条件选择(布尔值)
                if (context.AllAttributes.ContainsName("selbool"))
                {
                    if (Selbool == true)
                    {
                        output.Content.SetHtmlContent(htmls[0]);
                    }
                    else
                    {
                        if (htmls.Count() > 0) { output.Content.SetHtmlContent(htmls[1]); } else { output.Content.SetHtmlContent(""); }
                    }
                }
    
                //条件选择(数字序号)
                if (context.AllAttributes.ContainsName("selint"))
                {
                    if(Selint<= htmls.Count()&&Selint>=1) {
                        output.Content.SetHtmlContent(htmls[Selint-1]);
                    }
                    else { output.Content.SetHtmlContent(""); }
                }
    
            }
        }
    }
  • 相关阅读:
    js常用函数和事件
    100多个基础常用JS函数和语法集合大全
    JavaScript 使用构造法的正则表达式的注意要点
    终端运行node并设置node_env为production
    给dom元素绑定click等事件无效的问题
    cnpm,gulp等命令在zsh终端上报错的问题
    Node.js读写文件之批量替换图片
    DOM操作原生js 的bug,使用jQuery 可以消除
    js 比较版本号(二)
    js 比较版本号(一)
  • 原文地址:https://www.cnblogs.com/aputitree/p/7358937.html
Copyright © 2011-2022 走看看