doc(Select): add DefaultVirtualizeItemText parameter sample code (#7294)

* doc: 更新多语言键值拼写错误

* perf: 改用 Find 提高性能

* doc: 更新示例文档

* refactor: 更改绑定值为可为空

Author: ArgoZhang

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

@@ -1,4 +1,4 @@
-@page "/select"
+@page "/select"
 @inject DialogService Dialog
 @inject IStringLocalizer<Selects> Localizer
 @inject IOptions<WebsiteOptions> WebsiteOption
@@ -366,8 +366,8 @@
            Name="ConfirmSelect">
     <section ignore>
         <ul class="ul-demo">
-            <li>@((MarkupString)Localizer["SelectConfifrmSelectDesc1"].Value)</li>
-            <li>@((MarkupString)Localizer["SelectConfifrmSelectDesc2"].Value)</li>
+            <li>@((MarkupString)Localizer["SelectConfirmSelectDesc1"].Value)</li>
+            <li>@((MarkupString)Localizer["SelectConfirmSelectDesc2"].Value)</li>
         </ul>
     </section>
     <div class="row">
@@ -452,22 +452,24 @@
     <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
     <div class="row mb-3">
         <div class="col-6">
-            <Select IsVirtualize="true" OnQueryAsync="OnQueryAsync" @bind-Value="VirtualItem1"
+            <Select IsVirtualize="true" OnQueryAsync="OnQueryAsync" @bind-Value="_virtualItem1"
+                    DefaultVirtualizeItemText="@VirtualItemText1"
                     ShowSearch="_showSearch" IsClearable="_isClearable"></Select>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@VirtualItem1?.Text"></Display>
+            <Display TValue="int?" Value="@_virtualItem1"></Display>
         </div>
     </div>
 
     <p class="code-label">2. 使用 Items 作为数据源</p>
     <div class="row">
         <div class="col-6">
-            <Select IsVirtualize="true" Items="VirtualItems" @bind-Value="VirtualItem2"
+            <Select IsVirtualize="true" Items="VirtualItems" @bind-Value="_virtualItem2"
+                    DefaultVirtualizeItemText="@VirtualItemText2"
                     ShowSearch="_showSearch" IsClearable="_isClearable"></Select>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@VirtualItem2?.Text"></Display>
+            <Display TValue="int?" Value="@_virtualItem2"></Display>
         </div>
     </div>
 </DemoBlock>

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

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -28,11 +28,13 @@ public sealed partial class Selects
         new SelectedItem ("Shanghai", "上海")
     };
 
-    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 SelectedItem? VirtualItem1 { get; set; }
+    private int? _virtualItem1 = 2;
+    private string? VirtualItemText1 => Foos.FirstOrDefault(i => i.Id == 2)?.Name;
 
-    private SelectedItem? VirtualItem2 { get; set; }
+    private int? _virtualItem2 = 3;
+    private string? VirtualItemText2 => Foos.FirstOrDefault(i => i.Id == 3)?.Name;
 
     [NotNull]
     private List<Foo>? Foos { get; set; }
@@ -76,7 +78,7 @@ private async Task<QueryData<SelectedItem>> OnQueryAsync(VirtualizeQueryOption o
         }
         return new QueryData<SelectedItem>
         {
-            Items = items.Skip(option.StartIndex).Take(option.Count).Select(i => new SelectedItem(i.Name!, i.Name!)),
+            Items = items.Skip(option.StartIndex).Take(option.Count).Select(i => new SelectedItem(i.Id.ToString(), i.Name!)),
             TotalCount = items.Count
         };
     }

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

@@ -3030,8 +3030,8 @@
     "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default <b>false</b>. You can set the <code>IsAutoClearSearchTextWhenCollapsed</code> parameter to control whether the text in the search box is automatically cleared after the drop-down box is collapsed. The default value is <b>false</b>.",
     "SelectsConfirmSelectTitle": "Drop-down box with confirmation",
     "SelectsConfirmSelectIntro": "Prevent the current value from changing by setting the <code>OnBeforeSelectedItemChange</code> delegate or setting the <code>ShowSwal</code> parameter to <code>true</code>.",
