Blazor FAQ - General

The Blazor framework includes synchronous and asynchronous lifecycle methods. You can load the full page asynchronously using the below methods,

• OnInitializedAsync – It is invoked when the component is ready to start and has received its initial parameters from its parent in the render tree.

protected override async Task OnInitializedAsync()
{
await ...
}

• OnParametersSetAsync – It is invoked when the component is initialized and has received its first set of parameters from its parent component.

protected override async Task OnParametersSetAsync()
{
    await ...
}

• OnAfterRenderAsync – It is invoked after a component has finished rendering. The firstRender is set to true at first time when the component instance is rendered.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

A Progressive Web Application is a Single Page Application that uses modern browser APIs, and  performs like a desktop app. It can work offline and load instantly, and independent of network speed.

Find the steps for create PWA with blazor app:

• Create a project from the PWA template

• Run the application, after creating the app
• After it launched in the browser, there we have the option for installing the app (PWA)

• Once installed, the app appears in its own window without an address bar.

Please refer to the documentation link for more details: https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual-studio#create-a-project-from-the-pwa-template

From .NET 5 Preview 7, Blazor components trim insignificant whitespaces to achieve better performance. This has been implemented as a result of the finding that 40% of the rendering time is consumed by whitespace nodes. If whitespace nodes removal causes unexpected behavior, you can simply enable it by using the @preservewhitespace directive.

@using System.Linq

@preservewhitespace true
 
<ul>
    @foreach (var item in forecasts)
    {
        <li>
            Temperature: @item.TemperatureC
        </li>
    }
</ul>
 
@code {
    private WeatherForecast[] forecasts;
 
    protected override void OnInitialized()
    {
        forecasts = Enumerable.Range(1, 10).Select(x => new WeatherForecast()
        {
            TemperatureC = x
        }).ToArray();
    }
 
    public class WeatherForecast
    {

        public int TemperatureC { get; set; }
 
    }
}

View Sample in GitHub 

You can use the IHttpContextAccessor.HttpContext.Response.HasStarted property to check whether the application is pre-rendering or not.  HasStarted specifies that the response header has been sent to the client. If HasStarted is set to false, it means that the application is still pre-rendering and client connection is not yet established.

Refer to the following code sample.

@using Microsoft.AspNetCore.Http;
 
<button @onclick="@onClick"> Click </button>
 
@code {
    [Inject]
    protected IHttpContextAccessor httpContextAccessor { get; set; }
 
    private void onClick()
    {
        var isPreRendering = !this.httpContextAccessor.HttpContext.Response.HasStarted;
    }
}

The HttpContextAccessor service should be registered by calling the AddHttpContextAccessor method in the Startup.cs.

public class Startup
{
    . . . . .
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddHttpContextAccessor();
    }
    . . . . . 
}

Configurations loaded by the Blazor WebAssembly can be accessed by injecting IConfiguration services. Using IConfiguration, the values from wwwroot/appsettings.json and wwwroot/appsettings.{ENVIRONMENT}.json files can be accessed.

wwwroot/appsettings.json

{
  "message":  "Blazor is awesome."   
}

Index.razor

@inject Microsoft.Extensions.Configuration.IConfiguration config
 
<span>@config["message"]</span>

More information about configuration can be found here.

You can check whether the current app is Blazor server-side or web assembly using the “IJSInProcessRuntime” interface. In the following example, I have checked whether the app is a web assembly or server side on button click.

<button @onclick="@onClick"> Click </button>

@code {

    [Inject]
    protected IJSRuntime jsRuntime { get; set; }

    private void onClick()
    {
        var isWebAssembly = this.jsRuntime is IJSInProcessRuntime;
    }
}

A page is reloaded/refreshed automatically at a specified interval using “NavigationManager” in OnAfterRender() method. Here the NavigateTo(“url”, forceLoad: true) method, is used to force load the browser based on the URI.

@inject NavigationManager uriHelper;

@using System.Threading;

