doc: 更新示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor

@@ -5,7 +5,7 @@
 
 <h4>@Localizer["MultiSelectsDescription"]</h4>
 
-<DemoBlock Title="@Localizer["MultiSelectColorTitle"]" Introduction="@Localizer["MultiSelectColorIntro"]" Name="Color">
+@* <DemoBlock Title="@Localizer["MultiSelectColorTitle"]" Introduction="@Localizer["MultiSelectColorIntro"]" Name="Color">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
             <MultiSelect TValue="string" Items="@Items1" />
@@ -293,7 +293,7 @@ private enum MultiSelectEnumFoo
             <Display Value="@_editString"></Display>
         </div>
     </div>
-</DemoBlock>
+</DemoBlock> *@
 
 <DemoBlock Title="@Localizer["MultiSelectVirtualizeTitle"]"
            Introduction="@Localizer["MultiSelectVirtualizeIntro"]"
@@ -325,26 +325,28 @@ private enum MultiSelectEnumFoo
     <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
     <div class="row mb-3">
         <div class="col-6">
-            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString1" OnQueryAsync="OnQueryAsync"
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemValue1" DefaultVirtualizeItemText="@_virtualItemText1"
+                         OnQueryAsync="OnQueryAsync"
                          ShowSearch="_showSearch" ShowToolbar="_showToolbar"
                          IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@_virtualItemString1"></Display>
+            <Display TValue="string" Value="@_virtualItemValue1"></Display>
         </div>
     </div>
 
     <p class="code-label">2. 使用 Items 作为数据源</p>
     <div class="row">
         <div class="col-6">
-            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString2" Items="VirtualItems"
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemValue2" DefaultVirtualizeItemText="@_virtualItemText2"
+                         Items="VirtualItems"
                          ShowSearch="_showSearch" ShowToolbar="_showToolbar"
                          IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@_virtualItemString2"></Display>
+            <Display TValue="string" Value="@_virtualItemValue2"></Display>
         </div>
     </div>
  </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs

@@ -113,11 +113,12 @@ private enum MultiSelectEnumFoo
     [NotNull]
     private List<Foo>? Foos { get; set; }
 
-    private string? _virtualItemString1;
+    private string? _virtualItemValue1;
+    private string? _virtualItemValue2;
+    private string? _virtualItemText1;
+    private string? _virtualItemText2;
 
-    private string? _virtualItemString2;
-
-    private IEnumerable<SelectedItem> VirtualItems => Foos.Select(i => new SelectedItem(i.Name!, i.Name!)).ToList();
+    private IEnumerable<SelectedItem> VirtualItems => Foos.Select(i => new SelectedItem(i.Id.ToString(), i.Name!)).ToList();
 
     private string? _editString;
     private bool _isClearable = true;
@@ -213,8 +214,10 @@ protected override void OnInitialized()
 
         Items = GenerateDataSource(DataSource);
         Foos = Foo.GenerateFoo(LocalizerFoo);
-        _virtualItemString1 = Foos[79].Name;
-        _virtualItemString2 = Foos[45].Name;
+        _virtualItemValue1 = $"{Foos[79].Id}, {Foos[78].Id}";
+        _virtualItemValue2 = $"{Foos[45].Id}, {Foos[46].Id}";
+        _virtualItemText1 = $"{Foos[79].Name}, {Foos[78].Name}";
+        _virtualItemText2 = $"{Foos[45].Name}, {Foos[46].Name}";
     }
 
     private static List<SelectedItem> GenerateItems() =>