feat(RadioList): support generic SelectedItem

[BrandonStudio]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

In following demo, the value of RadioList is set to ChartType.Line.

.razor:

@{
  var types = new List<SelectedItem<ChartType>>
  {
    new() { Value = ChartType.Bar, Text = "柱状图" },
    new() { Value = ChartType.Pie, Text = "饼图" },
  };
}
<RadioList TValue="ChartType" Items="types" IsButton="true" @bind-Value="@ChartType"></RadioList>

.razor.cs:

private ChartType ChartType { get; set; } = ChartType.Bar;

Cause

When checking current and default value, it is checking whether SelectedItem.Value which is of type string rather than generic type TValue, resulting in inequality (L73) and null return value of FirstOrDefault() (L75).

ref:

BootstrapBlazor/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs

Lines 73 to 76 in b9869e9

	if (AutoSelectFirstWhenValueIsNull && !Items.Any(i => i.Value == CurrentValueAsString))
	{
	CurrentValueAsString = Items.FirstOrDefault()?.Value ?? "";
	}

Expected Behavior

if expression in L73 is false.
Even when it is true (current value has not been set), L75 should return ChartType.Bar, which is the first value of the given list.

Interactive render mode

Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)

Steps To Reproduce

Use List<SelectedItem<ChartType>> as source of RadioList.

.razor:

@{
  var types = new List<SelectedItem<ChartType>>
  {
    new() { Value = ChartType.Bar, Text = "柱状图" },
    new() { Value = ChartType.Pie, Text = "饼图" },
  };
}
<RadioList TValue="ChartType" Items="types" IsButton="true" @bind-Value="@ChartType"></RadioList>

.razor.cs:

private ChartType ChartType { get; set; } = ChartType.Bar;

Exceptions (if any)

No response

.NET Version

8

Anything else?

No response

[bb-auto]

@BrandonStudio Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[ArgoZhang]

@BrandonStudio 这个组件还不支持泛型数据源

@{
    var types = new List<SelectedItem>
    {
        new() { Value = "Bar", Text = "柱状图" },
        new() { Value = "Pie", Text = "饼图" },
    };
}

<RadioList TValue="ChartType" Items="types" IsButton="true" @bind-Value="@ChartType"></RadioList>

@code {
    private ChartType ChartType { get; set; } = ChartType.Bar;
}

这样即可

[BrandonStudio]

既然它不支持泛型，那这个TValue放在这不是很容易引起困惑吗？

碎碎念

第一次用这个库，没用成，感觉处处碰壁

我要做的事情很简单，在一个页面中来一个 RadioList，可选柱状图和饼图，将选项关联到一个 Chart，用户选择了柱状图或饼图时 Chart 就会切换到对应的图形。
我发现这样的需求在当前的 BootstrapBlazor 中是难以实现的。

1. Chart 和 ChartDataSource 都有 ChartType 属性，刚开始的时候会让人以为只要设了 Chart 中的属性就可以了
2. 进一步研究发现，更新的时候是从 ChartDataSource 中获取类型的
3. 再看，设了 ChartDataSource 里面的 ChartType 也是一点用没有的，实际绘图根本不采用

最后在 BootstrapBlazor 的框架下只能这么写：

if (_delaying)
{
  <text>刷新中</text>
}
else
{
  <Chart ChartType="@_chartType" @ref="Chart" IsAnimation="false" OnInitAsync="OnInitAsync"></Chart>
}

private async Task SetChartTypeAsync(ChartType value)
{
	_chartType = value;
	if (_dataSource != null)
	{
		_dataSource.Type = value.ToDescriptionString();
		_delaying = true;
		StateHasChanged();
		await Task.Delay(1);
		_delaying = false;
		StateHasChanged();
	}

	StateHasChanged();
}

这样还会有一个闪屏，而且很不优雅，还不如直接用 chart.js 呢

---

除此之外，我也无法更改 RadioList 中选项的 class 列表。

1. RadioList<TValue> 继承了 CheckboxList<TValue>，但是 CheckboxList<TValue> 中的 CheckboxItemClass 和 CheckboxItemClassString 却没有被使用
   

   BootstrapBlazor/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

   Lines 59 to 63 in 7fd4a8e

   	/// <summary>
   	/// 获得/设置 Checkbox 组件布局样式
   	/// </summary>
   	[Parameter]
   	public string? CheckboxItemClass { get; set; }

   
   
   
2. 我企图使用一个预加载JS来设置 RadioList 所有子元素的 class，但是我根本找不到 RadioList 对应的 HTML 元素，因为 IdComponentBase.Id 根本就没有被使用
   

   BootstrapBlazor/src/BootstrapBlazor/Components/Radio/RadioList.razor

   Lines 9 to 31 in 7fd4a8e

   	@if (IsButton)
   	{
   	<div @attributes="@AdditionalAttributes" class="radio-list-group">
   	<div class="@ButtonClassString" role="group">
   	@foreach (var item in Items)
   	{
   	<DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)" class="@GetButtonItemClassString(item)">
   	@item.Text
   	</DynamicElement>
   	}
   	</div>
   	</div>
   	}
   	else
   	{
   	<div @attributes="@AdditionalAttributes" class="@ClassString" role="group">
   	@foreach (var item in Items)
   	{
   	var content = GetChildContent(item);
   	<Radio TValue="SelectedItem" Value="@item" Color="@Color" GroupName="@GroupName" IsDisabled="@GetDisabledState(item)" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" State="@CheckState(item)" OnClick="OnClick" ChildContent="content!"></Radio>
   	}
   	</div>
   	}

[ArgoZhang]

@BrandonStudio SelectedItem<> 是前两天加的功能。以前只有 SelectedItem 不是组件不支持泛型。是不支持泛型 SelectedItem

[BrandonStudio]

@BrandonStudio SelectedItem<> 是前两天加的功能。以前只有 SelectedItem 不是组件不支持泛型。是不支持泛型 SelectedItem

好吧 ~_~ 那就是我注定不能顺利地用这个

[ArgoZhang]

没时间弄这个细节。会支持的。只是时间的问题而已。类似组件还有好几个呢。

[BrandonStudio]

我的意思就是我偏偏在这个gap的时间内第一次使用

[j4587698]

这个TValue是微软要求的，blazor本身要求的，不是我们做的。它要求你必须有个泛型在这里，你没有就不行。你但凡看看blazor基础也不会有这个问题

[BrandonStudio]

这个TValue是微软要求的，blazor本身要求的，不是我们做的。它要求你必须有个泛型在这里，你没有就不行。你但凡看看blazor基础也不会有这个问题

如果你的 RadioList 本身不是泛型类型，它怎么会需要传入泛型参数呢？

[BrandonStudio]

@j4587698 这是微软写的？

BootstrapBlazor/src/BootstrapBlazor/Components/Radio/RadioList.razor

Line 2 in b9869e9

@typeparam TValue