Post
Ask Question

Blazor Application Bootstrap And Life Cycle Methods

We have seen in the last article how web assembly can be a game changer and will help the C# to run on the browser. Now, let’s see how we can set up Blazor on our machine and get started with our first Blazor application.

Agenda

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

Environment Set up

While writing this article, the new experimental Blazor Framework 0.0.4 has been used. To get this version, there are a few prerequisites as mentioned below.

  1. Install .NET Core SDK 2.1 from here.
  2. Install VS 2017 Preview (15.7) with Web Workbench selected while installation.
  3. The most important step is to install the language service extension for Blazor from here.

To verify the installation, open Visual Studio and let's create one ASP.NET Core web application. We will be able to see the following templates.

Blazor

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.

    Blazor

  2. 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.

 Blazor

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.

  1. public class Program {  
  2.     static void Main(string[] args) {  
  3.         var serviceProvider = new BrowserServiceProvider(services => {  
  4.             // Add any custom services here  
  5.         });  
  6.         new BrowserRenderer(serviceProvider).AddComponent < App > ("app");  
  7.     }  
  8. } 
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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="viewport" content="width=device-width">  
  7.     <title>WebApplication2</title>  
  8.     <base href="/" />  
  9.     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />  
  10.     <link href="css/site.css" rel="stylesheet" /> </head>  
  11.   
  12. <body>  
  13.     <app>Loading...</app>  
  14.     <!--Root Component Loads here-->  
  15.     <script type="blazor-boot"></script>  
  16. </body>  
  17.   
  18. </html>  

Here, Blazor-boot is used as the script type. Now, the question is why it is used here in the index.html file.

When we build the application, the Blazor-boot script is replaced with the bootstrapping script which handles the .NET Runtime and executes the entry point of the application. This screenshot can tell us what is loaded in place of Blazor-boot.

Blazor

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

Blazor
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 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,

  1. @page "/" < h1 > Application Life cycle Methods.. < /h1>  
  2. @foreach(var item in EventType) {  
  3.     @item < hr / >  
  4. }  
  5. @functions {  
  6.     List < string > EventType = new List < string > ();  
  7.     protected override void OnInit() {  
  8.         EventType.Add(" 1 OnInit");  
  9.     }  
  10.     protected override async Task OnInitAsync() {  
  11.         EventType.Add("2 OnInit Async");  
  12.         await Task.Delay(1000);  
  13.     }  
  14.     protected override void OnParametersSet() {  
  15.         EventType.Add("3 On Parameter set ");  
  16.     }  
  17.     protected override async Task OnParametersSetAsync() {  
  18.         EventType.Add(" 4 OnParametersSet Async Started");  
  19.         await Task.Delay(1000);  
  20.     }  
  21.     protected override bool ShouldRender() {  
  22.         EventType.Add(" 5 Should render called");  
  23.         return true;  
  24.     }  
  25.     protected override void OnAfterRender() {  
  26.         EventType.Add(" 6 OnAfterRenderStarted");  
  27.     }  
  28.     protected override async Task OnAfterRenderAsync() {  
  29.         EventType.Add(" 7 OnAfterRender Async Started");  
  30.         await Task.Delay(1000);  
  31.     }  
  32. }  

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

Blazor

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

Conclusion

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 with 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.

References

  • https://learn-blazor.com/getting-started/what-is-blazor/
  • https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-net-web-apps-in-the-browser-with-blazor/


Similar Articles