关于TagHelper的那些事情——自定义TagHelper(TagHelper的Attributes)

接上

Attributes

在最新的VS2015RC版,开始支持了TagHelper的智能提示,主要体现在在写TagHelper有Attributes的提示,正确的Tag和Attribute会变成粗体,错误的Attribute不会变成粗体,这样就很容易发现书写错误。

  1. 如何定义一个TagHelper的Attribute?

    Attribute就是Property。也就是说TagHelper类中的具有getter和setter的公开Property就是它的Attribute。

    public class MyTagHelper: TagHelper
    {
        //私有property不是Attribute
        private int ID {get; set;}
    
        //这个才会是Attribute
    public string Name {get; set;}
    //只读的property也不是Attribute
    public string Sex {get;} public override void Process(TagHelperContext context, TagHelperOutput output) { ... } }

    上面我们定义了MyTagHelper,它只有一个Attribute是Name。所以View上html应该是这样:

    <my name="yy"></my>
    
  2. Attribute名和Property名关系

    • Attribute名一般都是小写,会将Property名将大写字母变小写前面加上"-",如果大写字母在第一个位置,那么只需要改成小写,前面不需要加“-”。这点和TagHelper的作用的Tag名和TagHelper类之间的关系有些类似。

      比如
      public class MyTagHelper: TagHelper
      {
         public string ParentName {get; set;}
      }
      

      其对应的View上的html是:

      <my parent-name="Mike"></my>
      
    • 当然我们也可以在Property头上添加HtmlAttributeName来添加自定义的Attribute名,这样就让这两者之间毫无关系。

      比如
      public class MyTagHelper: TagHelper
      {   
           [HtmlAttributeName("male")]
           public bool Sex {get; set;}
           
           [HtmlAttributeName("NickName")]
           public string Name {get; set;}
      }
      

      这样MyTagHelper里面的Sex Property对应的Attribute在View上名字是male,而Name Property对应的Attribute是NickName:

      <my male="true" NickName="yy"></my>
      由于自定义名字,你定义成什么那么对应的Attribute就是什么,不受大小写限制,但是不能包括这些特殊字符'@', '!', '<', '/', '?', '[', '>', ']', '=', '"', '\'', '*'。
  3. 不想让一个公开的Property成为Attribute经查证,HtmlAttributeNotBound是在Beta5中才有的。

    有时候某个Property不得不公开出来,但是又不想其作为一个Attribute,怎么办?
    最简单的一个方法就是在这个Property上添加HtmlAttributeNotBound,这样就不会生成相应的Attribute了。
    public class MyTagHelper: TagHelper
    {   
         [HtmlAttributeNotBound()]
         public bool Sex {get; set;}
    public string Name {get; set;} }

    还有一个不推荐的方法就是将setter设成internal或者private。

  4. Attribute类型

    通常Property的所有类型,Attribute都支持。那么怎么在Tag上设置Attribute的值?
    • 设置常量(bool, number, string, enum)
      <my name="yy" age="34" married="true" sex="Sex.Male"></my>  
      其中Sex定义如下
      public enum Sex
      {
          Male = 0,
          FeMale =1
      } 
    • 设置成一个变量
      @{
          var name = "yy";
      var age = 34; } <my name="@name" age="age"></my>

      这里有一点需要注意,当Attribute的Type(也就是Property的Type)是string类型时,在设置Attribute值时需要在这个变量前加上@符号,用以和文本常量“name”作区分,其他的类型可以省去这个@符号。

    • 设置成一个表达式
      <my name="yy" location="new Location{Country="China", City="Shanghai"}"></my>
      

      其中location Attribute的Type是Location,定义如下:

      public class Location
      {
         public string Country{get; set;}
         public string City{get; set;}
      }
  5. Property类型是复杂类型

    例如上面location Attribute, 这是一个复杂类型,有公开的构造函数(默认不写构造函数,会创建一个不带参数的构造函数),我们很自然想到上面4里介绍的方法来设置这个Attribute值的几种方式:
    • 一就是创建出一个实例出来,然后赋给一个变量,再将这个变量赋给Attribute;
    • 另外一种就是直接把创建实例的表达式赋给Attribute。
    但是有时候我们会遇到这样的问题:
    • 构造函数没有public出来,用户无法创建出这样的实例;
    • 类型非常复杂,如果通过code方式创建这样的实例,代码会比较多,而且设置了哪些值会不直观,如果像WebControl那样可以有一个内嵌的Tag来设置会比较直观。
    正是基于这些问题和需要,我们需要将其类型或者Property设计成一个内嵌的TagHelper,关于如何设计成一个内嵌的TagHelper,怎么保持父子TagHelper的联系,我们下篇再介绍。

 待续...

posted @ 2015-07-16 00:28  奋起直追  阅读(1687)  评论(0编辑  收藏  举报