Blazor Interview Questions

Here is a list of top Blazor interview questions and answers. If you are going for a Blazor interview, you will find most frequently asked Blazor interview questions and their answers.

Question 1. What is Blazor?

 

Blazor is a free, open-source, cross-platform Web framework that allows developers to build modern, scalable, and cross-platform Web applications using C# and .NET. Blazor developed by Microsoft and the open-source community is initially designed to keep in mind C# and .NET developers who want to build web client applications using C# language. Blazor is modern, fast, and rapidly evolving.

 

Most web client applications are written using JavaScript where code mostly runs in the browser. Blazor framework allows developers to create rich interactive UIs using C# instead of JavaScript.

 

Blazor supports both client-side and server-side coding. Both server-side and client-side app logic is written in .NET.

 

Even though the code is written in .NET and C#, Blazor renders the UI as HTML and CSS for wide browser support, including mobile browsers.

 

Here is a simple example of Blazor code that shows how HTML and C# are in the same file and how a function can be called from HTML code.

 

 

 

Blazor integrates with modern hosting platforms, such as Docker.

 

Want to learn more about Blazor, start here: Introduction to Blazor with .NET Core

 

Question 2. Why use Blazor?

 

Blazor is developed for developers who are not comfortable with JavaScript and mostly have C# and .NET backgrounds. Blazor offers the following advantages, 

• Write code in C# instead of JavaScript.
• Leverage the existing .NET ecosystem of .NET libraries.
• Share app logic across server and client.
• Benefit from .NET's performance, reliability, and security.
• Stay productive with Visual Studio on Windows, Linux, and macOS.
• Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

Question 3. What types of apps we can build using Blazor?

 

Blazor supports two types of apps, Blazor Sever app, and Blazor WebAssembly App.

 

 

 

A Blazor Server app runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection.

 

A Blazor WebAssembly app runs in a browser on the client-side via WebAssembly.

 

Question 4. What are the components in Blazor?

 

Component is a fundamental concept on Blazor and all Blazor apps are based on components. All UI elements in Blazor are components such as a page, dialog, or data entry form. From a code perspective, components in Blazor are C# classes built into .NET assemblies that define UI rendering logic and handle control and page events.

 

A Blazor component uses the combination of Razor, HTML, and C# code. A component is the base element of the Blazor application, i.e., every page is considered as a component in Blazor. Here is a simple client-side Blazor app that shows the default page component code. 

@page "/"
<h2>@Title</h2>
@functions {
    const string Title = "Blazor";
}

In the above code, HTML and code behind are in the same HTML file. The HTML part of the component contains Razor syntax as well as HTML tags and the code behind the section contains the actual logic. In short, in this method, we can add view markup and logic on the same page. The logic is separated by using a function block.

 

In function block, we can define all the properties that are used in view markup and the methods are bound with control as an event.

 

In Blazor, we can also write components with code-behind, where C# code is written in a separate file. Here is a detailed article on components in Blazor

 

Question 5. What are Blazor lifecycle and Blazor lifecycle methods?

 

Blazor framework lifecycle methods represent how various methods are executed when a Balzor application starts, ends, and in between. Blazor uses both synchronous and asynchronous lifecycle methods. Override lifecycle methods to perform additional operations on components during component initialization and rendering.

 

The following diagrams and the lifecycle events represent Blazor component life cycle events, DOM event processing, and render lifecycle methods and how they are executed in the lifecycle of an application.

 

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 a Task is returned, the Task is awaited and then the component is rendered. If a Task isn't returned, render the component.

1. Call OnParametersSet{Async}. If a Task is returned, the Task is awaited and then the component is rendered. If a Task isn't returned, render the component.

 

 

Document Object Model (DOM) event processing,

1. The event handler is run.
2. If a Task is returned, the Task is awaited and then the component is rendered. If a Task isn't returned, the component is rendered.

 

 

The Render lifecycle,

1. If this isn't the component's first render or ShouldRender is evaluated as false, don't perform further operations on the component.
2. Build the render tree diff (difference) and render the component.
3. Await the DOM to update.
4. Call OnAfterRender{Async}.

 

 

Question 6. What is Blazor WebAssembly?

 

Blazor WebAssembly is a single-page app (SPA) framework for building browser-based web apps with .NET. The magic that runs a C#/.NET app inside a web browser is called WebAssembly (wasm). Blazor WebAssembly is based on open web standards and works in all modern browsers without the need for any plugin or complication.

 

Blazor WebAssembly runs .NET code in the browser with WebAssembly. WebAssembly uses JS Interop to generate and interact with JavaScript in the browser.

 

Technically, WebAssembly is a low-level assembly language runtime with a compact binary format that provides a way to run the code written in different high-level languages in the browser at the same speed as native.

 

Official definition of WebAssembly

 

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

 

