Blazor and Razor - Notes and Tips

 What is Blazor - New innovative framework for webapplication by Microsoft?

Blazor is a .NET modern frontend web framework based on HTML, CSS, and C# that supports both server-side rendering and client interactivity in a single programming model:

• Create rich interactive UIs using C#.
• Share server-side and client-side app logic written in .NET.
• Render the UI as HTML and CSS for wide browser support, including mobile browsers.
• Build hybrid desktop and mobile apps with .NET and Blazor.

Some of the benefits of using Blazor include:

• Build web UI fast with reusable components: Blazor's flexible component model makes it easy to build reusable components that you can use to assemble apps quickly.
  
  
• Add rich interactivity in C#: Handle arbitrary UI events from the browser and implement component logic all in C#, a modern type-safe language that is easy to learn and highly versatile.
  
  
• One development stack: Build your entire web app from the frontend to the backend using a single development stack and share code for common logic on the client and server.
  
  
• Efficient diff-based rendering: As components render, Blazor carefully tracks what parts of the DOM changed, so that UI updates are fast and efficient.
  
  
• Server and client-side rendering: Render components from both the server and the client to implement various web app architectures and deliver the best possible web app experience.
  
  
• Progressively enhanced server rendering: Use built-in support for enhanced navigation & form handling and streaming rendering to progressively enhance the user experience of server rendered web apps.
  
  
• Interop with JavaScript: Use the ecosystem of JavaScript libraries and browser APIs from your C# code.
  
  
• Integrate with existing apps: Integrate Blazor components with existing MVC, Razor Pages, or JavaScript based apps.
  
  
• Great tooling: Use Visual Studio or Visual Studio Code to get started in seconds and stay productive with great code editing support.
  
  
• Web, mobile, and desktop: Blazor components can also be used to build native mobile & desktop apps using a hybrid of native and web, called Blazor Hybrid.

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.

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, informally as Blazor components. 

Every component in a Blazor Web App adopts a render mode to determine the hosting model that it uses. Render modes are applied to components with the @rendermode directive on the component instance or on the component definition.

Blazor apps are based on Razor components, often referred to as just components. A component is an element of UI, such as a page, dialog, or data entry form. 

What is Razor

Razor refers to how components are usually written in the form of a Razor markup page for client-side UI logic and composition. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor files use the .razor file extension.

The Razor component processes Razor component lifecycle events in a set of synchronous and asynchronous lifecycle methods. 

Component lifecycle events:

1. If the component is rendering for the first time on a request:

• Create the component's instance.
• Perform property injection. Run SetParametersAsync.
• Call OnInitialized{Async}. If an incomplete Task is returned, the Task is awaited and then the component is rerendered.

2. Call OnParametersSet{Async}. If an incomplete Task is returned, the Task is awaited and then the component is rerendered.

3. Render for all synchronous work and complete Tasks.

The @page Razor directive makes the file an MVC action, which means that it can handle requests. @page must be the first Razor directive on a page. 

@page and @model are examples of transitioning into Razor-specific markup.

The @model directive specifies the type of the model passed to the Razor Page. 

Will discuss in details in another post about the best practise, state manegement, how-to-use- Redis cache, .NET Aspire componenets interface with Blazor framework.

Enjoy Blazor :)