You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor.Bootstrap Grid中空值复选框渲染异常求助

Blazor可空复选框在Bootstrap Grid中渲染异常求助

我找到了一个可空复选框(Nullable Checkbox)的实现方案,但在Blazor.Bootstrap Grid组件中使用时遇到了问题:调试时能看到AdditionalAttributes中存在[checked,true],但复选框始终显示为未选中状态。以下是我的组件代码和使用代码,希望能得到帮助,谢谢!

组件代码

@inherits InputBase<bool?>

<input type="checkbox" 
       value="@CurrentValue" 
       @attributes="AdditionalAttributes" 
       class="@CssClass" 
       style="width:15px; height:15px;vertical-align:-2px;"
       @onchange="EventCallback.Factory.CreateBinder<bool?>(this,OnChangeAction,this.CurrentValueAsBool)" />

@code {
    private bool? _CurrentValueAsBool;

    private bool? CurrentValueAsBool
    {
        get
        {
            if (string.IsNullOrEmpty(CurrentValueAsString))
                _CurrentValueAsBool = null;
            else
            {
                if (bool.TryParse(CurrentValueAsString, out bool _currentBool))
                    _CurrentValueAsBool = _currentBool;
                else
                    _CurrentValueAsBool = null;
            }

            SetCheckBoxCheckedAttribute(_CurrentValueAsBool);

            return _CurrentValueAsBool;
        }

        set
        {
            _CurrentValueAsBool = value;
        }
    }

    private void SetCheckBoxCheckedAttribute(bool? _currentValueAsBool)
    {
        bool _isChecked = _currentValueAsBool.HasValue ? _currentValueAsBool.Value : false;
        var _attributes = AdditionalAttributes != null ? AdditionalAttributes.ToDictionary(kv => kv.Key, kv => kv.Value) : new Dictionary<string, object>();

        if (!_isChecked)
        {
            _ = _attributes.ContainsKey("checked") ? _attributes["checked"] = false : _attributes.TryAdd("checked", false);
        }
        else
        {
            _ = _attributes.ContainsKey("checked") ? _attributes["checked"] = true : _attributes.TryAdd("checked", true);
        }

        AdditionalAttributes = _attributes;
    }

    protected override bool TryParseValueFromString(string value, out bool? result, out string validationErrorMessage)
    {
        validationErrorMessage = null;

        if (string.IsNullOrEmpty(value))
        {
            result = null;
        }
        else
        {
            if (bool.TryParse(value, out bool _result))
            {
                result = _result;
            }
            else
            {
                validationErrorMessage = "Unable to parse value!";
                result = null;
                return false;
            }
        }
        return true;
    }

    private Action<Nullable<bool>> OnChangeAction { get => (_inputValue) => CurrentValueAsString = _inputValue.HasValue ? _inputValue.Value.ToString() : null; }
}

组件使用代码

<Grid TItem="SupplierSite" 
      Data="@Supplier.SupplierSites"
      AllowFiltering="false"
      AllowPaging="true"
      AutoHidePaging="true"
      AllowSorting="false"
      Responsive="true"
      PageSize="5"
      EmptyText="No supplier sites have been identified." 
      Class="full-width"
      @ref="gSupplierSites">
    ...
    <GridColumn TItem="SupplierSite"  HeaderText="Needs New FESN Prefix?" PropertyName="NeedsNewPrefix">
        <NullableBoolCheckBox Value="context.NeedsNewPrefix"
                              ValueExpression="() => context.NeedsNewPrefix"
                              ValueChanged="@(async (bool? e) => { await OnNeedsNewPrefixChanged(e, context); })"
                              disabled="@(!userModel.CanSetNeedsNewPrefix(KeyRecord))" />
    </GridColumn>
    ...
</Grid>

内容的提问来源于stack exchange,提问作者Orion

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.16 12:45:22