Highlighted active menu for MPA.

Author: hikalkan

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/App_Start/MySpaProjectNavigationProvider.cs

@@ -7,7 +7,7 @@ namespace MySpaProject.WebMpa
     /// This class defines menus for the application.
     /// It uses ABP's menu system.
     /// When you add menu items here, they are automatically appear in angular application.
-    /// See .cshtml and .js files under App/Main/views/layout/header to know how to render menu.
+    /// See _TopMenu.cshtml file under Views/Shared/ to know how to render menu.
     /// </summary>
     public class MySpaProjectNavigationProvider : INavigationProvider
     {

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Controllers/LayoutController.cs

@@ -17,11 +17,12 @@ public LayoutController(IUserNavigationManager userNavigationManager, ILocalizat
         }
 
         [ChildActionOnly]
-        public PartialViewResult TopMenu()
+        public PartialViewResult TopMenu(string activeMenu = "")
         {
             var model = new TopMenuViewModel
                         {
-                            MainMenu = _userNavigationManager.GetMenu("MainMenu", CurrentSession.UserId)
+                            MainMenu = _userNavigationManager.GetMenu("MainMenu", CurrentSession.UserId),
+                            ActiveMenuItemName = activeMenu
                         };
 
             return PartialView("_TopMenu", model);

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Models/Layout/TopMenuViewModel.cs

@@ -5,5 +5,7 @@ namespace MySpaProject.WebMpa.Models.Layout
     public class TopMenuViewModel
     {
         public UserMenu MainMenu { get; set; }
+
+        public string ActiveMenuItemName { get; set; }
     }
 }

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/MySpaProject.WebMpa.csproj

@@ -318,8 +318,8 @@
     <Content Include="packages.config" />
     <Content Include="Views\About\Index.cshtml" />
     <Content Include="Views\Shared\_TopBar.cshtml" />
-    <Content Include="Views\Shared\_LanguageSelection.cshtml" />
-    <Content Include="Views\Shared\_TopMenu.cshtml" />
+    <Content Include="Views\Layout\_LanguageSelection.cshtml" />
+    <Content Include="Views\Layout\_TopMenu.cshtml" />
     <Content Include="Scripts\toastr.min.js.map" />
     <Content Include="Views\Shared\Error.cshtml" />
     <None Include="Web.Debug.config">

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/About/Index.cshtml

@@ -1,5 +1,5 @@
 @{
-    ViewBag.CurrentPage = "About";
+    ViewBag.ActiveMenu = "About"; //The menu item will be active for this page.
 }
 <div>
     <h1><img src="~/images/abp-logo.png" style="padding-right: 10px;" />@string.Format(L("AboutFormat"), "ASP.NET Boilerplate")</h1>

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Home/Index.cshtml

@@ -1,5 +1,5 @@
 @{
-    ViewBag.CurrentPage = "Home";
+    ViewBag.ActiveMenu = "Home"; //The menu item will be active for this page.
 }
 <div>
     <h1>@L("WellcomeMessage")!</h1>

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Shared/_LanguageSelection.cshtml renamed to Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Layout/_LanguageSelection.cshtml

@@ -1,7 +1,7 @@
 @model MySpaProject.WebMpa.Models.Layout.TopMenuViewModel
 @foreach (var menuItem in Model.MainMenu.Items)
 {
-    <li class="@(ViewBag.CurrentPage == menuItem.Name ? "active" : "")">
+    <li class="@(Model.ActiveMenuItemName == menuItem.Name ? "active" : "")">
         <a href="@menuItem.Url">
             @if (!string.IsNullOrWhiteSpace(menuItem.Icon))
             {

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Shared/_TopMenu.cshtml renamed to Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Layout/_TopMenu.cshtml

@@ -29,6 +29,7 @@
         <script src="@Url.Content("~/Scripts/others/html5shiv.js")"></script>
         <script src="@Url.Content("~/Scripts/others/respond.min.js")"></script>
     <![endif]-->
+
     @Scripts.Render("~/Bundles/vendor/js/top")
 
 </head>

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebMpa/Views/Shared/_Layout.cshtml

@@ -11,7 +11,7 @@
         </div>
         <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-                @Html.Action("TopMenu", "Layout")
+                @Html.Action("TopMenu", "Layout", new { activeMenu = ViewBag.ActiveMenu })
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 @Html.Action("LanguageSelection", "Layout")