From ced25005f14cf4f0c087e8330934f8aabfc3d1c6 Mon Sep 17 00:00:00 2001
From: Marcello Lamonaca <marcello.lamonaca@gmail.com>
Date: Wed, 17 Feb 2021 14:18:21 +0100
Subject: [PATCH] Add starting notes on Blazor

---
 ...{Configuration.md => App Configuration.md} |  16 ++-
 .NET/ASP.NET/Blazor.md                        | 120 ++++++++++++++++++
 2 files changed, 135 insertions(+), 1 deletion(-)
 rename .NET/ASP.NET/{Configuration.md => App Configuration.md} (87%)
 create mode 100644 .NET/ASP.NET/Blazor.md

diff --git a/.NET/ASP.NET/Configuration.md b/.NET/ASP.NET/App Configuration.md
similarity index 87%
rename from .NET/ASP.NET/Configuration.md
rename to .NET/ASP.NET/App Configuration.md
index 93cf9a8..d609a3b 100644
--- a/.NET/ASP.NET/Configuration.md
+++ b/.NET/ASP.NET/App Configuration.md	
@@ -12,9 +12,18 @@ namespace App
     {
         public static void Main(string[] args)
         {
-            CreateHostBuilder(args).Build().Run();  // start and config ASP.NET App
+            CreateHostBuilder(args).Build().Run();  // start and config ASP.NET Core App
+
+            // or start Blazor WASM Single Page App
+            var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.RootComponents.Add<App>("#app");
+
+            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+            await builder.Build().RunAsync();
         }
 
+        // for MVC, Razor Pages and Blazor Server
         public static IHostBuilder CreateHostBuilder(string[] args) =>
             Host.CreateDefaultBuilder(args)
                 .ConfigureWebHostDefaults(webBuilder =>
@@ -65,6 +74,8 @@ namespace App
             services.AddControllers();  // controllers w/o views
             //or
             sevices.AddControllersWithViews();  // MVC Controllers
+            //or
+            services.AddServerSideBlazor();  // needs Razor Pages
             
             // set dependency injection lifetimes
             services.AddSingleton<ITransientService, ServiceImplementation>();
@@ -104,6 +115,9 @@ namespace App
                 endpoints.MapControllers();  // map controllers w/o views
                 // or
                 endpoints.MapRazorPages();
+                // or
+                endpoints.MapRazorHub();
+                endpoints.MapFallbackToPage("/_Host");  // fallback for razor server
             });
         }
     }
diff --git a/.NET/ASP.NET/Blazor.md b/.NET/ASP.NET/Blazor.md
new file mode 100644
index 0000000..b216a44
--- /dev/null
+++ b/.NET/ASP.NET/Blazor.md
@@ -0,0 +1,120 @@
+# Blazor
+
+Blazor apps are based on *components*. A **component** in Blazor is an element of UI, such as a page, dialog, or data entry form.
+
+Components are .NET C# classes built into .NET assemblies that:
+
+- Define flexible UI rendering logic.
+- Handle user events.
+- Can be nested and reused.
+- Can be shared and distributed as Razor class libraries or NuGet packages.
+
+![Blazor Server Architecture](https://docs.microsoft.com/en-us/aspnet/core/blazor/index/_static/blazor-server.png)
+![Blazor WASM Architecture](https://docs.microsoft.com/en-us/aspnet/core/blazor/index/_static/blazor-webassembly.png)
+
+The component class is usually written in the form of a Razor markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*.
+
+## Project Structure & Important Files
+
+### Blazor Server Project Stucture
+
+```txt
+Project
+|-Properties
+| |- launchSettings.json
+|
+|-wwwroot --> static files
+| |-css
+| | |- site.css
+| | |- bootstrap
+| |
+| |- favicon.ico
+|
+|-Pages
+| |- Page.cshtml
+| |- Page.cshtml.cs
+| |- Component.razor
+| |- Index.razor
+| |- ...
+|
+|-Shared
+| |- MainLayout.razor
+| |- MainLayout.razor.css
+| |- ...
+|
+|- _Imports.razor --> @using imports
+|- App.razor --> component root of the app
+|
+|- appsettings.json --> application settings
+|- Program.cs --> App entrypoint
+|- Startup.cs --> services and middleware configs
+```
+
+### Blazor WASM Project Structure
+
+```txt
+Project
+|-Properties
+| |- launchSettings.json
+|
+|-wwwroot --> static files
+| |-css
+| | |- site.css
+| | |- bootstrap
+| |
+| |- index.html
+| |- favicon.ico
+|
+|-Pages
+| |- Component.razor
+| |- Index.razor
+| |- ...
+|
+|-Shared
+| |- MainLayout.razor
+| |- MainLayout.razor.css
+| |- ...
+|
+|- _Imports.razor --> @using imports
+|- App.razor --> component root of the app
+|
+|- appsettings.json --> application settings
+|- Program.cs --> App entrypoint
+```
+
+### `App.razor`
+
+```cs
+<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p>Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>
+```
+
+## Components (`.razor`)
+
+```cs
+@page "/route"
+
+<!-- html of the page -->
+
+<Component  Property="value"/>  // insert component into page
+
+@code {
+    // component model (Properties, Methods, ...)
+
+    [Parameter]  // use prop as HTML attribute
+    purblic Type Property { get; set; } = defaultValue;
+}
+```
+
+<!-- ## Javascript/.NET Interop
+
+[Call Javascript from .NET](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet)  
+[Call .NET from Javascript](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-dotnet-from-javascript) -->