Blazor WebAssembly 8.0 sample updates (dotnet#141)

NateDuff · Dec 14, 2023 · f6ade77 · f6ade77
1 parent ac94d42
commit f6ade77
Show file tree

Hide file tree

Showing 209 changed files with 1,048 additions and 779 deletions.
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Layout/MainLayout.razor b/8.0/BlazorSample_BlazorWebApp/Components/Layout/MainLayout.razor
@@ -10,9 +10,11 @@
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
-        <article class="content px-4">
-            @Body
-        </article>
+        <CascadingValue Value="@theme">
+            <article class="content px-4">
+                @Body
+            </article>
+        </CascadingValue>
     </main>
 </div>
 
@@ -21,3 +23,7 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+@code {
+    private ThemeInfo theme = new() { ButtonClass = "btn-success" };
+}
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/MainLayout.razor b/8.0/BlazorSample_BlazorWebApp/Components/MainLayout.razor
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/Example.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/Example.razor
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/FetchData.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/FetchData.razor
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/FileUpload1.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/FileUpload1.razor
@@ -2,7 +2,6 @@
 @using System 
 @using System.IO
 @using Microsoft.AspNetCore.Hosting
-@using Microsoft.Extensions.Logging
 @inject ILogger<FileUpload1> Logger
 @inject IWebHostEnvironment Environment
 

diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/Navigate.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/Navigate.razor
@@ -1,5 +1,4 @@
 @page "/navigate"
-@using Microsoft.Extensions.Logging 
 @implements IDisposable
 @inject ILogger<Navigate> Logger
 @inject NavigationManager Navigation

diff --git a/...omponents/Pages/home/RouteParameter.razor → .../Components/Pages/OptionalParameter.razor b/...omponents/Pages/home/RouteParameter.razor → .../Components/Pages/OptionalParameter.razor
@@ -1,4 +1,4 @@
-@page "/route-parameter/{text?}"
+@page "/optional-parameter/{text?}"
 
 <h1>Blazor is @Text!</h1>
 

diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/ProductDetails.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/ProductDetails.razor
@@ -1,5 +1,4 @@
 @page "/product-details/{ProductId:int?}"
-@using Microsoft.Extensions.Logging
 @inject ILogger<ProductDetails> Logger
 @inject IProductRepository Product
 
@@ -50,6 +49,7 @@ else
 
     /*
      * Register the service in Program.cs:
+     * using static BlazorSample.Components.Pages.ProductDetails;
      * builder.Services.AddScoped<IProductRepository, ProductRepository>();
     */
 
@@ -65,7 +65,7 @@ else
             return Task.FromResult(
                 new ProductDetail()
                 { 
-                    ProductName = "Flowbee®",
+                    ProductName = "Flowbee ",
                     Description = "The Revolutionary Haircutting System " +
                         "You've Come to Love! https://flowbee.com/"
                 });

diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/TheSunmakers.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/TheSunmakers.razor
@@ -46,6 +46,7 @@
 
     /*
      * Register the service in Program.cs:
+     * using static BlazorSample.Components.Pages.TheSunmakers;
      * builder.Services.AddScoped<IDataAccess, DataAccess>();
     */
 

diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/ThemedCounter.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/ThemedCounter.razor
@@ -0,0 +1,33 @@
+@page "/themed-counter"
+
+<PageTitle>Themed Counter</PageTitle>
+
+<h1>Themed Counter Example</h1>
+
+<p>Current count: @currentCount</p>
+
+<p>
+    <button @onclick="IncrementCount">
+        Increment Counter (Unthemed)
+    </button>
+</p>
+
+<p>
+    <button 
+        class="btn @(ThemeInfo is not null ? ThemeInfo.ButtonClass : string.Empty)" 
+        @onclick="IncrementCount">
+        Increment Counter (Themed)
+    </button>
+</p>
+
+@code {
+    private int currentCount = 0;
+
+    [CascadingParameter]
+    protected ThemeInfo? ThemeInfo { get; set; }
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}
diff --git a/8.0/BlazorSample_BlazorWebApp/Components/Pages/User.razor b/8.0/BlazorSample_BlazorWebApp/Components/Pages/User.razor
diff --git a/...e_WebAssembly/UIThemeClasses/ThemeInfo.cs → 8.0/BlazorSample_BlazorWebApp/ThemeInfo.cs b/...e_WebAssembly/UIThemeClasses/ThemeInfo.cs → 8.0/BlazorSample_BlazorWebApp/ThemeInfo.cs
@@ -1,4 +1,4 @@
-namespace BlazorSample.UIThemeClasses;
+namespace BlazorSample;
 
 public class ThemeInfo
 {

diff --git a/8.0/BlazorSample_WebAssembly/ComponentMetadata.cs b/8.0/BlazorSample_WebAssembly/ComponentMetadata.cs
@@ -1,6 +1,7 @@
-public class ComponentMetadata
+namespace BlazorSample;
+
+public class ComponentMetadata
 {
     public string? Name { get; set; }
-    public Dictionary<string, object> Parameters { get; set; } =
-        new Dictionary<string, object>();
+    public Dictionary<string, object> Parameters { get; set; } = [];
 }
diff --git a/...ary-parameters/AttributeOrderChild1.razor → ...bly/Components/AttributeOrderChild1.razor b/...ary-parameters/AttributeOrderChild1.razor → ...bly/Components/AttributeOrderChild1.razor
diff --git a/...ary-parameters/AttributeOrderChild2.razor → ...bly/Components/AttributeOrderChild2.razor b/...ary-parameters/AttributeOrderChild2.razor → ...bly/Components/AttributeOrderChild2.razor
diff --git a/.../overwriting-parameters/BadExpander.razor → ..._WebAssembly/Components/BadExpander.razor b/.../overwriting-parameters/BadExpander.razor → ..._WebAssembly/Components/BadExpander.razor
diff --git a/...bly/Components/event-handling/Child.razor → ...Sample_WebAssembly/Components/Child.razor b/...bly/Components/event-handling/Child.razor → ...Sample_WebAssembly/Components/Child.razor
diff --git a/...y/Components/data-binding/ChildBind.razor → ...le_WebAssembly/Components/ChildBind.razor b/...y/Components/data-binding/ChildBind.razor → ...le_WebAssembly/Components/ChildBind.razor
diff --git a/...orms-and-validation/CustomInputText.razor → ...Assembly/Components/CustomInputText.razor b/...orms-and-validation/CustomInputText.razor → ...Assembly/Components/CustomInputText.razor
diff --git a/...mponent-model-relationships/Details.razor → ...mple_WebAssembly/Components/Details.razor b/...mponent-model-relationships/Details.razor → ...mple_WebAssembly/Components/Details.razor
diff --git a/...nts/overwriting-parameters/Expander.razor → ...ple_WebAssembly/Components/Expander.razor b/...nts/overwriting-parameters/Expander.razor → ...ple_WebAssembly/Components/Expander.razor
diff --git a/...WebAssembly/Components/home/Heading.razor → ...mple_WebAssembly/Components/Heading.razor b/...WebAssembly/Components/home/Heading.razor → ...mple_WebAssembly/Components/Heading.razor
diff --git a/.../Components/layouts/DoctorWhoLayout.razor → ...y/Components/Layout/DoctorWhoLayout.razor b/.../Components/layouts/DoctorWhoLayout.razor → ...y/Components/Layout/DoctorWhoLayout.razor
@@ -1,7 +1,9 @@
 @inherits LayoutComponentBase
 
+<PageTitle>Doctor Who® Database</PageTitle>
+
 <header>
-    <h1>Doctor Who&trade; Episode Database</h1>
+    <h1>Doctor Who® Database</h1>
 </header>
 
 <nav>
@@ -17,7 +19,7 @@
 </footer>
 
 @code {
-    public string TrademarkMessage { get; set; } = 
+    public string TrademarkMessage { get; set; } =
         "Doctor Who is a registered trademark of the BBC. " +
-        "https://www.doctorwho.tv/";
+        "https://www.doctorwho.tv/ https://www.bbc.com";
 }
diff --git a/...Components/layouts/DoctorWhoLayout2.razor → .../Components/Layout/DoctorWhoLayout2.razor b/...Components/layouts/DoctorWhoLayout2.razor → .../Components/Layout/DoctorWhoLayout2.razor
@@ -1,7 +1,9 @@
 @inherits LayoutComponentBase
 @layout ProductionsLayout
 
-<h1>Doctor Who&trade; Episode Database</h1>
+<PageTitle>Doctor Who® Database</PageTitle>
+
+<h1>Doctor Who® Database</h1>
 
 <nav>
     <a href="main-episode-list">Main Episode List</a>
@@ -16,7 +18,7 @@
 </div>
 
 @code {
-    public string TrademarkMessage { get; set; } = 
+    public string TrademarkMessage { get; set; } =
         "Doctor Who is a registered trademark of the BBC. " +
-        "https://www.doctorwho.tv/";
+        "https://www.doctorwho.tv/ https://www.bbc.com";
 }
diff --git a/8.0/BlazorSample_WebAssembly/Components/Layout/MainLayout.razor b/8.0/BlazorSample_WebAssembly/Components/Layout/MainLayout.razor
@@ -1,5 +1,4 @@
 @inherits LayoutComponentBase
-@using BlazorSample.UIThemeClasses
 
 <div class="page">
     <div class="sidebar">

diff --git a/8.0/BlazorSample_WebAssembly/Components/Layout/NavMenu.razor b/8.0/BlazorSample_WebAssembly/Components/Layout/NavMenu.razor
@@ -1,39 +1,49 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@using System.Reflection
+@using System.Text.RegularExpressions
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">BlazorSample</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
+        <a class="navbar-brand" href="">Blazor Sample</a>
     </div>
 </div>
 
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable"
+     onclick="document.querySelector('.navbar-toggler').click()">
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested" aria-hidden="true"></span> Weather
+                <span class="bi bi-house-door-fill-nav-menu"
+                      aria-hidden="true"></span> Home
             </NavLink>
         </div>
+
+        @foreach (var name in GetRoutableComponents())
+        {
+            <div class="nav-item px-3">
+                <NavLink class="nav-link"
+                         href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+                    @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+                </NavLink>
+            </div>
+        }
+
     </nav>
 </div>
 
 @code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
+    public IEnumerable<string> GetRoutableComponents()
     {
-        collapseNavMenu = !collapseNavMenu;
+        return Assembly.GetExecutingAssembly()
+           .ExportedTypes
+           .Where(t => t.IsSubclassOf(typeof(ComponentBase)))
+           .Where(c => c.GetCustomAttributes(inherit: true)
+                        .OfType<RouteAttribute>()
+                        .ToArray()
+                        .Count() > 0)
+           .Where(c => c.Name != "Home" && c.Name != "Error")
+           .OrderBy(o => o.Name)
+           .Select(c => c.Name);
     }
 }
diff --git a/8.0/BlazorSample_WebAssembly/Components/Layout/NavMenu.razor.css b/8.0/BlazorSample_WebAssembly/Components/Layout/NavMenu.razor.css
@@ -21,15 +21,15 @@
     background-size: cover;
 }
 
