Application Bootstrap And Life Cycle hooks in Blazor

Steps to add new field with Code first approach in .Net Core2

With the launch of the Blazor, we Know how web assembly and C# can be a game changer and will help the C# to run on Browser so moving  next let’s see how we can setup Blazor in your machine and how we can get started with our first application with Blazor


  1. Environment setup
  2. Application Bootstrap Process
  3. Application Life Cycle Methods
  4. Conclusion

1.Environment Setup

While writing this article the new experimental blazor framework 0.0.4 is been announced by microsoft To get this version there are few prerequisites as below

1. Install .Net Core SDK 2.1 from here

  1. Install VS 2017 Preview (15.7) with WebWork Bench selected while installation

3. The most important step is to install the language service extension for blazor from here

To verify the installation, Open the Visual Studio and let’s create one Core web Application we will be able to see the following templatesBlazor Mangesh_1

Getting Started and Building First Blazor App

We are done with the setting up part. Now, it’s time to create our first demo app with Blazor.

  1. Create a new project with ASP.NET Core web Application and name it as BlazorDemoApp1. Click OK




The next step is to select the environment and use the proper template for the same.

  1. We need to make sure that .NET Core, as well as ASP.NET Core 2.0 or 2.1, are selected for the same.
  2. The next step is to select the template for the Blazor application. For our demo, we will select the template called Blazor and press OK.


Application Bootstrap

Where does our application bootstrap? Obviously, it is the Main Method in the Program.cs.

Then, how does it look? Well, let’s look at the code snippet below.
public class Program {
static void Main(string[] args) {
var serviceProvider = new BrowserServiceProvider(services => {
// Add any custom services here
new BrowserRenderer(serviceProvider).AddComponent  ("app");

This is the place where we decide which component will be loaded in this. The DOM element selector argument will decide whether we want to load the Root Component or not. In our case, the app element in index.html will be used for the rendering.

The main method can be used to add various services which will be used for the DI in the later part of the app.

Let’s look at the index.html snippet.


<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width”>
<base href=”/” />
<link href=”css/bootstrap/bootstrap.min.css” rel=”stylesheet” />
<link href=”css/site.css” rel=”stylesheet” /> </head>

<!–Root Component Loads here–>



Here the Blazor-boot is used as the script type now question is why It is used here in the index.html

so when we build the application at that time the blazor-boot is replaced with the bootstrapping script which handles the .Net Runtime and executes entry point of the application, following screenshot can tell us what is loaded at the place of the blazor-boot


Here, we can see that all the things needed to run the .NET Runtime are loaded with this and our app gets bootstrapped.


Application Lifecycle methods

All right! 🙂  We have set up our project now. Let us dig out the details of the application lifecycle method of Blazor App. There are around 7 lifecycle methods available in the Blazor app. Blazor provides Synchronous as well as asynchronous lifecycle methods. Let’s see one by one how they can be differentiated

There are mainly 7 lifecycle methods –

  1. OnInit ():
    This is the synchronous version of the application method which gets executed when the component gets initialized. This gets executed when the component is completely loaded. We can use this method to load data from services as, after this method, each control in the UI is loaded. This is executed when the component is ready and when it has received the values from the parent in the render tree.
  1. OnInitAsync ():
    This is the asynchronous version of the application method which gets executed when the component is initialized. This is called when the component is completely initialized. This can be used to call the data service or to load the data from the service. This is executed when the component is ready and when it has received the values from the parent in the render tree.
  2. OnParametersSet ():
    This is the synchronous way of setting the parameter when the component receives the parameter from its parent component. This is called when the Initialization of the component occurs.
  3. OnParametersSetAsync ():
    This is an asynchronous way of setting the parameter when the component receives the parameter from the parent component. This gets called when the initialization of the component occurs.
  4. ShouldRender ():
    We use this method to suppress the refreshing of the UI. If this method returns true, then the UI is refreshed otherwise changes are not sent to the UI. One thing about ShouldRender () – it always does the initial rendering despite its return value.
  5. OnAfterRender ():
    This is called each time when the component is done with the rendering. All the references to the component are populated. We can make use of this method to perform the additional steps like initializing the other components and all.
  6. OnAfterRenderAsync ():
    This method is an asynchronous version of the  OnAfrerRender() which gets called when the rendering of all the references to the component is populated. We can use this method to do additional initializing of the third party component.

Complete code demonstrating the Application lifecycle is as follows,

@page "/"</pre>
<h1> Application Life cycle Methods..</h1>
@foreach(var item in EventType) {


@functions {
List  EventType = new List  ();
protected override void OnInit() {
EventType.Add(" 1 OnInit");
protected override async Task OnInitAsync() {
EventType.Add("2 OnInit Async");
await Task.Delay(1000);
protected override void OnParametersSet() {
EventType.Add("3 On Parameter set ");
protected override async Task OnParametersSetAsync() {
EventType.Add(" 4 OnParametersSet Async Started");
await Task.Delay(1000);
protected override bool ShouldRender() {
EventType.Add(" 5 Should render called");
return true;
protected override void OnAfterRender() {
EventType.Add(" 6 OnAfterRenderStarted");
protected override async Task OnAfterRenderAsync() {
EventType.Add(" 7 OnAfterRender Async Started");
await Task.Delay(1000);


Running the above code, we will get the output like below.


We can see the steps and ways these are being called one by one and the sequence of the application methods.


Blazor is a technology which uses web assembly for running an application. It uses ASP.NET Core to build the application and has many similarities to the current UI Framework languages, like React or Angular.

For a C# developer, it is a great platform to build an application, especially, a single page application. Although it is not available for the production system yet, an exciting time is ahead with this for sure.






3 thoughts on “Application Bootstrap And Life Cycle hooks in Blazor

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s