<h1>Hello, world!</h1>

Welcome to your new app.

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var timer = new Timer(new TimerCallback(_ =>
            {
                uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
            }), null, 2000, 2000);
        }
    }
}

In Blazor, “StateHasChanged” is used to re-render a page. When changes are detected in components, a page is refreshed. In the following example, a button click increments the count on time interval automatically.

@using System.Threading;

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    private int currentCount = 0;

    private void IncrementCount()
    {
        var timer = new Timer(new TimerCallback(_ =>
        {
            currentCount++;
            InvokeAsync(() =>
            {
                StateHasChanged();
            });
        }), null, 1000, 1000);
    }
}

The HTML “progress” element is used to show the progress. In the following code example, start and stop of progress can be executed on button click.

<progress value="@progressValue" max="100" style="width: 100%">@(progressValue.ToString() + " %")</progress>

<button @onclick="@startProgress">Start</button>

@code {

    private int progressValue { get; set; }

    private void startProgress()
    {
            for (int i = 0; i < 1000; i++)
            {
                this.progressValue = i;
            }
    }
 
}

In a Blazor server-side application, you can enable CircuitOptions detailed errors by using the AddServerSideBlazor().AddCircuitOptions() method. This option allows the detailed error information to be displayed in the browser, making it easier to diagnose and fix issues.

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor().AddCircuitOptions(e=> {
        e.DetailedErrors = true;
    });
}

You can show the confirmation dialog box before deleting a row in a table. The following code example shows the confirmation dialog box on delete button click.

<button @onclick="@onDelete">Delete</button>

@if (Show)
{
    <div class="modal" tabindex="-1" role="dialog" style="display: @(Show ? "block" : "none")">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Dialog</h5>
                </div>
                <div class="modal-body">
                    <p>You have unsaved changes in this page. Do you still want to leave this page? </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @onclick="@(()=> this.Show=false)">Ok</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="@(()=> this.Show=false)">Close</button>
                </div>
            </div>
        </div>
    </div>
}
@code {

    public bool Show { get; set; } = false;

    private void onDelete()
    {
        this.Show = true;
    }
}

View Sample in GitHub 

Yes, Blazor supports E2E testing with the help of the Steve’s prototype library. This library can be included in your testing projects for E2E testing. Its compatible with traditional unit testing frameworks such as XUnit and NUnit and is a straightforward and clean way of writing tests. For more information, please refer to here. 

Raw HTML can be rendered in Blazor by using the MarkupString. You can set the raw HTML as a string to any parameter and cast it in a markup string.

@page "/"

@((MarkupString)myMarkup)

@code 
{
	string myMarkup = "<p class='markup'>This is a <em>markup string</em>.</p><button class='btn btn-primary'>Button</button>";
}

• Razor is a templating engine that combines C# with HTML to build dynamic web content. 
• Blazor is a component-based, single-page app framework for building client-side web apps using .NET that works well with all modern browsers via WebAssembly  for client-side Blazor. Server-side Blazor ASP.NET Core app runs on server and makes use of SignalR connection to communicate with the client (browser). It works with all modern browsers. In other words, Blazor is a hosting model for Razor components. 

For detailed information, refer to these links:

• https://www.hanselman.com/blog/WhatIsBlazorAndWhatIsRazorComponents.aspx 
• https://stackoverflow.com/a/55087046/1954766 
• https://www.syncfusion.com/blogs/post/blazor-vs-razor.aspx  

Blazor is a component-based, single-page web app framework build using .NET.  It works well with all modern browsers via WebAssembly for client-side Blazor. Server-side Blazor ASP.NET Core app runs on server and makes use of SignalR connection to communicate with the client (browser).

We can perform asynchronous calls in a Blazor application using async and await keywords for calling any asynchronous Task or performing any operation.

[Index.razor]

@page "/" 
<button @onclick="Compare">Compare</button> 
<br /> 
<p>@content</p> 

