Enhance breadcrumb handling and layout updates

markhazleton · markhazleton · commit e486b3814d84 · 2025-07-28T17:27:42.000-05:00
- Improved `GenerateBreadcrumbs` method in `BreadcrumbHelper.cs` to better manage Razor Pages and streamline breadcrumb generation.
- Updated HTML structure and styling in `_Breadcrumb.cshtml` for improved visual integration with the dark theme.
- Adjusted breadcrumb placement and added CSS styles in `_Layout.cshtml` for better mobile and desktop responsiveness.
- Applied similar changes to `_LayoutPivot.cshtml` for consistency.
- Modified `robots.txt` to disallow access to `/MvcEmployee/` while allowing `/api/` endpoints for better search engine indexing.
diff --git a/Mwh.Sample.Web/Helpers/BreadcrumbHelper.cs b/Mwh.Sample.Web/Helpers/BreadcrumbHelper.cs
@@ -14,7 +14,7 @@ public static class BreadcrumbHelper
     public static List<(string Name, string Url)> GenerateBreadcrumbs(ViewContext viewContext)
     {
         var breadcrumbs = new List<(string Name, string Url)>();
-        
+
         // Always start with Home
         breadcrumbs.Add(("Home", "/"));
 
@@ -23,7 +23,35 @@ public static class BreadcrumbHelper
         var actionName = viewContext.RouteData.Values["action"]?.ToString();
         var idValue = viewContext.RouteData.Values["id"]?.ToString();
 
-        // Skip if we're already on the home page
+        // Handle Razor Pages first - check if this is a Razor Page request
+        var isRazorPage = viewContext.ActionDescriptor.DisplayName?.Contains("Pages") == true ||
+                         viewContext.HttpContext.Request.Path.Value?.Contains("/EmployeeRazor") == true ||
+                         viewContext.ActionDescriptor.GetType().Name.Contains("CompiledPageActionDescriptor");
+
+        if (isRazorPage)
+        {
+            breadcrumbs.Add(("Employee Razor Pages", "/EmployeeRazor"));
+
+            var path = viewContext.HttpContext.Request.Path.Value;
+            var pageName = path?.Split('/', StringSplitOptions.RemoveEmptyEntries).LastOrDefault();
+
+            // Handle the case where URL is just /EmployeeRazor (Index page)
+            if (string.IsNullOrEmpty(pageName) || pageName.Equals("EmployeeRazor", StringComparison.OrdinalIgnoreCase))
+            {
+                // This is the Index page, we already have the breadcrumbs we need
+                return breadcrumbs;
+            }
+
+            // Handle other pages (Create, Edit, Details, Delete, etc.)
+            if (!string.IsNullOrEmpty(pageName))
+            {
+                AddPageBreadcrumb(breadcrumbs, pageName, idValue);
+            }
+
+            return breadcrumbs;
+        }
+
+        // Skip if we're already on the home page (for regular MVC controllers)
         if (string.IsNullOrEmpty(controllerName) || controllerName.Equals("Home", StringComparison.OrdinalIgnoreCase))
         {
             if (string.IsNullOrEmpty(actionName) || actionName.Equals("Index", StringComparison.OrdinalIgnoreCase))
@@ -66,21 +94,6 @@ public static class BreadcrumbHelper
                 break;
         }
 
-        // Handle Razor Pages
-        if (viewContext.ActionDescriptor.DisplayName?.Contains("Pages") == true || 
-            viewContext.HttpContext.Request.Path.Value?.Contains("/EmployeeRazor") == true)
-        {
-            breadcrumbs.Clear();
-            breadcrumbs.Add(("Home", "/"));
-            breadcrumbs.Add(("Employee Razor Pages", "/EmployeeRazor"));
-            
-            var pageName = viewContext.HttpContext.Request.Path.Value?.Split('/').LastOrDefault();
-            if (!string.IsNullOrEmpty(pageName) && !pageName.Equals("EmployeeRazor", StringComparison.OrdinalIgnoreCase))
-            {
-                AddPageBreadcrumb(breadcrumbs, pageName, idValue);
-            }
-        }
-
         return breadcrumbs;
     }
 
@@ -170,7 +183,7 @@ private static string FormatActionName(string actionName)
         {
             "Create" => "Create",
             "Edit" => "Edit",
-            "Details" => "Details", 
+            "Details" => "Details",
             "Delete" => "Delete",
             _ => actionName
         };
@@ -186,7 +199,7 @@ private static string FormatPageName(string pageName)
             "Create" => "Create",
             "Edit" => "Edit",
             "Details" => "Details",
-            "Delete" => "Delete", 
+            "Delete" => "Delete",
             _ => pageName
         };
     }
