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 :)

Comments

Post a Comment

Popular posts from this blog

How to fix Azure DevOps error MSB4126

Image
Setting up build and release pipeline always tedious and we face many build related issues. Here is one common error I face couple of times while setting app Web or windows apps in Azure DevOps After placing the code in repos, and creating the build pipeline and run it, you can face the following error ##[error]D:\a\8\s\<your solution file>.sln.metaproj(0,0): Error MSB4126: The specified solution configuration "release|$(BuildPlatform)" is invalid. Please specify a valid solution configuration using the Configuration and Platform properties (e.g. MSBuild.exe Solution.sln /p:Configuration=Debug /p:Platform="Any CPU") or leave those properties blank to use the default solution configuration. To understand what is target platform defined in your project you need to visit or open the solution(.sln) file and review the following sections. In my case, this has been defined as x86 as target platform.         ...
Read more

SharePoint Admin Center

Image
 SharePoint Admin Center allows you to view your organization's SharePoint site including communication sites, channel sites, and sites that belong to Microsoft 365 group. This is same like Site Admin in earlier days of SharePoint versions. You can search organizational site, sort them or filter sites the way you want. Easy way to find and apply/change site settings. Under Policies, click on Sharing - This will allow you to create rules/ set control sharing at the organization level in SharePoint and OneDrive Here, in this page, you can apply settings to restrict how users are allowed to access content in SharePoint and OneDrive. Term store, the word getting populated from SharePoint 2010. You can feed metadata of metadata information of your organization level, program level, project level in Term store. helps your organization's knowledge better.  AI soon will play a vital role here and using AI, you can acyually find collect and process and finally yoour organization's d...
Read more

Entity Framework common error - no such table: __EFMigrationsHistory + ConnectionString property has not been initialized + certificate chain was issued by an authority that is not trusted

Today, I'm going to discuss about few common errors developer face while executing migration using Entity Famework. For example one common error is  SQLite Error 1: 'no such table: __EFMigrationsHistory' . This is kind of limtation of SQL Lite to work with memory management. Below the error infomation. Failed executing DbCommand (3ms) [Parameters=[], CommandType='Text', CommandTimeout='30'] INSERT INTO "__EFMigrationsHistory" ("MigrationId", "ProductVersion") Microsoft.Data.Sqlite.SqliteException (0x80004005): SQLite Error 1: 'no such table: __EFMigrationsHistory'.    at Microsoft.Data.Sqlite.SqliteException.ThrowExceptionForRC(Int32 rc, sqlite3 db)    at Microsoft.Data.Sqlite.SqliteCommand.PrepareAndEnumerateStatements(Stopwatch timer)+MoveNext()    at Microsoft.Data.Sqlite.SqliteCommand.GetStatements(Stopwatch timer)+MoveNext()    at Microsoft.Data.Sqlite.SqliteDataReader.NextResult()    at Microsoft.Data.Sqlite.Sqlit...
Read more