@code { 
    public string content = "Some Text"; 
    public async void  Compare() 
    { 
        await Task.Run(() => TimeOutMethod()); 
        content = ""; 
        await Task.CompletedTask;      
    } 
    void TimeOutMethod() => Task.Delay(3000).Wait(); 
} 

You can remove the About section from a Blazor application in the MainLayout.razor page.
Remove the following code from the ~/Shared/MainLayout.razor page

<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>

Yes, Blazor supports E2E testing with the help of the Steve’s prototype library. This library can be included in your testing projects for E2E testing. Its compatible with traditional unit testing frameworks such as XUnit and NUnit and is a straightforward and clean way of writing tests. For more information, please refer to here. 

To bind properties to a list in Blazor, you can use the @foreach loop and the @bind directive. Here’s an example:

@page "/" 
<h3>List Binding Example</h3> 
<ul> 
    @foreach (var item in itemList) 
    { 
        <li> 
            <input type="text" @bind="@item.Name" /> 
        </li> 
    } 
</ul>   

<button @onclick="AddNewItem">Add Item</button>  

@code { 
    List<ItemModel> itemList = new List<ItemModel>(); 
    void AddNewItem () 
    { 
        itemList.Add(new ItemModel()); 
    }  

    public class ItemModel 
    { 
        public string? Name { get; set; } 
    } 
} 

View Sample in GitHub 

The development tools available for Blazor are the following:

1. Visual Studio—IDE
2. Visual Studio Code—IDE
3. C#—programming language
4. .NET Core—development platform

There are also several third-party commercial vendors, like Syncfusion, and open-source libraries that are available to make the Blazor app development easier.                     

The StateHasChanged is a method in ComponentBase that notifies state changes to a component. When called, it rerenders the component.For more information, check this link.

Blazor notifies the UI changes automatically whenever the bound property is changed in a button click, input text, dropdown, etc.Blazor triggers the StateHasChanged() method to notify the change. However, there are some exceptional cases where the user has to manually call the StateHasChanged() method to notify that the UI has been updated. 

By calling the StateHasChanged(), Blazor can manually be notified when to rerender its UI. This method will tell Blazor when to refresh the UI.

@using System.Threading;

<h1>@Count</h1>

<button @onclick=@StartCountdown>Start Timer</button>

@functions {
    private int Count { get; set; } = 10;

    void StartCountdown()
    {
        var timer = new Timer(new TimerCallback(_ =>
        {
            if (Count > 0)
            {
                Count--;

                // Note that the following line is necessary because otherwise
                // Blazor would not recognize the state change and refresh the UI
                InvokeAsync(() =>
                {
                    StateHasChanged();
                });
            }
        }), null, 1000, 1000);
    }
}

In the above example, when the button is clicked, the UI will refresh for every count down of the timer since StateHasChanged method has been called to refresh the UI.

When StateHasChanged is called, it runs change detection on the current component and its descendants. Blazor is clever enough to rerender the components that have changes.

<h3>StateHasChanged</h3>

<button class="btn btn-primary" @onclick="Generate">Generate List</button>
<button class="btn btn-primary" @onclick="ChangeOneRow">Change State</button>

@if (list != null)
{
       @foreach (var item in list)
       {
               <li>@item</li>
       }
}

@code {
    List<int> list;
    const int cMaxNumbers = 10;

    protected void Generate()
    {
        list = new List<int>(cMaxNumbers);
        for (int i = 0; i < cMaxNumbers; i++)
        {
            list.Add(i);
        }
    }

    protected void ChangeOneRow()
    {
        list[0] = 123456;
        StateHasChanged();
    }
}

In the above example, only the first list item will be re-rendered.

The StateHasChanged method is called whenever a bound property is changed or a UI event triggered for an instance. This notifies the Blazor that the component should rerender it.

For example, when a button is clicked in the index page, the index component rerenders (no need to call StateHasChanged) because the button’s parent is an index; but when it has a child component it has be notified to render as the parent has changed.

