doc(SelectGeneric): update IsEditable paraemeter sample code (#6135)

* refactor: 精简代码

* doc: 增加注释

* doc: 更新示例

* chore: bump version 9.7.1-beta03

Co-Authored-By: yswCode <[email protected]>

---------

Co-authored-by: yswCode <[email protected]>

Author: ArgoZhang

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

@@ -428,7 +428,8 @@
     <section ignore>@((MarkupString)Localizer["SelectsGenericDesc"].Value)</section>
     <div class="row">
         <div class="col-12 col-sm-6">
-            <SelectGeneric Items="_genericItems" @bind-Value="_selectedFoo" IsEditable="true"></SelectGeneric>
+            <SelectGeneric Items="_genericItems" @bind-Value="_selectedFoo"
+                           IsEditable="true" TextConvertToValueCallback="TextConvertToValueCallback"></SelectGeneric>
         </div>
         <div class="col-12 col-sm-6">
             <Display Value="_selectedFoo.Address"></Display>

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

@@ -251,6 +251,27 @@ private Task OnTimeZoneValueChanged(string timeZoneId)
 
     private Foo _selectedFoo = new();
 
+    private async Task<Foo> TextConvertToValueCallback(string v)
+    {
+        // 模拟异步通讯切换线程
+        await Task.Delay(10);
+
+        Foo? foo = null;
+        var item = _genericItems.Find(i => i.Text == v);
+        if (item == null)
+        {
+            var id = _genericItems.Count + 1;
+            foo = new Foo() { Id = id,  Address = $"New Address - {id}" };
+            var fooItem = new SelectedItem<Foo> { Text = v, Value = foo };
+            _genericItems.Add(fooItem);
+        }
+        else
+        {
+            foo = item.Value;
+        }
+        return foo!;
+    }
+
     /// <summary>
     /// 获得事件方法
     /// </summary>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -3266,7 +3266,7 @@
     "SelectsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
     "SelectsGenericTitle": "Generic",
     "SelectsGenericIntro": "Data source <code>Items</code> supports generics when using <code>SelectedItem&lt;TValue&gt;</code>",
-    "SelectsGenericDesc": "<p>Please refer to <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Design Ideas</a> to understand this feature. In this example, by selecting the drop-down box option, the value obtained is the <code>Foo</code> instance, and the value displayed in the text box on the right is the <code>Address</code> value of the <code>Foo</code> attribute</p><p>In this example, the <code>ValueEqualityComparer</code> and <code>CustomKeyAttribute</code> parameters are not set, and the <code>[Key]</code> tag of the <code>Id</code> attribute of <code>Foo</code> is used for equality judgment</p>",
+    "SelectsGenericDesc": "<p>Please refer to <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Design Ideas</a> to understand this feature. In this example, by selecting the drop-down box option, the value obtained is the <code>Foo</code> instance, and the value displayed in the text box on the right is the <code>Address</code> value of the <code>Foo</code> attribute</p><p>In this example, <code>IsEditable=\"true\"</code> and <code>TextConvertToValueCallback</code> parameters are set. When a <code>Foo</code> that does not exist in the original data source is entered, a new <code>Foo</code> instance is added to the data source in the <code></code> callback method</p>",
     "SelectsOnInputChangedCallback": "Callback method for converting input text into corresponding Value in edit mode",
     "TextConvertToValueCallback": "Callback method when input text changes in edit mode",
     "SelectsIsEditable": "Whether editable",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -3266,7 +3266,7 @@
     "SelectsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
     "SelectsGenericTitle": "泛型支持",
     "SelectsGenericIntro": "数据源 <code>Items</code> 使用 <code>SelectedItem&lt;TValue&gt;</code> 时即可支持泛型",
-    "SelectsGenericDesc": "<p>请参考 <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">设计思路</a> 理解此功能。本例中通过选择下拉框选项，得到的值为 <code>Foo</code> 实例，右侧文本框内显示值为 <code>Foo</code> 属性 <code>Address</code> 值</p><p>本例中未设置 <code>ValueEqualityComparer</code> 以及 <code>CustomKeyAttribute</code> 参数，使用 <code>Foo</code> 属性 <code>Id</code> 的 <code>[Key]</code> 标签进行相等判定</p>",
+    "SelectsGenericDesc": "<p>请参考 <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">设计思路</a> 理解此功能。本例中通过选择下拉框选项，得到的值为 <code>Foo</code> 实例，右侧文本框内显示值为 <code>Foo</code> 属性 <code>Address</code> 值</p><p>本例中设置 <code>IsEditable=\"true\"</code> 以及 <code>TextConvertToValueCallback</code> 参数，录入原数据源中不存在的 <code>Foo</code> 时，在 <code></code> 回调方法中添加新 <code>Foo</code> 实例到数据源中</p>",
     "SelectsOnInputChangedCallback": "编辑模式下输入文本转换为对应 Value 回调方法",
     "TextConvertToValueCallback": "编辑模式下输入文本变化时回调方法",
     "SelectsIsEditable": "是否可编辑",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.1-beta02</Version>
+    <Version>9.7.1-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/SelectGeneric/SelectGeneric.razor.cs

@@ -495,14 +495,12 @@ private async Task OnChange(ChangeEventArgs args)
 
                 if (val is not null)
                 {
-                    item = new SelectedItem<TValue>(val, v);
-                    var items = new List<SelectedItem<TValue>>() { item };
-                    items.AddRange(Items);
-                    Items = items;
+                    // 返回值时，由外部更新 Items 参数
                     CurrentValue = val;
                 }
                 else
                 {
+                    // 返回空值时恢复上次选中值
                     await InvokeVoidAsync("resetValue", InputId, SelectedRow?.Text);
                 }
             }