feat(Dropdown): add OnClick event callback (#5319)

* feat: 增加 OnClick 回调方法

* feat: 增加 OnClickWithoutRender 回调方法

* feat: 增加点击事件委托方法实现

* feat: 更改为 DynamicElement 组件

* doc: 更新文档示例

* doc: 更新文档

Author: ArgoZhang

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

@@ -37,7 +37,7 @@
             <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" ShowSplit="false" Color="Color.Info"></Dropdown>
+            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
             <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown>

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

@@ -251,6 +251,18 @@ private AttributeItem[] GetAttributes() =>
     /// <returns></returns>
     private EventItem[] GetEvents() =>
     [
+        new()
+        {
+            Name = "OnClick",
+            Description = Localizer["EventDesc1"],
+            Type ="EventCallback<MouseEventArgs>"
+        },
+        new()
+        {
+            Name = "OnClickWithoutRender",
+            Description = Localizer["EventDesc2"],
+            Type ="Func<Task>"
+        },
         new EventItem()
         {
             Name = "OnSelectedItemChanged",

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

@@ -1793,6 +1793,8 @@
     "AttributeButtonTemplate": "The template of button",
     "AttributeItemTemplate": "The template of item",
     "AttributeItemsTemplate": "The template of items",
+    "EventDesc1": "This event is triggered when the button is clicked",
+    "EventDesc2": "This event is triggered when the button is clicked and the current component is not refreshed for performance improvement",
     "EventOnSelectedItemChanged": "Triggered when the value of the drop-down box changes",
     "FixedButtonText": "The text of fixed button",
     "Item1": "Melbourne",

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

@@ -1793,6 +1793,8 @@
     "AttributeButtonTemplate": "按钮模板",
     "AttributeItemTemplate": "菜单项模板",
     "AttributeItemsTemplate": "下拉菜单模板",
+    "EventDesc1": "点击按钮时触发此事件",
+    "EventDesc2": "点击按钮时触发此事件并且不刷新当前组件，用于提高性能时使用",
     "EventOnSelectedItemChanged": "下拉框值发生改变时触发",
     "FixedButtonText": "固定按钮显示文字",
     "Item1": "北京",

src/BootstrapBlazor/Components/Dropdown/Dropdown.razor

@@ -8,7 +8,8 @@
     <BootstrapLabel for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="@AdditionalAttributes" id="@Id" class="@DirectionClassName">
-    <button type="button" class="@ButtonClassName" data-bs-toggle="@DropdownToggle" disabled="@Disabled">
+    <DynamicElement type="button" class="@ButtonClassName" data-bs-toggle="@DropdownToggle" disabled="@Disabled"
+                    TriggerClick="ShowSplit" OnClick="OnClickButton">
         @if (ButtonTemplate == null)
         {
             @ButtonText
@@ -17,7 +18,7 @@
         {
             @ButtonTemplate(SelectedItem)
         }
-    </button>
+    </DynamicElement>
     @if (ShowSplit)
     {
         <button type="button" class="@ClassName" data-bs-toggle="@ToggleString" disabled="@Disabled" aria-haspopup="true" aria-expanded="false"></button>

src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.cs

@@ -3,6 +3,8 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Web;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -102,6 +104,18 @@ public partial class Dropdown<TValue>
     [Parameter]
     public bool ShowSplit { get; set; }
 
+    /// <summary>
+    /// 获得/设置 OnClick 事件
+    /// </summary>
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+    /// <summary>
+    /// 获得/设置 OnClick 事件不刷新父组件
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnClickWithoutRender { get; set; }
+
     /// <summary>
     /// 获得/设置 获取菜单对齐方式 默认 none 未设置
     /// </summary>
@@ -203,4 +217,16 @@ protected async Task OnItemClick(SelectedItem item)
     }
 
     private string? ButtonText => IsFixedButtonText ? FixedButtonText : SelectedItem?.Text;
+
+    private async Task OnClickButton()
+    {
+        if (OnClickWithoutRender != null)
+        {
+            await OnClickWithoutRender();
+        }
+        if (OnClick.HasDelegate)
+        {
+            await OnClick.InvokeAsync();
+        }
+    }
 }