Exploring Blazor: Building Modern Web Apps with .NET and WebAssembly

In the world of web development, there is an ever-constant pursuit of technologies that offer faster performance, better user experiences, and a smoother development process. Blazor, a revolutionary framework from Microsoft, brings the power of .NET and WebAssembly together to create modern web applications with the same performance and capabilities as native apps.

Blazor is an open-source web framework that enables developers to build interactive web applications using C# and Razor syntax. It runs directly in the browser via WebAssembly, allowing the application to execute at near-native speed. This innovative approach eliminates the need for JavaScript in most scenarios, enabling developers to work with a single language throughout the entire development process.

1. Why Blazor?

Blazor offers several compelling advantages:

• Performance: Blazor leverages WebAssembly to run C# code in the browser, resulting in faster load times and improved overall performance. Users can experience highly responsive applications without the common overhead of traditional JavaScript-heavy web apps.

• Code Sharing: With Blazor, developers can share code between the client and server, reducing duplication and making it easier to maintain applications. This code-sharing ability allows developers to focus on building features rather than managing multiple codebases.

• Full-stack Development: Blazor supports full-stack development, meaning you can build both the client-side UI and server-side logic using C#. This unified development experience streamlines the workflow and promotes efficient collaboration between front-end and back-end teams.

• Rich Ecosystem: Being part of the .NET ecosystem, Blazor enjoys access to a vast array of libraries, tools, and community support. Developers can leverage the extensive .NET ecosystem to enhance their Blazor applications further.

2. Getting Started with Blazor

Let’s dive into building a simple Blazor application to get a hands-on experience with this exciting technology. We’ll walk through the process of setting up a new Blazor project, creating components, and integrating them into our application.

2.1. Prerequisites

Before we start, make sure you have the following installed on your machine:

1. .NET SDK: Ensure that you have the latest .NET SDK installed. You can download it from the official .NET website.
2. A Code Editor: You can use Visual Studio, Visual Studio Code, or any other C# code editor of your preference.

2.2. Creating a New Blazor Project

To create a new Blazor project, open your terminal or command prompt and run the following command:

bash
dotnet new blazorserver -n MyBlazorApp

This command will create a new Blazor Server App with the name “MyBlazorApp” in a folder with the same name. Alternatively, you can use the blazorwasm template to create a Blazor WebAssembly App.

2.3. Understanding Blazor Project Structure

Once the project is created, let’s explore its structure:

• wwwroot: This folder contains static files that will be served to the client, such as CSS, JavaScript, and images.

• Pages: This folder contains Razor components that represent the different pages of your application. Each component consists of a .razor file, which defines the UI, and an optional .cs file for code-behind logic.

• Shared: This folder contains Razor components that are shared across multiple pages in your application.

• Program.cs: This file contains the entry point of your Blazor application and configures the hosting environment.

• Startup.cs: This file contains the application’s configuration and services setup.

2.4. Building Our First Blazor Component

Let’s create a simple Blazor component to display a welcome message. In the Pages folder, create a new file named Index.razor with the following content:

csharp
@page "/"

<h3>Welcome to My Blazor App!</h3>
<p>Thank you for exploring Blazor with us!</p>

In this component, we’ve used the @page directive to specify the URL that corresponds to this component, which, in this case, is the root URL (“/”). The component displays a welcome message using HTML elements.

2.5. Integrating Components

Now that we have our component, let’s integrate it into the application. Open the MainLayout.razor file in the Shared folder. This file represents the main layout that wraps all other components. Update its content as follows:

csharp
@inherits LayoutComponentBase

<div>
    <h1>My Blazor App</h1>
    <div class="content">
        @Body
    </div>
</div>

We’ve defined a layout that includes a header with the title “My Blazor App” and a content section where other components will be rendered. The @Body directive serves as a placeholder for the main content, which will be provided by individual components.

Now, let’s update the Index.razor component to use this layout. Modify the component as follows:

csharp
@page "/"
@layout MainLayout

<h3>Welcome to My Blazor App!</h3>
<p>Thank you for exploring Blazor with us!</p>

We’ve added the @layout directive, specifying that this component should use the MainLayout we defined earlier. This integration allows the Index component to inherit the layout’s structure and styles.

2.6. Running the Blazor Application