No, Blazor WebAssembly (client-side Blazor) does not support any version of Internet Explorer due to the lack of WebAssembly support in IE. However, server-side Blazor can be made compatible with IE 11 by using additional polyfills to bridge the gaps in browser support.

JSON (JavaScript Object Notation) is a lightweight data-interchange format and a text format that is language independent. In Blazor, the JsonSerializer class, found in the System.Text.Json namespace, assists with serializing and deserializing JSON data.

[index.razor]

@page "/" 

@using System.Text.Json 
<p>Sample demonstration of serializing and deserializing JSON in a Blazor application.</p> 
<button @onclick="SerializeMethod">Serialize </button> 
<button @onclick="DeserializeMethod">Deserialize</button> 

@code {
    public class User
    { 
        public int ID { get; set; } 
        public string? Name { get; set; } 
        public string? Address { get; set; } 
    } 
    User user = new User() { ID = 1, Name = "Manas", Address = "India" }; 
    public string? serializedString { get; set; } 
    void SerializeMethod () 
    { 
        //for serialization 
        serializedString = System.Text.Json.JsonSerializer.Serialize(user); 

    } 
    void DeserializeMethod () 
    { 
        //for deserialization 
        User userCopy = System.Text.Json.JsonSerializer.Deserialize<User>(serializedString); 
    } 
} 

In the provided sample, JsonSerialize.Serialize(object) is used to serialize the user object of the User class into a string. Then, JsonSerialize.Deserialize<ClassName>(JsonObject) is used to deserialize the serializedString string into a new instance of the User class named userCopy. 

Only server-side Blazor is supported by Microsoft’s Internet Explorer IE 11 when additional polyfills are used. Client-side Blazor is not supported by Internet Explorer due to incompatibility of WebAssembly. You need to add the following polyfills in the _Host.cshtml/_Layout.cshtml page to support Internet Explorer.

[_Host.cshtml/_Layout.cshtml]

//polyfills to be added for Internet Explorer 

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.5/core.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch"></script> 

To install Blazor project templates, update the .NET Core SDK to the latest version. Blazor server-side template is available by default when you create a new Blazor project in Visual Studio. To get the Blazor WebAssembly project template,  install them via the following command line.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Check this link for more information.

Microsoft Blazor official tutorial documentation can be found in the following link: https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1

You can develop a native mobile app in Blazor using Experimental Mobile Blazor Bindings. This allows developers to develop mobile applications in C# and .NET for iOS and Android. It uses Razor syntax to define UI components and the underlying UI components are based on Xamarin.Forms native UI Components. Currently, it is in an experimental mode. 
Check this link to understand the concept: Mobile Blazor Bindings

Blazor server-side supports almost all modern browsers out of the box except Microsoft’s Internet Explorer (IE 11), which needs Polyfills to be supported.

[_Layout.cshtml/_Host.cshtml]

//polyfills to be added for IE 

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.5/core.min.js"></script> 
<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch"></script> 

Blazor WebAssembly (client-side) supports all the modern browsers except the Internet Explorer.
Check this link for more information.

Blazor Server

In server code, configure SignalR in the Startup.cs class file as follows.

public void ConfigureServices(IServiceCollection services)
{
    ... ... ... ...
    services.AddSignalR();
    ... ... ... ...

}


public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ... ... ... ...
    app.UseSignalR(routes => routes.MapHub<Blazor.NetCore.Server.SignalRHub.SignalRHub>("/signalRHub"));
    ... ... ... ...
}

And then create a SignalR hub class as follows.

    public class SignalRHub : Hub
    {
        public override Task OnConnectedAsync()
        {
            Clients.All.SendAsync("ReceiveMessage", "system", $"{Context.ConnectionId} joined the conversation");
            return base.OnConnectedAsync();
        }
        public void SendMessage(string name, string message)
        {
            Clients.All.SendAsync("ReceiveMessage", name, message);
        }

        public override Task OnDisconnectedAsync(System.Exception exception)
        {
            Clients.All.SendAsync("ReceiveMessage", "system", $"{Context.ConnectionId} left the conversation");
            return base.OnDisconnectedAsync(exception);
        }
    }

