BootstrapBlazor v9.7.0 新特性详解：TreeView动态数据源、Input可清空、数字输入自动

脚本专家

BootstrapBlazor 是基于 Bootstrap 样式封装的 Blazor UI 组件库，允许开发者使用 C# 代替 JavaScript 构建交互式 Web UI，并共享 .NET 服务端和客户端逻辑。近期发布的 v9.7.0 版本修复了若干问题，并增加了多项实用功能，本文将重点解析几个值得关注的特性及其在项目中的使用方式。

一、TreeView 新增 SetItems 实例方法，支持动态切换数据源

在以往版本中，TreeView 的数据源通常在初始化时通过 Items 参数绑定，后续若需切换数据源，往往需要重新渲染组件或借助状态管理。v9.7.0 新增了 SetItems 实例方法，允许在组件生命周期内直接更换数据源，无需重建组件。

使用方法：

2. @code {
3.     private List<TreeViewItem> items1 = new();
4.     private List<TreeViewItem> items2 = new();
5.     private TreeView? treeView;
7.     protected override void OnInitialized()
8.     {
9.         items1 = new List<TreeViewItem>
10.         {
11.             new TreeViewItem { Text = "节点A", Items = new List<TreeViewItem> { new TreeViewItem { Text = "子节点A1" } } },
12.             new TreeViewItem { Text = "节点B" }
13.         };
14.         items2 = new List<TreeViewItem>
15.         {
16.             new TreeViewItem { Text = "节点C", Items = new List<TreeViewItem> { new TreeViewItem { Text = "子节点C1" } } },
17.             new TreeViewItem { Text = "节点D" }
18.         };
19.     }
21.     private async Task SwitchDataSource()
22.     {
23.         // 切换到第二组数据源
24.         await treeView!.SetItems(items2);
25.     }
26. }
28. <Button OnClick="SwitchDataSource">切换数据源</Button>
29. <TreeView @ref="treeView" Items="items1" />

复制代码

此方法极大简化了树形组件的动态数据加载场景，例如根据用户权限切换组织架构树或分类树。

二、Input 组件增加 Clearable 参数，实现一键清空

表单输入中，清空输入框是常见需求。v9.7.0 为 Input 组件新增了 Clearable 布尔参数，设置为 true 后，输入框右侧会显示一个清空图标，点击即可清空绑定值。

示例：

2. <Input @bind-Value="userName" Clearable="true" placeholder="请输入用户名" />

复制代码

清空操作会触发值变更通知，适合与表单验证或搜索功能搭配使用。

三、BootstrapInputNumber 自动根据区域设置转换输入类型

BootstrapInputNumber 组件在 v9.7.0 中增加了对 NumberDecimalSeparator 的智能判断。当浏览器区域设置（如德语、法语）使用逗号作为小数点分隔符时，组件的 input 类型会自动由 number 转为 text，避免原生 number 输入框在非英文环境下无法输入逗号的兼容性问题。

此行为无需手动配置，直接使用组件即可：

2. <BootstrapInputNumber @bind-Value="price" />

复制代码

如果当前区域的小数点分隔符为逗号，渲染结果会自动变为 input type="text"，并保持内部数值类型不变。

四、Html2Pdf 功能增加 --disable-web-security 选项

ExportPdfButton 或 Html2Pdf 服务在生成 PDF 时，如果页面引用了跨域字体文件，可能会因安全策略导致字体加载失败。v9.7.0 新增了 --disable-web-security 配置，允许在生成 PDF 时绕过 Web 安全限制，从而正确加载外部字体。

使用方式（以 ExportPdfButton 为例）：

2. <ExportPdfButton DisableWebSecurity="true" />

复制代码

或者通过服务调用时设置：

2. var option = new Html2PdfOption { DisableWebSecurity = true };
3. await Html2PdfService.ExportAsync(html, option);

复制代码

需注意，该选项仅应在可控环境中使用，避免安全风险。

五、其他小功能增强

- FieldIdentifier 增加 GetRequiredValidator 扩展方法，可快速获取对应字段的必填验证器。
- Display 组件新增 Lookup 参数支持，配合 LookupServiceKey 可实现字典值显示。
- DrawerOption 增加 Component 参数，允许在抽屉中动态加载组件。
- ILookup 接口增加 GetItemsAsync 扩展方法，便于异步获取下拉数据。
- ScrollIntoViewBehavior 增加 Description 标签，用于无障碍说明。

总结

BootstrapBlazor v9.7.0 主要围绕组件易用性和国际化兼容性进行增强，尤其是 TreeView 的动态数据源切换、Input 的可清空功能、BootstrapInputNumber 的区域自适应，以及 Html2Pdf 的跨域字体支持，都是实际开发中的高频需求。建议现有用户升级至此版本，充分体验这些新特性带来的开发效率提升。

热心网友4

感谢分享！v9.7.0 这几个新特性确实都很实用，特别是 TreeView 的 SetItems 方法和 Input 的 Clearable 参数，省了不少以前要用复杂状态管理才能实现的操作。BootstrapInputNumber 对区域设置的智能判断也很贴心，省去了手动处理本地化输入的麻烦。准备这两天升级试试看，感谢楼主的详细解析！