WebAssembly is efficient and fast, safe, open and debuggable, and part of an open web platform.

 

Efficient and fast

 

The Wasm stack machine is designed to be encoded in a size- and load-time-efficient binary format. WebAssembly aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms..

 

Safe

 

WebAssembly describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. When embedded in the web, WebAssembly will enforce the same-origin and permissions security policies of the browser.

 

Open and debuggable

 

WebAssembly is designed to be pretty-printed in a textual format for debugging, testing, experimenting, optimizing, learning, teaching, and writing programs by hand. The textual format will be used when viewing the source of Wasm modules on the web.

 

Part of the open web platform

 

WebAssembly is designed to maintain the version less, feature-tested, and backward-compatible nature of the web. WebAssembly modules will be able to call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. WebAssembly also supports non-web embeddings.

 

Question 7. What is Blazor Server?

 

Blazor server or server-side Blazor runs on a web server inside ASP.NET Core and separates business logic from the UI. The UI is developed as an ASP.NET Core app and the backend code is hosted as Razor components on the server. UI updates from the server to the client-side are handled over a SignalR connection.

 

The Blazor Server runtime handles,

 

Sending UI events from the browser to the server.

 

Applying UI updates to the rendered component that are sent back by the server.

 

The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

 

Learn more about Server-Side Blazor.

 

Question 8. What platforms does Blazor support?

 

Blazor apps can be installed and run on Windows, Linux, macOS, Cloud, and Web platforms. Blazor supports both client-side and server-side applications. Blazor server-side applications are developed using ASP.NET Core. The client-side Blazor apps run in web browsers on WebAssembly (wasm).

 

 

 

Blazor is used to develop Windows client applications, web applications, cloud-native applications, and native mobile apps.

 

Blazor WebAssembly supports the following browsers and platforms.

 

Browser	Version
Apple Safari, including iOS	Current†
Google Chrome, including Android	Current†
Microsoft Edge	Not Supported‡
Microsoft Internet Explorer	Current†
Mozilla Firefox	Current†

 

Blazor Server supports the following browsers and platforms.

 

Browser	Version
Apple Safari, including iOS	Current†
Google Chrome, including Android	Current†
Microsoft Edge	Current†
Microsoft Internet Explorer	11‡
Mozilla Firefox	Current†

 

 

Question 9. What are templated components in Blazor?

 

Blazor uses the Razor template engine that generates HTML and serves to the web browsers. We can mix HTML and C# syntax in the Razor templates and Razor engine then compiles the Razor templates to generate the HTML.

 

Blazor (version 0.6.0) supports the templated component. It is a component that accepts one or more UI templates as parameters and these parameters can be used for component rendering. It allows us to write high-level reusable components. Using templated components, we can write a generic and more reusable component.

 

We can create the templated component by using one or more component parameters of type RenderFragment or RenderFragment<T>. The RenderFragment is a part of UI which is rendered by the component. It may have parameters that are used during the rendering of the component or while the RenderFragment is invoked.

• Introduction To Templated Components In Blazor

Question 10. What is routing in Blazor?

 

A Route is a URL pattern and Routing is a pattern matching process that monitors the requests and determines what to do with each request.

 

Blazor server app uses ASP.net Core Endpoint Routing. Using MapBlazorHub extension method of endpoint routing, ASP.net Core is starting to accept the incoming connection for the Blazor component. The Blazor client app provides the client-side Routing. The router is configured in the Blazor client app in App.cshtml file.

 

Blazor Client app

<Router AppAssembly="@typeof(Program).Assembly"/>

Blazor Server app 

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
....
....
....

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

The Blazor Server app allows to set fallback route. It operates with low priority in routing matching. The fallback route is only considered when other routes are not matched. The fallback route is usually defined in _Host.cshtml component.

 

Here is a more detailed article on Routing in Blazor.

 

Question 11. What is data binding is Blazor?

 

Blazor supports the following ways of data banding.

• One-way Data Binding
• Two-way Data Binding
• Event Binding

One-way data binding is also known as an interpolation in other frameworks, such as Angular. It is very similar to Razor and also it will be quite straightforward. In one-way binding, we need to pass property or variable name along with @ i.e. @Name (here Name is either the property or variable).

@page "/databindingExample"
    <h3>One-way Data Binding</h3>

    <p>
        @currentTask
    </p>

 @functions {
    string currentTask = "Test One-way Data Binding!";
 }

Two-way data binding is achieved by using the "bind" attribute. For example,

 

Enter your name: <input type="text" bind=@Name /><br /> 

 

Event binding is in Blazor is supported by using function name along with @ i.e. @ButtonClicked (here ButtonClicked is function name).

 

Here is a detailed article on data binding in Blazor.

 

Question 12. How to deploy the Blazor app in Azure?

 

We can use Visual Studio 2019 to deploy Blazor applications to the Azure cloud. To publish the Blazor app on Azure, Right-click on the Server project of your solution and click publish. 

 