To run the application, navigate to the project folder in your terminal and execute the following command:

bash
dotnet run

Once the application starts, open your web browser and visit https://localhost:5001 to see your Blazor app in action! You should see the welcome message displayed on the page.

3. Components and Data Binding

Blazor components are the building blocks of your application’s user interface. They are reusable, encapsulated units that can contain both UI and logic. In this section, we’ll explore more about components and data binding in Blazor.

3.1. Creating a Data-Bound Component

Let’s create a data-bound component to display a list of products. First, create a new file named Product.razor in the Pages folder with the following content:

csharp
@page "/products"

<h3>Products</h3>
<ul>
    @foreach (var product in products)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

@code {
    private List<ProductModel> products;

    protected override void OnInitialized()
    {
        products = new List<ProductModel>
        {
            new ProductModel { Name = "Product A", Price = 10.99 },
            new ProductModel { Name = "Product B", Price = 19.99 },
            new ProductModel { Name = "Product C", Price = 5.99 },
        };
    }

    private class ProductModel
    {
        public string Name { get; set; }
        public double Price { get; set; }
    }
}

In this component, we’ve defined a list of products and used a foreach loop to display them in an unordered list. The ProductModel class represents the structure of a product with a name and price.

3.2. Navigating to the Data-Bound Component

To navigate to the Product component we just created, let’s add a link in the Index.razor component. Update the Index.razor file as follows:

csharp
@page "/"
@layout MainLayout

<h3>Welcome to My Blazor App!</h3>
<p>Thank you for exploring Blazor with us!</p>

<p>Check out our <a href="/products">products</a>.</p>

We’ve added a link to the Product component with the URL “/products”. When the user clicks on this link, they will be redirected to the Product page, where they can view the list of products.

3.3. Data Binding in Blazor

Blazor supports two-way data binding, which means changes in the UI can update the data source and vice versa. We can illustrate this by adding a button to the Product component that allows users to increase the prices of all products by a fixed amount. Modify the Product.razor file as follows:

csharp
@page "/products"

<h3>Products</h3>
<ul>
    @foreach (var product in products)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

<button @onclick="IncreasePrices">Increase Prices</button>

@code {
    private List<ProductModel> products;

    // ... (rest of the code remains the same)

    private void IncreasePrices()
    {
        const double priceIncrease = 2.5;
        foreach (var product in products)
        {
            product.Price += priceIncrease;
        }
    }
}

Now, when the “Increase Prices” button is clicked, the prices of all products will increase by $2.5, and the changes will be immediately reflected in the UI.

4. Client-Side vs. Server-Side Blazor

Blazor offers two hosting models: Client-Side Blazor and Server-Side Blazor. Understanding the differences between these two models can help you choose the right one for your application.

4.1. Client-Side Blazor

In Client-Side Blazor, the entire application is downloaded to the client’s browser using WebAssembly. The application’s logic runs directly in the browser, allowing for faster response times and reduced server load. However, the initial download size of the application may be larger compared to Server-Side Blazor.

To create a Client-Side Blazor application, you can use the blazorwasm template instead of the blazorserver template we used earlier. The rest of the development process remains the same.

4.2. Server-Side Blazor

In Server-Side Blazor, the application’s logic runs on the server, and the UI is rendered in the client’s browser using SignalR. Only the necessary UI updates and user interactions are transmitted between the client and the server, resulting in a smaller initial download size.

To create a Server-Side Blazor application, you can use the blazorserver template, as we did in our earlier example.

Conclusion

Blazor is a game-changer in the world of web development, offering the power of .NET and WebAssembly to create modern web applications with superior performance and a seamless development experience. With Blazor’s ability to run C# code in the browser, developers can build interactive and responsive web applications without relying heavily on JavaScript. The simplicity of sharing code between the client and server makes Blazor an attractive choice for full-stack development.

In this blog post, we explored the basics of Blazor by building a simple application, creating components, and understanding data binding. We also learned about the differences between Client-Side Blazor and Server-Side Blazor, providing insights into when to use each hosting model.

As you venture further into the world of Blazor, you’ll find a rich ecosystem and growing community support that will aid you in building robust and feature-rich web applications. So, don’t hesitate to explore Blazor and unlock its potential for your next web development project! Happy coding!