diff --git a/Mwh.Sample.Web/Helpers/StructuredDataHelper.cs b/Mwh.Sample.Web/Helpers/StructuredDataHelper.cs
@@ -58,7 +58,7 @@ public static string GenerateWebSiteSchema(string baseUrl)
                 type = "SearchAction",
                 target = new
                 {
-                    type = "EntryPoint", 
+                    type = "EntryPoint",
                     urlTemplate = $"{baseUrl}/search?q={{search_term_string}}"
                 },
                 queryInput = "required name=search_term_string"
diff --git a/Mwh.Sample.Web/Views/Shared/_Breadcrumb.cshtml b/Mwh.Sample.Web/Views/Shared/_Breadcrumb.cshtml
@@ -5,36 +5,38 @@
 
 @if (breadcrumbs.Count > 1)
 {
-    <nav aria-label="breadcrumb" class="mb-4">
-        <ol class="breadcrumb bg-light rounded p-3 shadow-sm">
-            @for (int i = 0; i < breadcrumbs.Count; i++)
-            {
-                var breadcrumb = breadcrumbs[i];
-                var isLast = i == breadcrumbs.Count - 1;
+    <nav aria-label="breadcrumb" class="breadcrumb-nav bg-dark border-top border-secondary py-2">
+        <div class="container">
+            <ol class="breadcrumb mb-0">
+                @for (int i = 0; i < breadcrumbs.Count; i++)
+                {
+                    var breadcrumb = breadcrumbs[i];
+                    var isLast = i == breadcrumbs.Count - 1;
 
-                <li class="breadcrumb-item @(isLast ? "active" : "")" @(isLast ? "aria-current=\"page\"" : "")>
-                    @if (isLast)
-                    {
-                        <span class="text-muted">
-                            <i class="bi bi-geo-alt-fill me-1"></i>@breadcrumb.Name
-                        </span>
-                    }
-                    else
-                    {
-                        <a href="@breadcrumb.Url" class="text-decoration-none">
-                            @if (i == 0)
-                            {
-                                <i class="bi bi-house-door-fill me-1"></i>
-                            }
-                            else
-                            {
-                                <i class="bi bi-chevron-right me-1"></i>
-                            }
-                            @breadcrumb.Name
-                        </a>
-                    }
-                </li>
-            }
-        </ol>
+                    <li class="breadcrumb-item @(isLast ? "active" : "")" @(isLast ? "aria-current=\"page\"" : "")>
+                        @if (isLast)
+                        {
+                            <span class="text-light">
+                                <i class="bi bi-geo-alt-fill me-1"></i>@breadcrumb.Name
+                            </span>
+                        }
+                        else
+                        {
+                            <a href="@breadcrumb.Url" class="text-decoration-none text-light">
+                                @if (i == 0)
+                                {
+                                    <i class="bi bi-house-door-fill me-1"></i>
+                                }
+                                else
+                                {
+                                    <i class="bi bi-chevron-right me-1"></i>
+                                }
+                                @breadcrumb.Name
+                            </a>
+                        }
+                    </li>
+                }
+            </ol>
+        </div>
     </nav>
 }
diff --git a/Mwh.Sample.Web/Views/Shared/_Layout.cshtml b/Mwh.Sample.Web/Views/Shared/_Layout.cshtml
@@ -8,19 +8,54 @@
 <!DOCTYPE html>
 <html lang="en" class="h-100" data-bs-theme="@(BootswatchThemeHelper.GetCurrentColorMode(Context))">
 
-<head> @await Html.PartialAsync("Sections/_metatags")
-
+<head>
+    @await Html.PartialAsync("Sections/_metatags")
     <!-- CSS -->
     <link id="bootswatch-theme-stylesheet" rel="stylesheet" href="@themeUrl" />
     <link rel="stylesheet" href="/lib/bootstrap-icons/font/bootstrap-icons.css" />
     <link rel="stylesheet" href="/lib/datatables.net-bs/css/dataTables.bootstrap5.min.css" />
