Blazor组件中如何正确设置HTML5 data-attribute？

问题根源 #

Blazor对布尔类型的HTML属性绑定遵循HTML布尔属性规则：当绑定值为true时，仅渲染属性名（不带值）；为false时则完全移除该属性。部分浏览器会将无值的布尔属性显示为属性名=""，这就导致你看到的<div data-is-loaded="">结果——虽然属性存在，但值为空，无法满足JS读取明确信号的需求。

可行解决方案 #

1. 显式转换为字符串绑定 #

直接将bool值转为小写的"true"或"false"字符串，确保渲染出明确的属性值：

<div data-is-loaded="@_isLoaded.ToString().ToLower()">...</div>

@code {
    private bool _isLoaded = false;
    protected override void OnInitialized() => _isLoaded = true;
}

渲染结果：<div data-is-loaded="true">...</div>（当_isLoaded为true时）

2. 条件绑定控制属性存在与值 #

如果需要在_isLoaded为false时移除属性，为true时设置值为"true"，可以使用三元表达式返回字符串或null：

<div data-is-loaded="@(_isLoaded ? "true" : null)">...</div>

• 当_isLoaded = true：渲染为<div data-is-loaded="true">...</div>
• 当_isLoaded = false：属性被完全移除，渲染为<div>...</div>

3. 封装扩展方法简化重复操作（进阶） #

如果需要频繁处理这类绑定，可以封装一个自定义扩展方法：

public static class BoolExtensions
{
    public static string ToDataAttributeValue(this bool value)
    {
        return value.ToString().ToLower();
    }
}

在组件中直接调用：

<div data-is-loaded="@_isLoaded.ToDataAttributeValue()">...</div>

JS读取验证 #

无论采用哪种方案，JS都可以通过以下方式正确读取值：

const element = document.querySelector('[data-is-loaded]');
// 方式1：使用getAttribute
const isLoaded = element?.getAttribute('data-is-loaded') === 'true';
// 方式2：使用dataset API
const isLoadedViaDataset = element?.dataset.isLoaded === 'true';

内容的提问来源于stack exchange，提问作者lonix