Merge pull request #18734 from abpframework/usecomponent

Custom menu component MVC UI

framework/src/Volo.Abp.UI.Navigation/Volo/Abp/Ui/Navigation/ApplicationMenuExtensions.cs

@@ -115,6 +115,11 @@ public static class ApplicationMenuExtensions
         return menuWithGroups;
     }
     
+    public static ApplicationMenuItem UseComponent<TComponent>(this ApplicationMenuItem applicationMenuItem)
+    {
+        return applicationMenuItem.UseComponent(typeof(TComponent));
+    }
+    
     public static ApplicationMenuItem UseComponent(this ApplicationMenuItem applicationMenuItem, Type componentType)
     {
         return applicationMenuItem.WithCustomData(CustomDataComponentKey, componentType);

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Menu/Default.cshtml

@@ -6,9 +6,15 @@
     var cssClass = string.IsNullOrEmpty(menuItem.CssClass) ? string.Empty : menuItem.CssClass;
     var disabled = menuItem.IsDisabled ? "disabled" : string.Empty;
     var url = string.IsNullOrEmpty(menuItem.Url) ? "#" : Url.IsLocalUrl(menuItem.Url) ? Url.Content(menuItem.Url.EnsureStartsWith('~')) : menuItem.Url;
+    var customComponentType = menuItem.GetComponentTypeOrDefault();
+    
     if (menuItem.IsLeaf)
     {
-        if (menuItem.Url != null)
+        if (customComponentType != null)
+        {
+            @(await Component.InvokeAsync(customComponentType))
+        }
+        else if (menuItem.Url != null)
         {
             <li class="nav-item @cssClass @disabled" @elementId>
                 <a class="nav-link" href="@url" target="@menuItem.Target">
@@ -28,19 +34,26 @@
     {
         <li class="nav-item">
             <div class="dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="Menu_@(menuItem.Name)" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                @if (customComponentType != null)
-                    @if (menuItem.Icon != null)
+                {
-                    {
+                    @(await Component.InvokeAsync(customComponentType))
-                        <i class="@menuItem.Icon"></i>
+                }
-                    }
+                else
-                    @menuItem.DisplayName
+                {
-                </a>
+                    <a class="nav-link dropdown-toggle" href="#" id="Menu_@(menuItem.Name)" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <div class="dropdown-menu border-0 shadow-sm" aria-labelledby="Menu_@(menuItem.Name)">
+                        @if (menuItem.Icon != null)
-                    @foreach (var childMenuItem in menuItem.Items)
+                        {
-                    {
+                            <i class="@menuItem.Icon"></i>
-                        @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+                        }
-                    }
+                        @menuItem.DisplayName
-                </div>
+                    </a>
+                    <div class="dropdown-menu border-0 shadow-sm" aria-labelledby="Menu_@(menuItem.Name)">
+                        @foreach (var childMenuItem in menuItem.Items)
+                        {
+                            @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+                        }
+                    </div>
+                }
             </div>
         </li>
     }

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Menu/_MenuItem.cshtml

@@ -5,10 +5,16 @@
     var cssClass = string.IsNullOrEmpty(Model.CssClass) ? string.Empty : Model.CssClass;
     var disabled = Model.IsDisabled ? "disabled" : string.Empty;
     var url = string.IsNullOrEmpty(Model.Url) ? "#" : Url.IsLocalUrl(Model.Url) ? Url.Content(Model.Url.EnsureStartsWith('~')) : Model.Url;
+    var customComponentType = Model.GetComponentTypeOrDefault();
+    
 }
 @if (Model.IsLeaf)
 {
-    if (Model.Url != null)
+    if (customComponentType != null)
+    {
+        @(await Component.InvokeAsync(customComponentType))
+    }
+    else if (Model.Url != null)
     {
         <a class="dropdown-item @cssClass @disabled" href="@url" target="@Model.Target" @Html.Raw(elementId)>
             @if (Model.Icon != null)
@@ -25,20 +31,27 @@
 else
 {
     <div class="dropdown-submenu">
-        <a role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
+        @if (customComponentType != null)
-                aria-haspopup="true" aria-expanded="false">
+         {
-            <span class="lp-icon">
+             @(await Component.InvokeAsync(customComponentType))
-                <i class="@(Model.Icon ?? "")"></i>
+         }
-            </span>
+        else
-            <span class="lp-text">
+        {
-                @Model.DisplayName
+            <a role="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
-            </span>
+               aria-haspopup="true" aria-expanded="false">
-        </a>
+                <span class="lp-icon">
-        <div class="dropdown-menu border-0 shadow-sm">
+                    <i class="@(Model.Icon ?? "")"></i>
-            @foreach (var childMenuItem in Model.Items)
+                </span>
-            {
+                <span class="lp-text">
-                @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+                    @Model.DisplayName
-            }
+                </span>
-        </div>
+            </a>
+            <div class="dropdown-menu border-0 shadow-sm">
+                @foreach (var childMenuItem in Model.Items)
+                {
+                    @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+                }
+            </div>
+        }
     </div>
 }