Blazor C#

Manish Bhatia

 What is Blazor 

Blazor is a new technology used to build front end application by replacing you responsive code from JavaScript to C# 

With the help of Blazor, all the logics that need to written in JavaScript language can be replaced with the C# code. 

there are two type of APP we can create with Blazor 

  • Blazor web assembly: Application can be run at client side and events are handled over browser/Client side. 
    • while building the application we have choice to create application with ASP.NET Core Hosted 
    • If we chose this option that means IDE will give you a project that enables API calling and if we not select that the application will provide an application that could not utilize API 
  • Blazor server App: Application is handled throw signal-r and events are handled at server side 

Folder Structure 

Pages: Contain all the view design,
Shared: Contains the Layout design, or the design/View that are repeatedly used. 
Program: Entry point of the application. 
App.razor: Root component 

Components 

  • A component is the portion of the UI that can be used in multiple page.
  • Component can be called inside other component by component name as shown below 
  • The property can be used in HTML part just by using @ symbol with property 
  • @Page is used to allow the component routing, and will be visible on the screen when same path is passed in the URL
  • We can have multiple @Page values which indicate that, the current component will be visible for both the route. 

Communication between child and parent component 

Parent can pass the data to the child as a Parameter 


When the child component is being called inside the parent component, at that time just pass the property 

And in Child component, just decorate the property with [Parameter] attribute and this is how you communicate from parent to child. 

 Routing 

  • Components routes using @page directive 
  • we can have multiple route of the same component 
  • we can pass the route parameter as shown below 

  • we can set route parameter constraints as shown below 
  • To set side menu to redirect from one component to other, blazor user NavLink to to that 


Layout 

we can specify   layout component to component by using @layout layout_name.

Binding

  • Binding is done using @bind keyword 
  • @bind provide two way binding 
  • By default binding happen on onChange event 
  • we can change binding event as shown  using @bind:event="Event
  • We can also set the format of the bind as shown below 


Service in Page 

  • service can be used in the component 
  • we need to configure servcie in program.cs File as show below

     
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<weatherforecastservice&gt();
  • To make a rest call to get data from external API we need to a add HttpClient service in Program.cs file 
  • after adding the Httpclient service depandancy in program.cs file, inject the service in which you want to make a API call 


Event  callback 

  • Eventcall back is same as emitting the event from child to the parent

Cascading Parameter 

State Management 

Forms 

  • EditForm is used to create form in blazor 
  • Attribute of EditFrom are 
    • Model: that bind with the form 
    • onValidSubmit: when form is a valid roperty that it will invoke the function associated with it. 


0 Comments