Top Microsoft Blazor Technical Questions

• What is Blazor?

             Blazor is a open source .Net based UI framework used to create Single Page Applications  (SPA) using C# language (instead of javascript). It runs in most of the modern browsers as it is build on open web standards like Webassembly.

• What are the two hosting model provided by Blazor?

• Blazor Web Assembly
• Blazor Server

• What are the advantages of Blazor?

• The UI code can be developed using feature rich C# instead of javascript which makes the development easier.
• The Server side C# code (like Model classes, Business Rules etc) can be reused at the client side.
• As it is .Net based framework, the code developed using Blazor can leverage all the  existing .Net libraries/ API.
• All modern browsers including mobile browsers, runs Blazor
• Runs in a secured sandbox environment within the Browser.
• It is as fast as running native applications of the browser's operating system.
• Blazor is supported by good development tools like Visual Studio and Visual Studio Code across different platforms - Windows, Linux and Mac.
• There is no learning curve for Blazor if the developer is already a .Net developer.

• What are the browsers that supports Blazor?

           The Blazor is supported by Microsoft Edge, Google Chrome, Mozila Firefox and Safari browsers at present.

         

• What is Blazor Component?

                 A Blazor component can be a page, dialog or form in Blazor applications.

         A Blazor component consists of UI rendered through HTML markup and the processing logic to bind data within UI and the processing logic to responds to UI events.

              The Blazor applications are built using the components which can be nested and reused within and across the projects.

• What are the two ways of separating code from HTML in Blazor?

            1. Create a code behind file with a partial class in the same name of razor file.
            2. Create a code behind file with a base class in the same name of razor file and suffixed with 'Base' and inherits from the class, 'ComponentBase' 


Example for the approach - 1:

DateToday.razor

@page "/datetoday" <h1>Today's Date</h1> <button class="btn btn-primary" @onclick="GetDateToday">Get Date</button>

<p>Today's Date is: @currentDate</p>


DateToday.razor.cs

namespace BlazorApp.Pages { public partial class DateToday { private string currentDate; void GetDateToday() {

currentDate = DateTime.Now.ToString("M/d/yyyy");

} } }


Example for the approach - 2:

DateToday.razor

@page "/datetoday"
@inherits DateTodayBase <h1>Today's Date</h1> <button class="btn btn-primary" @onclick="GetDateToday">Get Date</button>

<p>Today's Date is: @currentDate</p>


DateTodayBase.cs

namespace BlazorApp.Pages { public partial class DateTodayBase : ComponentBase { private string currentDate; void GetDateToday() {
currentDate = DateTime.Now.ToString("M/d/yyyy");

} } }

• How Blazor WebAssembly is configured?

             The WebAssembly can be configured using appsettings.json and the values in appsettings.json can be read  in the code using IConfiguration interface.
            For example:

wwwroot/appsettings.json

{ "ServerLocation": "Chennai, India" }

Blazor Component:

@page "/" @using Microsoft.Extensions.Configuration @inject IConfiguration Configuration <h1>Server Information</h1> <p>The Web Server is hosted at @Configuration["ServerLocation"]</p>

• Optional route parameters are supported in routes?

           The optional route parameters are not supported in routes. Instead, more than one @page directives are allowed, for example, One with parameter and the other one without parameter as below:

@page "/ServerStatus" @page "/ServerStatus/{status}" <h1>Web Server is @Status!</h1> @code { [Parameter] public string Status { get; set; } protected override void OnInitialized() { Status = Status ?? "up and running"; } }

• How to specify the layout for a component?

             @layout directive is used to specify the layout for a component.

For example:

         @layout AppLayout

@page "/dashboard" <h1>Dashboard </h1>

• How to specify the layout for all components in a common location?

The layout for all the components can be specified at the application level through the router component App.razor.

For example, the layout - AppLayout.razor can be specified as the default layout as below in App.razor:

<Router AppAssembly="@typeof(Startup).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(AppLayout)" /> </Found> </Router>

The layout for all the components can be specified at the folder (and subfolders) level through _Imports.razor file. The layout specified in _Imports.razor overrides the layout that is specified in Apprazor.

The layout that is specified at the component level through @layout directive overrides the layout specified in _Imports.razor and App.razor

• What is the purpose of _Imports.razor file?

• Directives like @using and @layout shared by all the components of a folder  (and subfolders) can be specified in a common file, _Imports.razor

For example:

@using Microsoft.AspNetCore.Components @using App.Business.Services
@layout BlueTheme

The above lines in the _Imports.razor will make all other razor files in the folder (and subfolders) to have the same directives at the top so that these directives need not be added in every file.

• How Scoped registered DI services behaves in WebAssembly?

               A service can be configured as Transient or Singleton with DI in WebAssembly applications.

           The Scoped life-time service is applicable with Blazor Server applications but it is not applicable with WebAssembly applications. In case if a service is configured as Scoped service in WebAssembly applications, it behaves likes a Singleton Services

• What is the purpose of @inject directive and InjectAttribute?

                 The @inject directive and [Inject] attribute are used to inject instance of types registered with DI container.
                 The @inject directive should be used in razor files whereas [Inject] attribute is used in component class.
                 The @inject directive takes two parameters, The type of the service and the property that receives the injected instance of the type.  For example:

          @page "/products"
@using Product.BizServices @inject IProductService ProductService

In the above example, Blazor creates a new property called, 'ProductService' of type

IProductService and injects the instance of IProductService registered in the DI.

The [Inject] attribute annotates a property in component base class so that the property receives
an instance based on the type registration in DI:

using Microsoft.AspNetCore.Components; public class ComponentBase : IComponent { [Inject] protected IProductService ProductService { get; set; } ... }
                

• How to make the services that are registered as Scoped services in DI to live only as long as the component's life time.

              As the scoped services are treated as Singleton in WebAssembly, the service instance lives longer in the application. Similarly, the scoped services lives longer than expected in Blazor Server apps as the request scope lasts for the duration of the client connection.

             The scoped services can live as long as the component by performing the following steps:

•         Make the component to inherit from OwningComponentBase class as below:

@inherits OwningComponentBase

• Get the instance of scoped services using the GetRequiredService of ScopedServices

property. The ScopedServices is the property inherited from OwningComponentBase class

productService = ScopedServices.GetRequiredService<IProductService>();