It will open the “Pick a publish target” window. Select “App Service” from the left menu. Select the “Create New” radio button and click on “Create profile”. 

 

The next window will ask you to log in to your Azure account if you are not logged in. Once the login is successful, a “Create App Service” window will open.

 

The fields of this window are prepopulated as per the configuration of your Azure account. However, you can change these values as per your requirement.

 

Here is the detailed article on the same,

• Deploying A Blazor Application On Azure

Question 13. How to deploy a Blazor app in IIS?

 

We can use Visual Studio 2019 to easily deploy a Blazor app on IIS. Here is a detailed article.

• Deploying A Blazor Application On IIS 

Question 14. What is authorization in Blazor Server

 

Authorization is a process to validate that the user has rights to access the application resource. In other words, it helps you to control user access to a resource based on roles, claims, and policies. Blazor uses ASP.NET Core authorization mechanism and it can be achieve using attributes, built-in components and by defining authorization rules.

 

The AuthorizeView is Blazor's built-in component that able to show page content based on the user's authentication state. This component also supports policy-based authorization and role-based authorization. This component is very useful when you want to show page content based on the role, policy, or authentication status of the user. It uses AuthenticationStateProvider to know the user authentication state.

 

This component provides Authorized, and NotAuthorized render fragments. The Authorized fragment renders when the user is authenticated, and NotAuthorized fragment renders when the user is unauthenticated. Both fragments accept other interactive components.

 

Blazor supports role-based, policy-based, and claim-based authorization.

 

Here is a detailed article on Blazor Authorization

• Authorization In Blazor Server App

Question 15. What is the difference between Blazor Server and Blazor WebAssembly?

 

Blazor offers two models to build applications, Blazor server, and Blazor WebAssembly. Blazor Server apps host Blazor components on the server and handle UI interactions over a real-time SignalR connection.

 

 

 

As you can see from the above image, ASP.NET Core is responsible for rendering Razor components and compile C# code on the server and the rendered UI elements are sent back to the browser using SignalR.

 

Unlike Blazor Server, the Blazor WebAssembly apps host components in the browser on the client-side using a WebAssembly runtime that is designed for .NET only. The runtime is responsible for converting .NET into browser elements. All components and their rendering process all are handled in the client-side browser.

 

 

 

As you can see from the above diagram, the DOM is generated by Blazor. All Razor components and .NET code is hosted and executed in the client browser using .NET-based WebAssembly runtime.

 

Question 16. When should I use Blazor Server vs Blazor WebAssembly?

 

Blazor server runs on the server-side and requires a web server such as IIS. You can compare Blazor server with an ASP.NET MVC application. Here are some of the use cases where you may want to choose Blazor Server over Blazor WebAssembly. 

• If you’ve an existing MVC or Razor pages app and want to continue expanding that with Blazor Server is probably a better choice for you. You don’t need to rewrite your business logic or database libraries. Your application can use MVC and Razor Pages for server-rendering and Blazor for client-side interaction.
• Blazor Server apps are good where you want your client browser to do less work. In Blazor Server, most of the work is done on the server. It suits best for where you have a reliable low-latency network connection.
• Blazor Server apps are not recommended for real-time frequent updates since server sider rending could be slower.
• Blazor Server apps require an active network connection, offline scenarios are not supported.

Question 16. When should I use Blazor WebAssembly vs Blazer Server?

 

Blazor WebAssembly is an option for C# and .NET developers who want to build client-side browser apps that run in the browser, without a need for a server. Unlike Blazor Server, a Blazor WebAssembly app does not require a server, and all code is executed in the browser. Here are some of the use cases where you may want to choose Blazor WebAssembly over Blazor Server.

• You do not have experience working with ASP.NET and server-side.
• You do not want to go through managing and deploying code on the server.
• You want to take advantage of client browsers, compute, memory, and storage.
• You want to build real-time responses and build a UI that updates frequently.
• You want to build fast static websites.
• You want to take advantage of modern technology such as progressive web apps (PWA) to implement live notifications, local browser storage, messages, and server workers.
• You want to build web apps that can completely work offline.

Question 17. Can I use both Blazor WebAssembly to build full-stack apps?

 

Yes. You can use .NET and C# to write your backend or server-side code and use Blazor WebAssembly for the front-end UI.

 

Question 18. Can I debug Blazor WebAssembly?

 

Yes. Blazor WebAssembly apps can be debugged using the browser dev tools in Chromium-based browsers (Edge/Chrome). You can also debug your app using Visual Studio and Visual Studio code by setting debug breaks and step through the code.

 

References

• https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
• https://www.c-sharpcorner.com/technologies/blazor
• https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1
• https://devblogs.microsoft.com/aspnet/blazor-server-in-net-core-3-0-scenarios-and-performance/