![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)

FineUI11.0-CoreWebForms笔记（八）

![kuozhan3.png](/static/img/b3c68d7cd85c924882ea8da25f34da22.kuozhan3.webp)
通过前两次的笔记，终于为`FineUI11`的控件标签增加了自定义的属性，今天继续以`AutoEmptyText`为例，让属性生效。

在扩展的第一篇([FineUI11.0-CoreWebForms笔记（五）](https://blog.shizhuoran.top/post/44))中是写过这个例子的:
```
protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
{
    base.PreProcess(context, output);
}
```

# 1. 伪代码
在上一篇的笔记提到，`Razor写法`父元素是找不到子元素的，虽然我给`Form`标签增加了`AutoEmptyText`属性，但是这个属性本身不影响`Form`，而是`Form`的子元素，就是表单的字段，比如`TextBox` `DropDownList`等；



所以属性的生效应该在`TextBox`的`PreProcess`中判断：
```
得到父标签 Form
父标签 Form 的 AutoEmptyText 值是否为 True
    如果是 并且 EmptyText 为空
        则设置 EmptyText = 请填写{Label}
```

# 2. 实现
首先有`TextBoxTagHelperEx`类如下：
```
namespace FineUICoreEx
{
    [HtmlTargetElementAttribute("f:TextBox")]
    [RestrictChildrenAttribute("Listeners", "Attributes")]
    public class TextBoxTagHelperEx : TextBoxTagHelper
    {
        //标签处理前执行
        protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
        {
            base.PreProcess(context, output);
        }
    }
}
```

2.1 第一步，得到父标签 Form

`FineUI11` 直接提供了得到标签路径的方法 `GetCurrentPath`，返回`List<BaseTagHelper> `，通过判断类型就能找到爹；代码如下：

```
 //按顺序得到层级
 List<BaseTagHelper> currentPath = GetCurrentPath(context);
 //得到第一个匹配的Form，注意是倒序
 var Form = currentPath.AsEnumerable().Reverse()
           .FirstOrDefault(m => m.GetType() == typeof(FormTagHelperEx)) as FormTagHelperEx;
```


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

2.2 除了第一步

剩下的就简单了，判断和赋值，当前的控件就是`Source`

```
protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
{
    //按顺序得到层级
    List<BaseTagHelper> currentPath = GetCurrentPath(context);
    //得到第一个匹配的Form，注意是倒序
    var Form = currentPath.AsEnumerable().Reverse()
              .FirstOrDefault(m => m.GetType() == typeof(FormTagHelperEx)) as FormTagHelperEx;
    //判断
    if (Form != null && Form.AutoEmptyText && string.IsNullOrEmpty(Source.EmptyText))
    {
        //设置
        Source.EmptyText = $"请填写{Source.Label}";
    }
    base.PreProcess(context, output);
}
```

# 3. 扣子
`DropDownList`再写一次就行了 略

`TimePicker`再写一次就行了 略；`TextArea`再写一次就行了 略；`NumberBox`再写一次就行了 略；

……


:::tip{title="懒癌"}
复制超过三个，我想到了这个实现应该写到基类上
:::

未完待续🔜


---

:::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)