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 实例方法，允许在组件生命周期内直接更换数据源，无需重建组件。
使用方法：
@code {
private List<TreeViewItem> items1 = new();
private List<TreeViewItem> items2 = new();
private TreeView? treeView;
protected override void OnInitialized()
{
items1 = new List<TreeViewItem>
{
new TreeViewItem { Text = "节点A", Items = new List<TreeViewItem> { new TreeViewItem { Text = "子节点A1" } } },
new TreeViewItem { Text = "节点B" }
};
items2 = new List<TreeViewItem>
{
new TreeViewItem { Text = "节点C", Items = new List<TreeViewItem> { new TreeViewItem { Text = "子节点C1" } } },
new TreeViewItem { Text = "节点D" }
};
}
private async Task SwitchDataSource()
{
// 切换到第二组数据源
await treeView!.SetItems(items2);
}
}
<Button OnClick="SwitchDataSource">切换数据源</Button>
<TreeView @ref="treeView" Items="items1" />
此方法极大简化了树形组件的动态数据加载场景，例如根据用户权限切换组织架构树或分类树。
二、Input 组件增加 Clearable 参数，实现一键清空
表单输入中，清空输入框是常见需求。v9.7.0 为 Input 组件新增了 Clearable 布尔参数，设置为 true 后，输入框右侧会显示一个清空图标，点击即可清空绑定值。
示例：
<Input @bind-Value="userName" Clearable="true" placeholder="请输入用户名" />
清空操作会触发值变更通知，适合与表单验证或搜索功能搭配使用。
三、BootstrapInputNumber 自动根据区域设置转换输入类型
BootstrapInputNumber 组件在 v9.7.0 中增加了对 NumberDecimalSeparator 的智能判断。当浏览器区域设置（如德语、法语）使用逗号作为小数点分隔符时，组件的 input 类型会自动由 number 转为 text，避免原生 number 输入框在非英文环境下无法输入逗号的兼容性问题。
此行为无需手动配置，直接使用组件即可：
<BootstrapInputNumber @bind-Value="price" />
如果当前区域的小数点分隔符为逗号，渲染结果会自动变为 input type="text"，并保持内部数值类型不变。
四、Html2Pdf 功能增加 --disable-web-security 选项
ExportPdfButton 或 Html2Pdf 服务在生成 PDF 时，如果页面引用了跨域字体文件，可能会因安全策略导致字体加载失败。v9.7.0 新增了 --disable-web-security 配置，允许在生成 PDF 时绕过 Web 安全限制，从而正确加载外部字体。
使用方式（以 ExportPdfButton 为例）：
<ExportPdfButton DisableWebSecurity="true" />
或者通过服务调用时设置：
var option = new Html2PdfOption { DisableWebSecurity = true };
await Html2PdfService.ExportAsync(html, option);
需注意，该选项仅应在可控环境中使用，避免安全风险。
五、其他小功能增强
- FieldIdentifier 增加 GetRequiredValidator 扩展方法，可快速获取对应字段的必填验证器。
- Display 组件新增 Lookup 参数支持，配合 LookupServiceKey 可实现字典值显示。
- DrawerOption 增加 Component 参数，允许在抽屉中动态加载组件。
- ILookup 接口增加 GetItemsAsync 扩展方法，便于异步获取下拉数据。
- ScrollIntoViewBehavior 增加 Description 标签，用于无障碍说明。
总结
BootstrapBlazor v9.7.0 主要围绕组件易用性和国际化兼容性进行增强，尤其是 TreeView 的动态数据源切换、Input 的可清空功能、BootstrapInputNumber 的区域自适应，以及 Html2Pdf 的跨域字体支持，都是实际开发中的高频需求。建议现有用户升级至此版本，充分体验这些新特性带来的开发效率提升。
Re: BootstrapBlazor v9.7.0 新特性详解：TreeView动态数据源、Input可清空、数字输入自动
感谢分享！v9.7.0 这几个新特性确实都很实用，特别是 TreeView 的 SetItems 方法和 Input 的 Clearable 参数，省了不少以前要用复杂状态管理才能实现的操作。BootstrapInputNumber 对区域设置的智能判断也很贴心，省去了手动处理本地化输入的麻烦。准备这两天升级试试看，感谢楼主的详细解析！Re: BootstrapBlazor v9.7.0 新特性详解：TreeView动态数据源、Input可清空、数字输入自动
感谢楼主分享！BootstrapBlazor v9.7.0 这几个新特性确实很实用，尤其是 TreeView 的 `SetItems` 实例方法，之前做动态切换数据源往往要绕很多弯子，现在直接调方法就能换数据，代码简洁多了。Input 加清空按钮也是很多表单场景的刚需，省得自己再写额外逻辑。BootstrapInputNumber 的区域自适应那个细节也挺好，之前确实被不同语言环境下的逗号/点分隔符搞到头大，自动转成 text 类型算是很聪明的解法。Html2Pdf 加 disable-web-security 选项也有用，不过确实得注意安全，只在可控环境用。整体来看，这版本升级的价值很高，准备拿项目试试新功能了。Re: BootstrapBlazor v9.7.0 新特性详解：TreeView动态数据源、Input可清空、数字输入自动
感谢楼主分享！v9.7.0 这几个新特性确实很实用，特别是 TreeView 的 SetItems 方法，之前做动态树切换时总得想办法重建组件，现在直接调用方法就能换数据源，代码简洁多了。Input 的 Clearable 也是日常高频需求，省得自己写清空按钮和事件绑定。BootstrapInputNumber 的区域自适应更是解决了国际化场景的老大难问题，以前遇到逗号分隔符的区域还得额外写 JS 处理，现在自动转 text 类型确实省心。想问下 SetItems 切换数据源后，树节点的展开/选中状态会不会保留？还是需要重新设置？
页:
[1]