-    "SelectConfifrmSelectDesc1": "Set the <code>OnBeforeSelectedItemChange</code> callback method, and pop up a window in the callback method to confirm whether to change the value. If it returns <code>true</code>, the value will be changed, otherwise it will not be changed.",
-    "SelectConfifrmSelectDesc2": "Set <code>ShowSwal=\"true\"</code> and then confirm the value of the <code>SwalTitle</code> <code>SwalContent</code> parameter using the built-in popup window. In the callback method, you can confirm whether to change the value.",
+    "SelectConfirmSelectDesc1": "Set the <code>OnBeforeSelectedItemChange</code> callback method, and pop up a window in the callback method to confirm whether to change the value. If it returns <code>true</code>, the value will be changed, otherwise it will not be changed.",
+    "SelectConfirmSelectDesc2": "Set <code>ShowSwal=\"true\"</code> and then confirm the value of the <code>SwalTitle</code> <code>SwalContent</code> parameter using the built-in popup window. In the callback method, you can confirm whether to change the value.",
     "SelectsTimeZoneTitle": "Timezone",
     "SelectsTimeZoneIntro": "Display data of Timezone",
     "SwalTitle": "The drop-down box value changes",

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

@@ -3030,8 +3030,8 @@
     "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框，可以通过设置 <code>IsAutoClearSearchTextWhenCollapsed</code> 参数控制下拉框收起后是否自动清空搜索框内文字，默认值为 <b>false</b> 不清空",
     "SelectsConfirmSelectTitle": "带确认的下拉框",
     "SelectsConfirmSelectIntro": "通过设置 <code>OnBeforeSelectedItemChange</code> 委托或者设置 <code>ShowSwal</code> 参数值为 <code>true</code>，阻止当前值的改变。",
-    "SelectConfifrmSelectDesc1": "设置 <code>OnBeforeSelectedItemChange</code> 回调方法，在回调方法内自己弹窗确认是否更改值，返回 <code>true</code> 时更改，否则不更改",
-    "SelectConfifrmSelectDesc2": "设置 <code>ShowSwal=\"true\"</code> 然后通过设置 <code>SwalTitle</code> <code>SwalContent</code> 参数值使用内置弹窗进行确认即可，在回调方法内自己弹窗确认是否更改值",
+    "SelectConfirmSelectDesc1": "设置 <code>OnBeforeSelectedItemChange</code> 回调方法，在回调方法内自己弹窗确认是否更改值，返回 <code>true</code> 时更改，否则不更改",
+    "SelectConfirmSelectDesc2": "设置 <code>ShowSwal=\"true\"</code> 然后通过设置 <code>SwalTitle</code> <code>SwalContent</code> 参数值使用内置弹窗进行确认即可，在回调方法内自己弹窗确认是否更改值",
     "SelectsTimeZoneTitle": "时区下拉框",
     "SelectsTimeZoneIntro": "下拉框展现时区数据",
     "SwalTitle": "下拉框值变更",
@@ -3064,7 +3064,7 @@
     "SelectsIsEditableDesc": "开启可编辑功能后，输入值如果候选项中没有时，可以通过 <code>TextConvertToValueCallback</code> 回调方法返回新值，可以通过 <code>OnInputChangedCallback</code> 回调对 <code>Items</code> 数据源进行更新，防止页面刷新后输入值丢失",
     "SelectsVirtualizeTitle": "虚拟滚动",
     "SelectsVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
-    "SelectsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
+    "SelectsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据。如果数据源使用 <code>OnQueryAsync</code> 回调获得时只有当下拉框展开时才会触发，，如果数据源使用 <code>Items</code> 时，由于性能问题（有些开发会把几百万条数据给 Items）内部并没有进行查找选中项，所以需要设置 <code>DefaultVirtualizeItemText</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>IsEditable=\"true\"</code> 以及 <code>TextConvertToValueCallback</code> 参数，录入原数据源中不存在的 <code>Foo</code> 时，在 <code></code> 回调方法中添加新 <code>Foo</code> 实例到数据源中</p>",

src/BootstrapBlazor/Components/Select/Select.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -500,7 +500,7 @@ private async Task OnChange(ChangeEventArgs args)
         var item = GetItemWithEnumValue()
             ?? Rows.Find(i => i.Value == CurrentValueAsString)
             ?? Rows.Find(i => i.Active)
-            ?? Rows.FirstOrDefault(i => !i.IsDisabled);
+            ?? Rows.Find(i => !i.IsDisabled);
         return item;
     }
 }