doc(MultiSelect): update OnEditCallback sample code (#5101)

* doc: 移除不使用的代码 * doc: 增加 OnEditCallback 示例 Co-Authored-By: ice6 <[email protected]>
dotnetcore · Jan 12, 2025 · 6f491d7 · 6f491d7
1 parent ae7d91b
commit 6f491d7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor
@@ -120,7 +120,6 @@
 
 <DemoBlock Title="@Localizer["MultiSelectOptionChangeTitle"]" Introduction="@Localizer["MultiSelectOptionChangeIntro"]" Name="OptionChange">
     <MultiSelect Items="@Items" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedOptionItemsValue" />
-    <ConsoleLogger @ref="OptionLogger" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["MultiSelectClientValidationTitle"]" Introduction="@Localizer["MultiSelectClientValidationIntro"]" Name="ClientValidation">
@@ -247,8 +246,11 @@
         @((MarkupString)Localizer["MultiSelectIsEditableDescription"].Value)
     </section>
     <div class="row g-3">
-        <div class="col-12">
-            <MultiSelect TValue="string" Items="@EditableItems" IsEditable="true" Max="2" EditSubmitKey="EditSubmitKey.Space" />
+        <div class="col-12 col-sm-6">
+            <MultiSelect @bind-Value="@_editString" Items="@EditableItems" IsEditable="true" Max="2" EditSubmitKey="EditSubmitKey.Enter" OnEditCallback="OnEditCallback" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@_editString"></Display>
         </div>
     </div>
 </DemoBlock>

diff --git a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs
@@ -72,9 +72,6 @@ public partial class MultiSelects
     [NotNull]
     private ConsoleLogger? Logger { get; set; }
 
-    [NotNull]
-    private ConsoleLogger? OptionLogger { get; set; }
-
     private List<SelectedItem>? SearchItemsSource { get; set; }
 
     private string SelectedSearchItemsValue { get; set; } = "Beijing";
@@ -98,6 +95,21 @@ public partial class MultiSelects
 
     private List<SelectedItem> CascadingItems1 { get; set; } = [];
 
+    private string? _editString;
+
+    private async Task<SelectedItem> OnEditCallback(string value)
+    {
+        await Task.Delay(100);
+
+        var item = EditableItems.Find(i => i.Text.Equals(value, System.StringComparison.OrdinalIgnoreCase));
+        if (item == null)
+        {
+            item = new SelectedItem(value, value);
+            EditableItems.Add(item);
+        }
+        return item;
+    }
+
     private SelectedItem[] GroupItems { get; } =
     [
         new("Jilin", "吉林") { GroupName = "东北"},