更改Blazor页面中InputRadio的外观

Question

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

我不喜欢内置<InputRadio>组件的外观。我想要实现的是一个按钮式的广播组。

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

我访问了github上的原始源代码(感谢MicroSoft，感谢你去操作系统！(，发现外观似乎是在这里构建的：

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();
}

我的第一个想法是从这个类继承，并为BuildRenderTree()使用自己的重写。但Context所需的InputRadioContext是internal，现在看来这是一条死胡同。

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

Answer 1

对于经验丰富的web开发人员来说，这个解决方案相当琐碎，但我想发布一个答案来帮助像我这样的人：-(

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的绑定属性，如下所示：

//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];
}