俗话说的好：没想好没事就爱造轮子，尤其是FineUI的扩展，那必须要出手改改，不改就难受，即使不会也得一点点摸，这不FineUI11出来，分析就是过程，重写才是目的，即使不用也得折腾；俗话结束。

1. Tag标签 🏷️

要写扩展从标签入手，照着写就行了

来看这种标签的写法

@section body {
    <f:Button Text="缺省按钮" CssClass="marginr" runat="server" />
}

有个缺点🤔，没法F12，没反应，跳不过去，结束🔚。

怎么办呢，非常简单，挨 个 试💡

明显就找到了：ButtonTagHelper ; 长这个样子, 扒底裤+1🙈

[HtmlTargetElement("f:Button")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ButtonTagHelper : BoxComponentTagHelper, ISourceMenuTagHelper
{
    //
    // 摘要:
    //     按钮颜色
    [HtmlAttributeName("ButtonColor")]
    public ButtonColor ButtonColor
    {
        get
        {
            return Source.ButtonColor;
        }
        set
        {
            Source.ButtonColor = value;
        }
    }
}

可以看出来HtmlTargetElement里就是签，HtmlAttributeName这个就是属性，特性来的，这时再用类的扩展，长脑子🧠都猜的到，不用试也知道是不行的 ❌

 public static void Loading(this ButtonTagHelper btn, bool b)
 {
     PageContext.RegisterStartupScript($"F.ui.{btn.Source.ID}.setEnabled({b.ToString().ToLower()})");
 }

我试了，不行，🔚

2. 扩展属性 💡

除非给类ButtonTagHelper加属性，并且标记HtmlAttributeName才可以在前台cshtml.cs生效，但是扩展类的写法是添加不了属性的，只能给实例添加方法；所以这里只能新建类🆕，ButtonExTagHelper继承ButtonTagHelper就可以添加属性了，

[HtmlTargetElement("f:Button")]
public class ButtonExTagHelper : ButtonTagHelper
{
    [HtmlAttributeName("Loading")]
    public bool Loading { get; set; }
}

但是这时 前台还是红色的，说明没生效😞

猜测下可能的原因，如果没生效，那原因可能是我写的代码没有起作用😕；

所以解决办法就很明显了：必要新建个类库项目引用；并且命名空间不能是FineUICore；然后在_ViewImports.cshtml addTagHelper就行了；(我也不知道怎么想到的，先天搬砖圣体💎）

3. 行为 🛠️

我现在可以让自定义的属性提示出来了，说明生效了，也指定了属性的类型，那么怎么让这个属性产生行为呢，怎么让这个属性在前台确实参与了绘制。

还是要看 ButtonTagHelper是怎么写的，除去私有的字段，类还包括其他的成员🌟

//按钮标签
[HtmlTargetElement("f:Button")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ButtonTagHelper : BoxComponentTagHelper, ISourceMenuTagHelper
{
    //构造函数
    public ButtonTagHelper() : base(new Button())
    {
    }
    //按钮颜色
    [HtmlAttributeName("ButtonColor")]
    public ButtonColor ButtonColor
    {
        get{return Source.ButtonColor;}
        set{Source.ButtonColor = value;}
    }
    //标签处理前执行
    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        base.PreProcess(context, output);
    }
}

忙猜PreProcess就是控制输出的，首先我输出的应该是段js，并且加入到FineUI自己的流中，所以我需要PageContext.RegisterStartupScript进行注册；

把扩展类改一改✍️

[HtmlTargetElement("f:Button")]
public class ButtonExTagHelper : ButtonTagHelper
{
    /// <summary>
    /// 随便写的属性
    /// </summary>
    [HtmlAttributeName("Loading")]
    public bool Loading { get; set; }

    //标签处理前执行
    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        if (Loading)
        {
            PageContext.RegisterStartupScript(
                $"console.log('Loading :>>{Loading}');");
        }
        base.PreProcess(context, output);
    }
}

可以看到，确实输出了

---

镜头切换，远景，播放舒缓的背景音乐，没想好坐在半山腰感受着宁静的夕阳，山坡下是大片成熟的库尔勒香梨，镜头切换，没想好脸部特别，一脸平静；

声音中断，黑屏，然后显示画面🎺

f:Button被绘制了两遍！

未完待续🔜

---