Blazor client

Create a Blazor app and add the package Blazor.Extensions.SignalR to the client. Then write the code to connect the Hub and event handler as follows.

@page "/signalr"
@using Blazor.Extensions
<div class="container">
    <input type="text" id="user" class="form-control" @bind="@userName" placeholder="User Name" /><br />
    <input type="text" id="message" class="form-control" @bind="@Message" placeholder="Message" /> <br />
    <input type="button" id="sendMessage" value="Send" class="btn btn-primary" @onclick="@SendMessage" />
    <ul id="discussion">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
</div>

@code {
    HubConnection connection;
    string userName = "";
    string Message = "";
    IList<string> messages = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        connection = new HubConnectionBuilder().WithUrl("/signalRHub").Build();
        connection.On<string, string>("receiveMessage", this.ReceiveMessage);
        await connection.StartAsync();
    }

    Task ReceiveMessage(string name, string message)
    {
        messages.Add(name + " : " + message);
        StateHasChanged();
        return Task.CompletedTask;
    }

    async Task SendMessage()
    {
        await connection.InvokeAsync("SendMessage", userName, Message);
        Message = "";
    }
}

1. OnInitializedAsync method, connect to the Web API.
2. ReceiveMessage method, used in the SignalRHub class.
3. ReceiveMessage method, concatenate the name and message parameters, and append them to a list.

The StateHasChanged method will update the bindings in the HTML. The SendMessage method will invoke the Send method in the hub with name and message parameters.

Reference link: https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio#add-the-signalr-client-library

Blazor updates the UI every time a parameter updates. Invoking an external StateHasChanged() might be required when updating parameters as a result of any async operation.

[Counter.razor] 

@page "/counter" 
<PageTitle>Counter</PageTitle> 
<h1>Counter</h1> 
<p role="status">Current count: @currentCount</p> 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 

@code { 
    [Parameter] 
    public int currentCount { get; set; } = 0; 
    private async Task IncrementCount () 
    { 
        currentCount++; 
        // Call StateHasChanged to trigger a re-render of the page 
        await InvokeAsync(StateHasChanged); 
    } 
} 

StateHasChanged tells Blazor to update the UI when it is called. 
https://stackoverflow.com/questions/55809117/blazor-page-not-rerendering-after-parameter-updated

Solution 1: 
Auto-rebuild functionality is now available for Blazor Projects in Visual Studio. To utilize this feature, run the project using the Ctrl + F5 shortcut (without the debugger) instead of F5 and on IIS Express. Whenever you modify and save .cs and .razor files within the solution, they will be automatically rebuilt, and the application will restart. This allows you to view the changes by simply refreshing the browser, eliminating the need for manual rebuilding and restarting the application. 

Solution 2: 

you can use the following command in the command prompt. 

Also, you must include the following file types in the .csproj file for which files you want to watch. 

<ItemGroup> 

    <Watch Include="..\**\*.razor" /> 

    <Watch Include="..\**\*.scss" /> 

    <Watch Include="..\**\*.cs" /> 

</ItemGroup> 

Refer to this Link for more information. 

To render raw HTML in Blazor, wrap the HTML content using the MarkupString type. This allows the HTML or SVG to be rendered as part of the DOM. 

 @page "/"
  
  
 @((MarkupString)myMarkup)
  
 @code {
     private string myMarkup =
         "<p class='markup'>This is a <em>markup string</em>.</p>";
 } 

Refer to the Blazor documentation for more information. 

Quoting Microsoft, “using .NET for client-side web development offers the following advantages:

• Write code in C# instead of JavaScript.
• Leverage the existing .NET ecosystem of .NET libraries.
• Share app logic across the 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.”

Refer to this Blazor link for more information.