更改 Blazor 页面中 InputRadio 的外观

Question

我是 Blazor 的新手，只是尝试使用客户端 WA 应用程序在 VS2022 中迈出第一步。

我不喜欢内置 <InputRadio> 组件的外观。我想实现的是按钮式的单选组。

问题：
我如何更改 <InputRadio> 的外观或自己创建类似 广播组 的内容？

我参观了original source on github (thank you, MicroSoft, for going OS!)，发现外观好像是建在这里：

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    Debug.Assert(Context != null);

    builder.OpenElement(0, "input");
    builder.AddMultipleAttributes(1, AdditionalAttributes);
    builder.AddAttributeIfNotNullOrEmpty(2, "class", AttributeUtilities.CombineClassNames(AdditionalAttributes, Context.FieldClass));
    builder.AddAttribute(3, "type", "radio");
    builder.AddAttribute(4, "name", Context.GroupName);
    builder.AddAttribute(5, "value", BindConverter.FormatValue(Value?.ToString()));
    builder.AddAttribute(6, "checked", Context.CurrentValue?.Equals(Value));
    builder.AddAttribute(7, "onchange", Context.ChangeEventCallback);
    builder.CloseElement();
}

我的第一个想法是继承此 class 并为 BuildRenderTree() 使用自己的覆盖。但是 Context 所需的 InputRadioContext 是 internal，现在这看起来像是死胡同。

我尝试在 <InputRadioGroup> 中使用按钮，但无法正确处理事件。

Answer 1

好吧，这个解决方案对于有经验的网络开发人员来说相当简单，但我想 post 一个答案以帮助像我这样的菜鸟:-)

Brian Parker 的提示让我想到了这个解决方案，效果很好：

<EditForm Model=@someViewModel>
   <InputRadioGroup @bind-Value=@someViewModel.TheInstance_via_Id>
     @foreach (SomeClass e in someList)
     {
       <InputRadio class="btn-check" id=@e.Id Value=@e.Id />
       <label class="btn btn-outline-primary" for=@e.Id>@e.Name</label>
     }
   </InputRadioGroup>
</EditForm>

如果没有 <br/> 标签，按钮将显示为 筹码云。

提示：首先我尝试在 @bind-Value 中使用对象本身，但发现 魔术绑定 并不支持所有类型。这就是为什么我像这样向 ViewModel 添加了一个 Id-based 绑定属性：

    //the actual property returning an object's instance
    public SomeClass TheInstance{ get; set; } = new SomeClass(Guid.NewGuid(), "n.A.");

    //helps to magically bind <InputRadio> via Guid-Property
    public Guid TheInstance_via_Id
    {
        //returns the actual object's id 
        get => TheInstance.Id;
        //re-sets the actual object from a shared context store
        set => TheInstance= BaseDataContext.ListOfInstances[value];
    }

更改 Blazor 页面中 InputRadio 的外观

Change the appearance of an InputRadio in a Blazor page

c#

appearance

radio-button

blazor

blazor-webassembly