Blazor: For Absolute Beginners

In the ever-evolving landscape of ASP.NET Core web development, Microsoft's Blazor is making waves as a promising technology for building interactive .NET web applications. Blazor is a framework that allows us to build web applications using C# and .NET, also bringing the power of C# to the world of front-end web development. In this comprehensive tutorial, we will explore what Blazor is, its key concepts, and how to get started with building your first Blazor web app.

What is Blazor?

Blazor is free and open-source web framework developed by Microsoft. It enables us to create interactive web applications using C# and .NET instead of traditional web technologies like JavaScript. Blazor offers three hosting models: Blazor WebAssembly, Blazor Server, and Blazor Hybrid.

Blazor WebAssembly

Blazor WebAssembly is a single-page app (SPA) framework that allows you to run C# code directly in the browser to build interactive client-side web apps. This means that your web application can be entirely client-side, and the user's browser executes the C# code. It's a great choice for building progressive web applications (PWAs), single-page applications (SPA), and other scenarios where you want to minimize server interaction.

Blazor Server

Blazor Server, on the other hand, runs the C# code on the server and uses SignalR to communicate with the browser. Blazor Server offers the capability to host Razor components on the server within an ASP.NET Core application. This model is ideal for applications where real-time updates and server-side processing are essential.

Blazor Hybrid

Blazor Hybrid combines native and web technologies, utilizing Blazor within a native client app. Razor components operate natively in .NET and render web UI in an embedded Web View control, without employing WebAssembly. These hybrid apps involve technologies such as .NET MAUI for cross-platform mobile and desktop app development, WPF, and Windows Forms for rich desktop client apps on Windows, offering a wide range of development features.

Blazor Components

At the heart of Blazor development are Blazor components. These are self-contained, reusable pieces of user interface (UI) that can be composed together to build complex web applications. Components can have their logic, markup, and styles, making them highly modular and maintainable.

Creating a Simple Blazor Component:

Let's start by creating a simple Blazor component that displays a greeting message. In Blazor, components are typically defined in ".razor" files. Create a new Blazor component named "Greeting.razor" with the following code:

@page "/greeting"

<h1>Welcome to Blazor!</h1>
<p>This is a simple Blazor greeting.</p>
        

This component defines a basic HTML structure with a heading and a paragraph. In Blazor, the @page directive is used to specify the URL route for a Blazor component.

Blazor Component Lifecycle

Blazor components have a well-defined lifecycle with various methods that are invoked at different stages of their existence. Here are some key lifecycle methods:

• OnInitialized and OnInitializedAsync: Called when the component is initialized.
• OnParametersSet and OnParametersSetAsync: Invoked when component parameters are set.
• OnAfterRender and OnAfterRenderAsync: Triggered after the component has rendered.
• Dispose and DisposeAsync: These are called when the component is being destroyed.

You can override these methods to add custom logic to your components. For example, let's add a simple message to the "OnInitialized" method of our "Greeting" component:

@page "/greeting"

<h1>Welcome to Blazor!</h1>
<p>This is a simple Blazor greeting.</p>

@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("Greeting component initialized.");
    }
}
        

This will print "Greeting component initialized." to the browser's console when the component is initialized.

Blazor Cascading Parameters

Blazor Cascading parameters allow you to pass values from a parent component to its descendants. They are a powerful mechanism for sharing data and settings down the component tree without the need for explicit prop drilling.

Let's create a parent component that provides a "UserName" value to its child components using Blazor Cascading Parameters:

<!-- ParentComponent.razor -->

<CascadingValue Name="UserName" Value="@UserName">
        <ChildComponent />
</CascadingValue>

@code {
    string UserName { get; set; } = "Muneer Raza";
}
        

In this example, we've defined a "CascadingValue" component with the name "UserName" and a value of "Muneer Raza." The "ChildComponent" element is for the child component that will receive this value.

Now, let's create a child Blazor component that consumes this cascading parameter:

<!-- ChildComponent.razor -->

<p>Hey, @UserName</p>

@code {
    [CascadingParameter(Name = "UserName")]
    public string? UserName { get; set; }
}
        

Here, we use the "[CascadingParameter]" attribute to declare a property named "UserName" that will receive the value passed down from the parent component. In the markup, we simply display a greeting message using the "UserName" value. We can say that the cascaded parameter receives its cascaded value from the parent component.

Blazor Event Handling

Event handling in Blazor is similar to traditional web development, but instead of using JavaScript, we can use C# to handle events. Let's create a button that changes a message when clicked:

@page "/eventhandling"

<h1>Event Handling in Blazor</h1>

<p>@message</p>
<button @onclick="ChangeMessage">Click me</button>

@code {
    private string message = "Hello, Blazor!";

    private void ChangeMessage()
    {
        message = "Button clicked!";
    }
}
        

