From 9e49e368b359d6e03cad743b285d3391e6614172 Mon Sep 17 00:00:00 2001 From: Marcello Lamonaca Date: Fri, 30 Apr 2021 19:21:53 +0200 Subject: [PATCH] Add notes for blazor components --- .NET/ASP.NET/Blazor.md | 100 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 91 insertions(+), 9 deletions(-) diff --git a/.NET/ASP.NET/Blazor.md b/.NET/ASP.NET/Blazor.md index b216a44..41d7638 100644 --- a/.NET/ASP.NET/Blazor.md +++ b/.NET/ASP.NET/Blazor.md @@ -31,6 +31,7 @@ Project | |- favicon.ico | |-Pages +| |- _Host.cshtml --> fallback page | |- Page.cshtml | |- Page.cshtml.cs | |- Component.razor @@ -86,7 +87,7 @@ Project ```cs - + // for component routing @@ -97,24 +98,105 @@ Project ``` -## Components (`.razor`) +### `MainLayout.razor` (Blazor Server/WASM) ```cs -@page "/route" +@inherits LayoutComponentBase - +
+
+ // NavMenu Component +
- // insert component into page +
+
+
+ +
+ @Body +
+
+
+``` + +### `_Host.cshtml` (Blazor Server) + +```html +@page "/" +@namespace BlazorServerDemo.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@{ + Layout = null; +} + + + + + + + BlazorServerDemo + + + + + + + + +
+ + An error has occurred. This application may no longer respond until reloaded. + + + An unhandled exception has occurred. See browser dev tools for details. + + Reload + 🗙 +
+ + + + +``` + +## Components (`.razor`) + +[Blazor Components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/) + +```cs +@page "/route/{RouteParameter?}" // make component accessible from a URL (optional) + +@namespace // set the component namespace +@using // using statement +@inherits BaseType // inheritance +@attribute [Attribute] // apply an attribute +@inject Type objectName // dependency injection + +// html of the page here + + // access component w/o @using + // insert component into page, passing attributes + + @ChildContent // segment of UI content + @code { // component model (Properties, Methods, ...) - [Parameter] // use prop as HTML attribute - purblic Type Property { get; set; } = defaultValue; + [Parameter] // capture attribute + public Type Property { get; set; } = defaultValue; + + [Parameter] // capture route parameters + public type RouteParameter { get; set;} + + [Parameter] // segment of UI content + public RenderFragment ChildContent { get; set;} + + private void CallbackMethod() { } } ``` - +[Call .NET from Javascript](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-dotnet-from-javascript)