-.bi-house-door-fill {
+.bi-house-door-fill-nav-menu {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
 }
 
-.bi-plus-square-fill {
+.bi-plus-square-fill-nav-menu {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
 }
 
-.bi-list-nested {
+.bi-list-nested-nav-menu {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
 }
 
@@ -55,15 +55,15 @@
         line-height: 3rem;
     }
 
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
+        .nav-item ::deep a.active {
+            background-color: rgba(255,255,255,0.37);
+            color: white;
+        }
 
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
+        .nav-item ::deep a:hover {
+            background-color: rgba(255,255,255,0.1);
+            color: white;
+        }
 
 @media (min-width: 641px) {
     .navbar-toggler {
@@ -74,7 +74,7 @@
         /* Never collapse the sidebar for wide screens */
         display: block;
     }
-    
+
     .nav-scrollable {
         /* Allow sidebar to scroll for tall menus */
         height: calc(100vh - 3.5rem);

diff --git a/...omponents/layouts/ProductionsLayout.razor → ...Components/Layout/ProductionsLayout.razor b/...omponents/layouts/ProductionsLayout.razor → ...Components/Layout/ProductionsLayout.razor
diff --git a/...-type-support/ListGenericTypeItems1.razor → ...ly/Components/ListGenericTypeItems1.razor b/...-type-support/ListGenericTypeItems1.razor → ...ly/Components/ListGenericTypeItems1.razor
diff --git a/...nents/call-dotnet-from-js/ListItem1.razor → ...le_WebAssembly/Components/ListItem1.razor b/...nents/call-dotnet-from-js/ListItem1.razor → ...le_WebAssembly/Components/ListItem1.razor
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,7 @@ @@
         /*
          * Register the service in Program.cs:
+         * using static BlazorSample.Components.Pages.TheSunmakers;
          * builder.Services.AddScoped<IDataAccess, DataAccess>();
         */
@@ Expand Down @@