Post
Ask Question

Blazor Component: Creation, Lifecycle, Nesting, & UI Integration

In this article, you will get answers to the following questions.

  • What is the Blazor Component?
  • How to work with Component?
  • What is the Life Cycle of the Blazor Component?
  • Can we call one component from another component?
  • How to create a Blazor Component?
  • Where to write C# code in the component?

Write code to display Good Morning, Good Afternoon, and Good Evening as per the current time.

Before proceeding to this article, kindly refer to my previous articles.

What is the Blazor Component?

A Blazor Component is a building block of Blazor apps. Component used for GUI and event codes. You can write GUI code (HTML, CSS) and C# code into components or keep them separate. You can reuse the component as like user control (Asp.Net WebForm)) and partial view (Asp.Net MVC).

Blazor components create a RAZOR extension file. If your component name is DateCalculator, the component file name will be like DATECALCULATOR.RAZOR. The Blazor Component class is inherited from the ComponentBase class. ComponentBase class is an optional base class for components. Alternatively, components may implement IComponent directly.

A component in Blazor we can call a Razor Component, Blazor Component, or only Component. Blazor Component name should start with an uppercase letter. It’s good practice to use PascalCase.

Example

DateCalculator.razor: Correct
dateCalculator.razor: Wrong
datecalculator.razor: Wrong

Visit the following reference link

Header component

As per the above image, you can see majorly there are two major components.

  1. Header Component
  2. Footer Component

The Header Component is made of three components

  1. Logo component: UI code for log display.
  2. Navigation Component: UI code for menus.
  3. User Profile Component: UI code for user profile options.

The footer Component is made of three components

  1. Quick Link component: Important links of the portal.
  2. Social Media Component: Link to connect with the social platform.

What is the Life Cycle event of the Blazor Component?

Following is the life cycle event of the Blazor component.

  1. OnInitialized
  2. OnInitializedAsync
  3. OnParametersSet
  4. OnParamtersSetAsync
  5. OnAfterRender
  6. OnAfterRenderAsync

OnInitialized and OnInitializedAsync are called before the component is rendered.

OnParametersSet and OnParametersSetAsync are called just after OnInitialized, OnInitializedAsync, and new parameters are received from the parent.

OnAfterRender and OnAfterRenderAsync are called after the component is completely rendered.

Can we call one component from another component?

Yes, surely we can call any component from any component. Components can be nested in one another, and they can also be reused within the project or even across multiple projects.

How to create a Blazor Component?

Switch to Solution Explorer and Right-click on the PAGES folder.

Select the ADD RAZOR COMPONENT option.

As Per the following image.

Add

New item

Above image Razor Component created with the name “DateCalculator.razor”.

DateCalculator.razor

DateCalculator.Razor was created with the following default code.

<h3>DateCalculator</h3>
@code {
}

Where to write C# code in the component?

Component

Line number 3 in the above image, Inside @Code {}, you can write C# code.

Write code to display Good Morning, Good Afternoon, and Good Evening as per current time

Double-click on the DateCalculator.razor component, which is located inside the PAGES folder.

@page "/datecalc"

<h3>Welcome User</h3>

Current Date: @DateTime.Now.ToLongDateString()
<br />
<br />
Current Time: @DateTime.Now.ToLongTimeString()
<br />
<br />
<label>@Msg</label>
<br />
<br />
<button>Ok</button>

@code {
    int hours = DateTime.Now.Hour;
    string Msg = string.Empty;

    protected override void OnInitialized()
    {
        if (hours < 12)
        {
            Msg = "Good Morning";
        }

        if (hours > 12 && hours < 18)
        {
            Msg = "Good Afternoon";
        }

        if (hours > 18)
        {
            Msg = "Good Evening";
        }

        base.OnInitialized();
    }
}

Run the application by pressing F5 and on the browser address.

Type: http://localhost(portno)/decals

Output

Output

Thank you for reading. In the next article, you will learn about Form Controls.


Similar Articles