![MermaidHelp2.png](/static/img/c747025b20c3baaf42871cc9e04ce125.MermaidHelp2.webp)

没想到还能出第二期，这几天增加了功能，还是有坑，这里说下

# 1. FineUI11

既然是FineUI11用例项目，`FineUI11`的改造是永久话题，

## 1.1 `f:Tool`图标在右边
对于`f:ContentPanel`我使用了`<Tools>`放按钮，因为`f:Toolbar`会错位，`Tools`里的控件`f:Tool`是图标和文字，但是这个没有图片再右边的属性`IconAlign` ，`f:Button`是有的；我想要这样的

![图片.png](/static/img/862a35c67352e0eb888171ed0fe278c2.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



好吧，只能改，首先新建 `ToolEx`
``` c#
 [HtmlTargetElement("f:Tool")]
 [RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
 public class ToolEx : ToolTagHelperEx
 {
 }
```

然后告诉前台 Tool 被接管了 
```  _ViewImports.cshtml
@removeTagHelper FineUICoreEx.ToolTagHelperEx, FineUICoreEx
```

最后增加属性，核心就是`i`和`span`换个位置；

```
[HtmlTargetElement("f:Tool")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ToolEx : ToolTagHelperEx
{
    /// <summary>
    /// 图标位置， 只支持右侧 或 左侧
    /// </summary>
    [HtmlAttributeName("IconAlign")]
    public IconAlign IconAlign { get; set; }

    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        StringBuilder sb = new();
        if (IconAlign == IconAlign.Right)
        {
            sb.Append($"$('#{this.Source.ID} i').before($('#{this.Source.ID} span'));");
        }
        PageContext.RegisterStartupScript(sb.ToString());
        base.PreProcess(context, output);
    }
}
```

## 1.2 分割线
`Tools`里 `f:ToolbarSeparator` 也没有，干脆造一个，这里的思路是先 `new Tool()`，然后直接绘制一个`ToolbarSeparator` 替换；

首先要告诉 `Tools` 可以有 `f:ToolbarSeparator`，和上面的思路一样 

``` c#
[HtmlTargetElement("Tools")]
[RestrictChildren("f:Tool", new string[] { "f:ToolbarSeparator" })]
public class ToolsEx : ToolsTagHelperEx
{
}
```

然后修改 `ToolbarSeparatorTagHelperEx` 的默认绘制，如果是包在 `<Tools>` 里的，就改变行为
``` c#
public class ToolbarSeparatorEx : ITagHelperEx<ToolbarSeparatorTagHelperEx>
{
    public void BeforProcess(ToolbarSeparatorTagHelperEx tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        var currentPath = method.GetCurrentPath();
        var reverse = currentPath.AsEnumerable().Reverse();
        //判断是不是在 ToolsEx 里
        if (currentPath.Any(m => m.GetType() == typeof(ToolsEx)))
        {
            var nextItem = reverse.SkipWhile(m => m.GetType() == typeof(ToolsEx)).First();
            var item = nextItem as PanelBaseTagHelper;
            var newtool = new Tool();
            item.Source.Tools.Add(newtool);
            StringBuilder sb = new();
            sb.Append($"$('#{newtool.ID}').replaceWith('<div class=\"f-toolbar-separator f-toolbar-item f-cmp f-widget\" style=\"display: initial;\"></div>');F.ui.{tagHelper.ID}.remove();$('#{tagHelper.Source.WrapperID}').remove();");
            PageContext.RegisterStartupScript(sb.ToString());
        }
    }
}
```

然后就可以了
 
![图片.png](/static/img/647b7f4a95ab63682d47598cc982ea68.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. mermaid 
## 2.1 拦截语法错误

`mermaid.js` 提供了语法验证和错误的事件

``` js
//验证 注意是异步方法
F.ui.rightPanel.parse = await mermaid.parse(code);
```

``` js
//注册语法错误
mermaid.setParseErrorHandler((e) => {
    //错误信息
    console.log('e>', e);
})
```

## 2.2 导出放大
`mermaid.ink` 的放大只有 1-3倍，可以通过调节`width`来直接放大，因为有的图像确实很模糊

``` js
let width = $('#mermaidSvg').width();
let scale = F.ui.btnscale.scale || 2;
width = width * scale;
const dataURL = `https://mermaid.ink/img/pako:${F.ui.codePanel.mermaidPako}?type=${type}&width=${width}`;
```

---
至此 该项目告一段落


![](/static/img/508af01e03614acbe3667ba38cdd4698.gongneng2.gif)

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

MermaidHelp开发日志（二）

![MermaidHelp1.png](/static/img/927d29ed10b20c0f1994ade54049129a.MermaidHelp1.webp)

FineUI11出来，想上手开发试一试，正好手头有个需求，就做了个工具；

公司运维的项目越来越多，环境端口啥的容易忘，所以要记录下，上个K8S吧又太大了，所以只能自己记录，画图吧，我就让AI给我输出 `mermaid` ,然后去编辑，导出流程图，这是个完整的工作流，我用FineUI和GPT接口组合到一个页面了；

项目已经开源了 https://gitee.com/shixixiyue/mermaid-help  这里主要说开发过程遇见的坑；




# 1. FineUI控件

## 1.1 HtmlTarget
`HtmlTarget` 还是用着别扭，想写个自定义属性怪难受，这里使用了新的写法，

在 `_ViewImports.cshtml` 可以屏蔽标签

```
@removeTagHelper FineUICore.PanelTagHelper, FineUICore
@removeTagHelper FineUICore.TextAreaTagHelper, FineUICore
```

这样这两个标签就不生效了，`FineUICoreEx.PanelEx` 就生效了，默认 `<f:Panel>` 会指向新的，就可以配置新的属性了也会自动提示

## 1.2 层级

还有个问题就是层级，这个层级有点多，基本外边都是架子，功能的按钮再最里面，藏起来很难找到，看着别扭，函数式 可以把外层直接封装为方法调用和主要功能分离开，标签的写法只能一层一层套，除非用`分部视图`，这样直接就多出页面，这个还没有找到好的办法解决


![图片.png](/static/img/f0b6aeea4d455f623340a81de1f010dd.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 1.3 割裂

有的需求只能用js写，这样就割裂了，前后台混着，前台处理一点，后台处理一点，但是后台看着好看，直接写属性多好看`txtInput.Text = inpput;`，但是有些属性不是`Ajax响应` 没办法还得写 `RegisterStartupScript` 加一大串字符串，不然就加扩展方法 `txtInput.SetInput();` 这么写和属性长的也不一样，还是别扭。

.net9好像可以直接给类扩展属性了，期待啊，早点出，能解决不少问题；

## 1.4 Session丢了

可能是配置不对，和FineUI没关系，总之 `FineUICore.PageContext.Current.Session` 一直是`null`，需要这样写

```
services.AddSession(options =>
{
    // Optionally configure session options here
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true; // Required for GDPR compliance
});
```
```
app.UseSession();
```
```

        /// <summary>
        /// 得到Session
        /// </summary>
        /// <param name="key">键</param>
        public T GetSession<T>(string key)
        {
            var value = FineUICore.PageContext.Current.Session.GetString(key);
            if (string.IsNullOrEmpty(value))
            {
                value = string.Empty;
                return default(T);
            }
            JObject _value = JObject.Parse(value);
            T ms = (T)_value.ToObject(typeof(T));
            return ms;
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, string value)
        {
            if (string.IsNullOrEmpty(value))
            {
                value = "";
            }
            //IHttpContextAccessor PageContext = PageContext.
            var httpContextAccessor = FineUICore.PageContext.GetService<IHttpContextAccessor>();
            FineUICore.PageContext.Current.Session.SetString(key, value);
            //HttpContext.Session.SetString(key, value);
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, object value)
        {
            string _value = JObject.FromObject(value).ToString(Newtonsoft.Json.Formatting.None);
            SetSession(key, _value);
        }

```
# 2. Marked显示Markdown

基本网上能看见的`Marked.js`例子都是老的版本，我重新阅读了`Marked`开发文档，如果结合 `highlight` 并且显示行号，需要这么写，


:::info{title="原创首发，全网唯一"}


```
<script src="~/js/marked.min.js"></script>
<script src="~/js/highlight.min.js"></script>
<script src="~/js/highlightjs-line-numbers.min.js"></script>
```

```
const htmlContent = markedAPI('`markdown格式`', mermaidAPI);
document.getElementById('codePanel_Content').innerHTML = htmlContent;
hljs.initLineNumbersOnLoad({ singleLine: true });

/**(markdown格式,代码部分的回调)*/
const markedAPI = (msg, mermaidfun) => {
    return marked.use({
        renderer: {
            code(code, type) {
                if (type === "mermaid") mermaidfun(code);
                return `<pre><code class="hljs language-${type}">${code}</code></pre>`;
            }
        }
    })(msg);
};
```

:::
这里主要是回调`mermaidfun`，如果不加回调，直接使用`marked-highlight.js`插件即可

# 3. mermaid导出图片

`mermaid`生成的svg，要导出图片，这个功能也是做了一天，网上拷贝的例子没一个成功的，AI提供的方法，全部试了一遍，都不能用；
`html2canvas.min.js` `svg2png.js` 都试过了也不行 报错 ；C# `SkiaSharp` `Magick.NET-Q8-AnyCPU` 也不行，黑，字体丢失； 最后看`mermaid`怎么导出的，把`mermaid.live`下载下来看源码，一点点跟踪终于成功了，有个服务 `mermaid.ink`，这个好像也是开源的


![图片.png](/static/img/ed83931cf1049c4f19776aec111db76e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

:::info{title="原创首发，全网唯一"}

```
<script src="~/js/mermaid.min.js"></script>
<script src="~/js/pako.min.js"></script>
<script src="~/js/base64.min.js"></script>
```
```
// 导出图片
function btnSaveToImg_Click() {
    const mermaidPako = GetPako(`这里是mermaid语法的代码`);
    const dataURL = `https://mermaid.ink/img/pako:${mermaidPako}?type=png`;

    fetch(dataURL)
        .then(response => response.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.download = '导出图片.png';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
        })
        .catch(error => console.error('下载图片时出错:', error));
}
//压缩
function GetPako(code) {
    return serialize(JSON.stringify({
        code,
        mermaid: { theme: "default" },
        autoSync: true,
        updateDiagram: true,
        editorMode: "code"
    }));
}
// 序列化和反序列化函数
function serialize(state) {
    const data = new TextEncoder().encode(state);
    const compressed = pako.deflate(data, { level: 9 });
    return Base64.fromUint8Array(compressed, true);
}

function deserialize(state) {
    const data = Base64.toUint8Array(state);
    return pako.inflate(data, { to: 'string' });
}
```


:::

---

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

MermaidHelp开发日志（一）

![chuxue2.png](/static/img/a7c6d8dbbd15ce9ec4a719e330aa88d7.chuxue2.webp)

正好要做个工具，用FineUI11，一步一步的搭建一个项目

# 1. 首先新建一个项目，


![图片.png](/static/img/fd9abfdb80df7270c51cccc62ddc0b59.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



![图片.png](/static/img/e62a82f9cbe9db5a6246910bc3e78db0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6bff77afa4aea5eb6b3c89d6f11876b3.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. 拷贝DLL文件

![图片.png](/static/img/67234484e2c3ccf5eb44a1b8f76d53d0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 2.1 添加引用

双击项目
![图片.png](/static/img/53db70831fbcfb53f5651e37059fefea.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/127a3681b60d643fd86c75f0b8bbb6f6.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
<ItemGroup>
	<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.4" />
	<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="8.0.4" />
</ItemGroup>
 <ItemGroup>
   <Reference Include="FineUICore">
     <HintPath>bin\FineUICore.dll</HintPath>
   </Reference>
 </ItemGroup>
```

# 3. 复制资源

![图片.png](/static/img/066b0463f705bad2633c9b7546a28ffe.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

还有这个自动程序

![图片.png](/static/img/192adf35a9fcb60f5564c9eff1880831.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![图片.png](/static/img/af42a08064003b5ae96f0698da6620f5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 4. 同步命名空间

![图片.png](/static/img/4ce70d6c59e975f602f2b48e0706bc02.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 5. 没用的可以删除

`Error.cshtml` 可以留着

![图片.png](/static/img/dd210104311787990f5ecef83728ab48.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

新建 `_GlobalUsing.cs`


![图片.png](/static/img/f48a8b2c606b7d037f067e6a6c418f61.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
global using FineUICore;
global using System;
global using System.Collections.Generic;
global using System.Linq;
global using System.Text;
global using System.Threading.Tasks;
```

# 6. 开启自动程序

![图片.png](/static/img/192adf35a9fcb60f5564c9eff1880831.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

更多信息

![图片.png](/static/img/dcbd859f21b6546b75a47abe1a0fa218.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

仍要运行

![图片.png](/static/img/e72f8d3632310834f455c6492a8b3660.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


# 7. 新建`Index.cshtml`

![图片.png](/static/img/0d96e5b661890621e28495fb0e16693e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
@page
@model MermaidHelp.Pages.IndexModel
@{
    ViewBag.Title = "起始页面";
    var F = Html.F();
}

@section body {
    <f:Panel ID="main" IsViewPort="true"></f:Panel>
}

@section script {
    <script>
    </script>
}
```
```
namespace MermaidHelp.Pages
{
    public partial class IndexModel : BaseModel
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

```


![图片.png](/static/img/d4b3a9564b02eab6fc2d4b06ac018f3a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


运行成功

![图片.png](/static/img/8345c59bf9f007f08f19550cb0b5b8ea.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

---

:::info{title="相关连接"}

[FineUI初学手册（一）](https://blog.shizhuoran.top/post/48)

:::

FineUI初学手册（二）

![](https://blog.shizhuoran.top/static/img/98b3759cad4ad799591ac10194292365.chuxue1.webp)
上一次的初学手册已经是2014年写的了，10年间FineUI产品发生了巨大的变化，最近FineUI11发布了，初学手册也跟着更新一下；



# 1. 版本选择

FineUI官网已经给了一个版本对比，
![](https://blog.shizhuoran.top/static/img/576249d852793e08e3e16861c351d0f5.Screenshot_2024-05-26-09-45-33-591_com.android.chrome.webp)

这里我展开一下，
* FineUI开源版前端基于ExtJS，已经是很老的版本了，已经停止维护了，基本可以不用考虑使用；
* 他的升级版是FineUIPro，前端基于JQuery，开发方式就是传统的ASP.Net WebForms，所以.net版本就到 .Net Framework 4.5，只能在Windows上运行发布；
* 随着.net升级到core，fineui又出来了FineUICore，适配.net 3.1以上，目前到.net8都可以运行，可以跨平台部署，core的开发模式多样，所以FineUICore有 `Core函数式` `CoreRazorPages` `CoreWebforms`对应的开发模式；

FineUI版本|.Net支持|部署环境|唠叨
-|-|-|-
[FineUIPro](https://pro.fineui.com/#/grid/grid.aspx)|最高支持到<br/>.NetFramework4.5|Windows|如果你没有跨平台部署（Linux Mac）的需求,或者不熟悉.NetCore，可以选择这个版本，Asp.net对我已经很有时代感了，现在确实有的学校还在教 还是有部分人上手会快一些；
[FineUICore](https://core.fineui.com/#/Grid/Grid)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这里的写法是Core的原始MVC写法，前台cshtml使用函数式的标签,比如`F.Grid().ID(...)`,这是我目前使用的版本，对自定义扩展友好，扩展的方法可以点出来
[FineUICoreRazorPages](https://pages.fineui.com/#/Grid/Grid)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这个兼容的是RazorPages开发模式，前台是标签式的控件，`<f:Grid ID='xxx' >`，后台是 `OnGet`
[FineUICoreWebForms](http://forms.fineui.com/)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这个是独创的`WebForms`写法，前台还是标签`<f:Grid ID='xxx' >`，但是后台和Asp.net一样，就是`FineUIPro`,如果你是从`FineUIPro`升级 或 会Asp.Net但是需要跨平台的支持，就可以无痛上手这个版本

# 2. 下载

通过以上的对比后，当你看见星球的置顶下载就不会蒙圈了，下载里包括 `后台API` `前台API` `空项目` `示例源码`;`示例源码`提供所有控件的属性示例，一定要过一眼，结合API一点点调试看，基本都过一遍就行了；`空项目`是为了教会搭建，如果要使用FineUI最精简的就是空项目的示例；

首先加入星球

![](https://blog.shizhuoran.top/static/img/914d3a587f65d22f62a0f85f76c9d21c.ZSXQ_20240526_103006452.webp)

找到精华置顶
![](https://blog.shizhuoran.top/static/img/bb605a7726735a1760b5e7eac7781c4f.Screenshot_2024-05-26-10-30-29-926_com.unnoo.quan.webp)

找到版本并下载
![](https://blog.shizhuoran.top/static/img/2ce0f597f2bc8cc29503ff04078997e4.Screenshot_2024-05-26-10-29-35-357_com.unnoo.quan.webp)


---
下一篇我会从新建解决方案开始使用FineUI11开发页面并发布

---

:::info{title="相关连接"}

[FineUI初学手册（二）](https://blog.shizhuoran.top/post/49)

:::

FineUI初学手册（一）

![](https://blog.shizhuoran.top/static/img/456d9622e914d18e852a955f8e565b5d.kuozhan4.webp)
今天继续记录下`全球唯一`的FineUI11改造体验，将思路和关键代码记录一下，作为过程资产，省着自己忘；

我这里还有一个需求，就是开发时控件我都会写个默认的匹配，比如页面的搜索表单，会使用相同的默认属性：
```
/// <summary>
/// 默认属性 <br/>
/// 滚动条 true <br/>
/// 边框 false <br/>
/// 头 false <br/>
/// 间距 10 10 0 5 <br/>
/// 子项间距 0 5 0 5 <br/>
/// </summary>
public static FormExtension DefaultAttr(this FormExtension f)
{
	f.AutoScroll(true)
	ShowBorder(false)
	ShowHeader(false)
	BodyPadding("10 10 0 5")
	BoxConfigChildMargin("0 5 0 5");
	return f;
}
```

这样前台会省点地方，我一直提倡的是框架本身也是一个产品，要面向开发，写代码的根来自需求，需求除了客户事业业务需求还应该包括`产品需求`和`开发需求` `测试需求` `运维需求`，这些需求都来自项目干系人，然后再落到软件开发上，这个话题打字会很累，这里不深入了。




# 1. 前情提要（Situation）📖

上一次记录到给控件增加了父标签属性的判断响应，这是一个典型的应用场景，但是有个缺点，每个可能的子控件都要手写一遍，我是讨厌分散割裂的，所以要写在基类上，本来`TimePicker` `TextBox` `TextArea` `NumberBox`的基类都一样(`DropDownList` 的基类跟他们不一样)，
```
namespace FineUICore;

//
// 摘要:
//     数字输入框控件标签
[HtmlTargetElement("f:NumberBox")]
[RestrictChildren("Listeners", new string[] { "Attributes" })]
public class NumberBoxTagHelper : RealTextFieldTagHelper
{
    ...
}
```


:::info{title="相关信息"}
来自[FineUICoreAPI](https://fineui.com/core/api/a02954.html)

![a02954.png](/static/img/9cb5ad3134af22dd5571ee450c9acf35.a02954.webp)


:::


就是这个 `RealTextFieldTagHelper` ，这样我要从`TextBoxTagHelperEx` 的`PreProcess` 修改为 `RealTextFieldTagHelper.PreProcess`；问题就来了

# 2. 难点（Complication）问题（Question）🤔
我可以为顶层显式的类`TextBoxTagHelper`做扩展属性，方法，怎么给`RealTextFieldTagHelper`做扩展呢，如我简单的给 `RealTextFieldTagHelper` 加一个扩展方法，比如`BeforProcess`，那我在上层还是需要调用的，

```
protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
{
    base.BeforProcess(context, output);
    base.PreProcess(context, output);
}
```

每个实现类还得再写一次，并没有解决问题；

有没有一种方法，在不修改（破坏）`TextBoxTagHelperEx`代码的基础上 `TextBoxTagHelperEx.PreProcess` 执行前，先执行基类的`BeforProcess`方法呢，


# 3. 解决（Answer）🧩

问题一出来答案就很明显了，不吃药也能想到就是切面AOP，之前用[Rougamo](https://github.com/inversionhourglass/Rougamo)做了日志的插入，还是很方便的，这里直接拿过来就行了，

``` cs-AOP
using FineUICore;
using FineUICoreEx.BaseEx;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Rougamo;
using Rougamo.Context;
using System.Xml.Linq;

[assembly: PreProcessAttribute]

namespace FineUICoreEx
{
    public class PreProcessAttribute : MoAttribute
    {
        //匹配到PreProcess
        public override string? Pattern => "method(* *.PreProcess(..))";
        //方法执行前触发
        public void OnEntry(MethodContext contextex)
        {
            TagHelperContext context = contextex.Arguments[0] as TagHelperContext;
            TagHelperOutput output = contextex.Arguments[1] as TagHelperOutput;
            ...
        }
     }
}
```

实现中，我加了接口`ITagHelperEx<T>`，只要继承这个接口传入`T`，如果当的控件基于`T`在绘制前触发`ITagHelperEx.BeforProcess`，像这样 

```
//如果控件基类是 RealTextFieldTagHelper
public class RealTextFieldTagHelperEx : ITagHelperEx<RealTextFieldTagHelper>
{
    public void BeforProcess(RealTextFieldTagHelper tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        //拿到路径
        List<BaseTagHelper> currentPath = method.GetCurrentPath();
        //当前控件
        var Source = tagHelper.Source;
        var Form = currentPath.AsEnumerable().Reverse()
                  .FirstOrDefault(m => m.GetType() == typeof(FormTagHelperEx)) as FormTagHelperEx;
        if (Form != null)
        {
            if (Form.AutoEmptyText && string.IsNullOrEmpty(Source.EmptyText))
            {
                Source.EmptyText = $"请填写{Source.Label}";
            }
        }
    }
}
```

还加入了一个 `TagHelperExFun`类，提供一些快捷的方法

像开始提到的 `DefaultAttr` 默认配置，可以新建一个`: ITagHelperEx<FormTagHelperEx>`类来实现

```
public class FormTagEx : ITagHelperEx<FormTagHelperEx>
{
    public void BeforProcess(FormTagHelperEx tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        //判断属性是否包含
        if (method.HasAttr("serchform"))
        {
            tagHelper.AutoEmptyText = true;
            //设置默认值
            method.SetDefault(nameof(Form.BodyPadding), "10");
            method.SetDefault(nameof(Form.LabelWidth), 100);
            method.SetDefault(nameof(Form.EnableCollapse), true);
        }
    }
}
```
```
@*加入标记 serchform 提供默认的属性 *@
<f:Form ID="Form1" IsFluid="true" Title="表单 1" serchform>
    <Rows>
    ...
    </Rows>
</f:Form>
```


:::note{title="提醒"}
我已经将扩展上传到NuGet上，使用`FineUI11WebForms`开发模式，可以直接拉下来用，除了我扩展的一些方法还会开放接口，以便应用到实例项目。目前还是预览版，如果想用一用需要看我前几篇的文章，源码没有开源，等正式版发布，我会单独写一个API文档。


![图片.png](/static/img/1887c7495c964e6b0d8954b10086d025.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
:::


# 4. 源码
``` ITagHelperEx
using FineUICore;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace FineUICoreEx.BaseEx
{
    /// <summary>
    /// 继承该类 会在控件绘制前时执行 BeforProcess
    /// </summary>
    /// <typeparam name="T"><see cref="ControlBaseTagHelper"/></typeparam>
    public interface ITagHelperEx<T> where T : ControlBaseTagHelper
    {
        /// <summary>
        /// 在FineUI的PreProcess前执行
        /// </summary>
        /// <param name="tagHelper"></param>
        /// <param name="context"></param>
        /// <param name="output"></param>
        void BeforProcess(T tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method);
    }

    /// <summary>
    /// 提供的快捷方法
    /// </summary>
    public record TagHelperExFun()
    {
        /// <summary>
        /// 判断是否包含某属性
        /// </summary>
        public Func<string, bool> HasAttr { init; get; }
        
        /// <summary>
        /// 设置默认值 ，如果前台没设置过，<br/>就是context里没有某个属性，则设置 Source 的值
        /// </summary>
        public Action<string, object> SetDefault { init; get; }

        /// <summary>
        /// 得到路径
        /// </summary>
        public Func<List<BaseTagHelper>> GetCurrentPath { init; get; }
    }
}

```

``` BaseTagHelperEx
using FineUICore;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Reflection;

namespace FineUICoreEx.BaseEx
{
    public static class BaseTagHelperEx
    {
        public static List<BaseTagHelper> GetCurrentPath(BaseTagHelper tagHelper, TagHelperContext context)
        {
            // 通过反射获取 tagHelper 对象的类型
            Type tagHelperType = tagHelper.GetType();

            // 查找名为 "GetCurrentPath" 的方法，参数类型为 TagHelperContext
            var method = tagHelperType.GetMethod("GetCurrentPath", BindingFlags.NonPublic | BindingFlags.Instance, null, new Type[] { typeof(TagHelperContext) }, null);

            if (method == null)
            {
                return new List<BaseTagHelper>();
            }

            // 调用方法并获取返回值
            var result = method.Invoke(tagHelper, new object[] { context });

            // 将结果转换为 List<BaseTagHelper> 类型
            if (result is List<BaseTagHelper> baseTagHelpers)
            {
                return baseTagHelpers;
            }
            return new List<BaseTagHelper>();
        }
    }
}

```


``` PreProcessAttribute

using FineUICore;
using FineUICoreEx;
using FineUICoreEx.BaseEx;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Rougamo;
using Rougamo.Context;

[assembly: PreProcessAttribute]
namespace FineUICoreEx
{
    public class PreProcessAttribute : MoAttribute
    {
        public override string? Pattern => "method(* *.PreProcess(..))";

        public void OnEntry(MethodContext contextex)
        {
            TagHelperContext context = contextex.Arguments[0] as TagHelperContext;
            TagHelperOutput output = contextex.Arguments[1] as TagHelperOutput;
            // 获取目标对象的类型
            Type targetType = contextex.TargetType;

            // 递归查找所有基类并调用相应的 PreProcess 方法
            InvokePreProcessMethods(targetType, contextex.Target, context, output);
        }

        private void InvokePreProcessMethods(Type targetType, object targetInstance, TagHelperContext context, TagHelperOutput output)
        {
            // 递归调用基类的 PreProcess 方法
            if (targetType.BaseType != null && targetType.BaseType != typeof(TagHelper))
            {
                InvokePreProcessMethods(targetType.BaseType, targetInstance, context, output);
            }

            // 查找所有实现了 ITagHelperEx<> 接口的类型
            var allTypes = AppDomain.CurrentDomain.GetAssemblies()
                .SelectMany(a => a.GetTypes())
                .Where(t => t.GetInterfaces().Any(i => i.IsGenericType && i.GetGenericTypeDefinition() == typeof(ITagHelperEx<>)))
                .ToList();

            foreach (var type in allTypes)
            {
                // 找到实现了 ITagHelperEx<targetType> 的类型
                var interfaceType = type.GetInterfaces()
                    .FirstOrDefault(i => i.IsGenericType && i.GetGenericTypeDefinition() == typeof(ITagHelperEx<>) && i.GetGenericArguments()[0] == targetType);

                if (interfaceType != null)
                {
                    var hasattrfun = new Func<string, bool>(
                        (name) => context.AllAttributes.Any(m => m.Name == name));

                    var setDefaultfun = new Action<string, object>((name, value) =>
                    {
                        if (!hasattrfun(name))
                        {
                            try
                            {
                                var Source = (targetInstance as ControlBaseTagHelper).Source;
                                Source.GetType().GetProperty(name)?.SetValue(Source, value);
                            }
                            catch { }
                        }
                    });
                    var getcurrentpathfun = new Func<List<BaseTagHelper>>(
                        () => BaseTagHelperEx.GetCurrentPath(
                            (targetInstance as BaseTagHelper), context));
                    // 创建接口方法的参数
                    object[] parameters = new object[] { targetInstance, context, output,new TagHelperExFun() {
                            HasAttr = hasattrfun,
                            SetDefault = setDefaultfun,
                            GetCurrentPath = getcurrentpathfun
                    }};

                    // 获取 BeforProcess 方法
                    var method = interfaceType.GetMethod("BeforProcess");

                    if (method != null)
                    {
                        // 创建扩展类的实例
                        var tagHelperExInstance = Activator.CreateInstance(type);

                        // 调用 PreProcess 方法
                        method.Invoke(tagHelperExInstance, parameters);
                    }
                }
            }
        }
    }
}

```


---

:::info{title="相关连接"}
[FineUI11初体验](https://blog.shizhuoran.top/post/39)

[FineUI11过滤器WebFormsFilter（一）](https://blog.shizhuoran.top/post/40)

[FineUI11过滤器WebFormsFilter（二）](https://blog.shizhuoran.top/post/41)

[FineUI11表单回发测试](https://blog.shizhuoran.top/post/42)

[FineUI11控件扩展（一）](https://blog.shizhuoran.top/post/44)

[FineUI11控件扩展（二）](https://blog.shizhuoran.top/post/45)

[FineUI11控件扩展（三）](https://blog.shizhuoran.top/post/46)

[FineUI11控件扩展（四）](https://blog.shizhuoran.top/post/47)

:::



![336ed2bd17b80a3cfeab2f7e0219227.jpg](/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

1. FineUI11

1.1 f:Tool图标在右边

1. 首先新建一个项目，

1.1 `f:Tool`图标在右边