-    
+    <style>
+        /* Responsive navbar offset - account for main nav + breadcrumb */
+        body.d-flex {
+            padding-top: 0;
+        }
+
+        /* Mobile navbar offset - account for both nav and breadcrumb */
+        @@media (max-width: 991.98px) {
+            main.flex-shrink-0 {
+                margin-top: 96px;
+                /* Increased to account for breadcrumb */
+            }
+        }
+
+        /* Desktop navbar offset - account for both nav and breadcrumb */
+        @@media (min-width: 992px) {
+            main.flex-shrink-0 {
+                margin-top: 104px;
+                /* Increased to account for breadcrumb */
+            }
+        }
+
+        /* Remove spacing between navbar and breadcrumb */
+        .breadcrumb-nav {
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Custom breadcrumb styling for dark theme */
+        .breadcrumb-nav .breadcrumb-item+.breadcrumb-item::before {
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        .breadcrumb-nav .breadcrumb a:hover {
+            color: rgba(255, 255, 255, 0.8) !important;
+        }
+    </style>
     @RenderSection("HeadScripts", required: false)
 </head>
 
 <body id="page-top" class="d-flex flex-column h-100">
-    <header>
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow" id="mainNav">
+    <header class="fixed-top shadow">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0" id="mainNav">
             <div class="container">
                 <a class="navbar-brand d-flex align-items-center" href="/">
                     <i class="bi bi-code-square me-2"></i>
@@ -81,11 +116,11 @@
                 </div>
             </div>
         </nav>
+        @await Html.PartialAsync("_Breadcrumb")
     </header>
 
     <main role="main" class="flex-shrink-0">
-        <div class="container-fluid py-5 mt-5">
-            @await Html.PartialAsync("_Breadcrumb")
+        <div class="container-fluid py-4">
             @RenderBody()
         </div>
     </main>
@@ -103,4 +138,3 @@
 </body>
 
 </html>
-
diff --git a/Mwh.Sample.Web/Views/Shared/_LayoutPivot.cshtml b/Mwh.Sample.Web/Views/Shared/_LayoutPivot.cshtml
@@ -1,25 +1,65 @@
-﻿@{
+﻿@inject StyleCache StyleCache
+@{
     var currentYear = DateTime.Now.Year.ToString();
     var status = new ApplicationStatus(Assembly.GetExecutingAssembly());
+    var themeName = BootswatchThemeHelper.GetCurrentThemeName(Context);
+    var themeUrl = BootswatchThemeHelper.GetThemeUrl(StyleCache, themeName);
 }
 <!DOCTYPE html>
-<html lang="en" class="h-100">
+<html lang="en" class="h-100" data-bs-theme="@(BootswatchThemeHelper.GetCurrentColorMode(Context))">
 
 <head>
     @await Html.PartialAsync("Sections/_metatags")
 
     <!-- CSS -->
-    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
+    <link id="bootswatch-theme-stylesheet" rel="stylesheet" href="@themeUrl" />
     <link rel="stylesheet" href="/lib/bootstrap-icons/font/bootstrap-icons.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.13.0/pivot.min.css" />
 
+    <style>
+        /* Responsive navbar offset - account for main nav + breadcrumb */
+        body.d-flex {
+            padding-top: 0;
+        }
+
+        /* Mobile navbar offset - account for both nav and breadcrumb */
+        @@media (max-width: 991.98px) {
+            main.flex-shrink-0 {
+                margin-top: 96px;
+                /* Increased to account for breadcrumb */
+            }
+        }
+
+        /* Desktop navbar offset - account for both nav and breadcrumb */
+        @@media (min-width: 992px) {
+            main.flex-shrink-0 {
+                margin-top: 104px;
+                /* Increased to account for breadcrumb */
+            }
+        }
+
+        /* Remove spacing between navbar and breadcrumb */
+        .breadcrumb-nav {
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Custom breadcrumb styling for dark theme */
+        .breadcrumb-nav .breadcrumb-item+.breadcrumb-item::before {
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        .breadcrumb-nav .breadcrumb a:hover {
+            color: rgba(255, 255, 255, 0.8) !important;
+        }
+    </style>
+
     @RenderSection("HeadScripts", required: false)
 </head>
 
 <body id="page-top" class="d-flex flex-column h-100">
-    <header>
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow" id="mainNav">
+    <header class="fixed-top shadow">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0" id="mainNav">
             <div class="container">
                 <a class="navbar-brand d-flex align-items-center" href="/">
                     <i class="bi bi-code-square me-2"></i>
@@ -76,14 +116,15 @@
                             </a>
                         </li>
                     </ul>
+                    <bootswatch-theme-switcher />
                 </div>
             </div>
         </nav>
+        @await Html.PartialAsync("_Breadcrumb")
     </header>
 
     <main role="main" class="flex-shrink-0">
-        <div class="container-fluid py-5 mt-5">
-            @await Html.PartialAsync("_Breadcrumb")
+        <div class="container-fluid py-4">
             @RenderBody()
         </div>
     </main>
@@ -95,6 +136,7 @@
     <!-- JavaScript Bundle -->
     <script src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script src="/_content/WebSpark.Bootswatch/js/bootswatch-theme-switcher.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script
         src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
@@ -105,4 +147,3 @@
 </body>
 
 </html>
-
diff --git a/Mwh.Sample.Web/wwwroot/robots.txt b/Mwh.Sample.Web/wwwroot/robots.txt
@@ -11,6 +11,7 @@ Allow: /
 # Disallow admin and API documentation areas
 Disallow: /swagger/
 Disallow: /health
+Disallow  /MvcEmployee/
 
 # Allow API endpoints for public access
 Allow: /api/

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ public static string GenerateWebSiteSchema(string baseUrl)`
`58`	`58`	`type = "SearchAction",`
`59`	`59`	`target = new`
`60`	`60`	`{`
`61`		`- type = "EntryPoint",`
	`61`	`+ type = "EntryPoint",`
`62`	`62`	`urlTemplate = $"{baseUrl}/search?q={{search_term_string}}"`
`63`	`63`	`},`
`64`	`64`	`queryInput = "required name=search_term_string"`