In this example, we define a button with an "@onclick" attribute that binds to the "ChangeMessage" method. When the button is clicked, the "ChangeMessage" method is called, updating the "message" variable and causing the UI to re-render with the new message.

Blazor Forms

Blazor provides a rich set of input components for building forms. These components include textboxes, checkboxes, radio buttons, and more. Let's create a simple form that captures user input:

@page "/forms"

<h1>Blazor Forms</h1>

<form>
                    <label for="name">Name:</label>
                    <input type="text" id="name" @bind="userName" />

                    <button type="submit">Submit</button>
</form>

<p>You entered: @userName</p>

@code {
    private string userName;
}
        

In this form, we use the "@bind" directive to bind the value of the "userName" variable to the input field.

Blazor Routing

Blazor provides built-in routing capabilities for creating multi-page applications. You can define routes and navigate between pages using the "@page" directive and the "NavigationManager" service. Let's create a simple navigation example:

<!-- Pages/Index.razor -->

@page "/"

<h1>Welcome to the Blazor Tutorial</h1>
<p>This is the home page.</p>

<a href="/counter">Go to Counter</a>
<a href="/fetchdata">Go to FetchData</a>
        

In this example, we define the home page with the "@page" directive set to "/" and provide links to two other pages, "Counter" and "FetchData."

<!-- Pages/Counter.razor -->

@page "/counter"

<h1>Counter</h1>

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

<button @onclick="IncrementCount">Increment</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Here, we created a "Counter" page with its own route and a button that increments a counter.

<!-- Pages/FetchData.razor -->

@page "/fetchdata"

<h1>Fetch Data</h1>

<p>@loading</p>

@code {

    string loading= "Loading...";

    protected override async Task OnInitializedAsync()
    {
        // Simulate fetching data from an API
        await Task.Delay(2000);

        loading = "Data is fully Loaded";
    }
}

In the "Fetch Data" page, we simulate loading data from an API using an asynchronous method.

Blazor Tutorial

Now that you have a good understanding of the basics of Blazor, we would highly recommend you go ahead and Build your first Blazor app by reading this Blazor Tutorial from .NET’s official website. It will not take you more than 20 minutes to read this wonderful article. Follow the steps in this guide and you'll be thankful to us.

Blazor vs. Other Web Frameworks

Blazor's emergence has sparked comparisons with other popular web frameworks like React, Angular, and Vue.js. Here are some key points of comparison:

Blazor vs React

• Language: Blazor uses C#, while React uses JavaScript (now also supports TypeScript).
• Learning Curve: If you're already familiar with C# and .NET, Blazor may be easier to learn. React has a steeper learning curve for those new to JavaScript.
• Performance: Blazor WebAssembly may have slightly slower initial load times compared to React due to the need to download the .NET runtime. However, performance can be comparable once the application is running.

Blazor vs Angular

• Language: Blazor uses C#, while Angular uses TypeScript.
• Size: Blazor WebAssembly applications can be larger in size compared to Angular applications.
• Community: Angular has a larger and more established community, which means more available resources and third-party libraries.

Blazor vs Vue.js

• Language: Blazor uses C# and .NET, while Vue.js uses JavaScript.
• Size: Blazor WebAssembly applications can be larger than Vue.js applications.
• Adoption: Vue.js has gained popularity for its simplicity and ease of integration into existing projects. Blazor getting popular for new ASP.NET Core projects.

Ultimately, the choice between Blazor and other web frameworks depends on your specific requirements, familiarity with the technologies, and project goals.

Blazor Components and Libraries

Blazor has a growing ecosystem of third party components and libraries to help you build feature-rich web applications. Here are some notable ones:

• Telerik Blazor: Offers a wide range of UI components and controls for Blazor applications.
• Syncfusion Blazor: Provides a suite of high-quality Blazor components for building modern web apps.
• MudBlazor: A popular open-source Blazor component library.
• DevExpress Blazor: Offers enterprise-grade UI components for Blazor applications.
• Radzen Blazor: A set of 70+ free native Blazor UI components, it is also open-source and can be downloaded from Nuget and Github.

Blazor Hosting

After you've developed your Blazor app, you'll need to host it on a web server so that users can access it online. While there are various hosting options available, including paid services and cloud platforms, ASPNETCORE.NET is one of the best and always free.

ASPNETCORE.NET is a hosting platform that provides services for hosting ASP.NET Core, Blazor apps, React, Angular, and Vue.js applications.

Summary

In this beginner's tutorial, we've explored the fundamentals of Blazor, a versatile web framework that allows you to build web applications using C# and ASP.NET Core. We've covered key concepts such as Blazor components, cascading parameters, event handling, forms, routing, and compared Blazor to other web frameworks. With the knowledge gained from this article, you can start building your own Blazor web applications and explore the rich ecosystem of Blazor libraries and components available.