C# 10 and .NET Interactive Web Applications with Blazor WebAssembly

Overview

Recently, the web development landscape has evolved significantly, with a growing emphasis on empowering developers to use the tools they are most proficient with to develop engaging, dynamic web applications. Blazor WebAssembly has emerged as a standout framework amidst this transformation. Known for its versatility and efficiency, Blazor WebAssembly allows developers to create web applications that seamlessly integrate client and server-side functionality.

In contrast to traditional web development paradigms, where developers often struggle with disparate languages and frameworks for client-side and server-side operations, Blazor WebAssembly offers developers a unified environment to build dynamic and interactive web applications using C# and . NET. Developers can focus on building robust features and functionalities thanks to this cohesive approach, which streamlines the development process and fosters greater efficiency.

By offering a cohesive platform where developers can leverage their expertise in C# and .NET to create compelling user experiences, Blazor WebAssembly bridges the gap between client and server-side development. Using Blazor WebAssembly, developers can deliver efficient and responsive applications without having to sacrifice the familiarity and productivity of the C# environment by executing client-side code within the browser.

In essence, Blazor WebAssembly embodies the evolution of web development, offering a modern, efficient solution for building dynamic and interactive web applications. Developers who want to elevate their web development efforts will find Blazor WebAssembly compelling because of its seamless integration of client and server logic, as well as its support for familiar languages and frameworks.

What is Blazor WebAssembly?

Blazor WebAssembly represents a groundbreaking approach to web development as a fundamental component of the Blazor framework. By empowering developers to use C# and .NET languages for client-side and server-side operations, Blazor revolutionizes conventional paradigms.

Traditionally, web development heavily relied on JavaScript for client-side interaction. With Blazor WebAssembly, developers can execute client-side code with WebAssembly, a binary instruction format supported by modern web browsers. By seamlessly integrating C# and .NET into the client-side environment, this approach offers an efficient and coherent web application development solution.

Why Use Blazor WebAssembly?

With Blazor WebAssembly, developers can work across client and server logic using C# and .NET within a unified development environment. As a result, codebases are more consistent and cognitive overhead for switching between different languages and frameworks is reduced.

@*Example of a simple Blazor component using C# in home.razor file *@
@page "/"
@code {
    private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
    private string title = "Title for Blazor WebAssembly";
}


<PageTitle>@title</PageTitle>

<h1>@message</h1>

Enhanced Code Reusability

Blazor WebAssembly maximizes code reuse between client and server, facilitating the creation of modular components and functionalities that can seamlessly transition between client-side and server-side environments.

//File is Calculator.cs inside the folder name Components
namespace ZiggyRafiq.InteractiveBlazorWebApps.Components;
public class Calculator
{
    public int Add(int a, int b)
    {
        return a + b;
    }
}

@using ZiggyRafiq.InteractiveBlazorWebApps.Components
@page "/"
@code {

    private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
    private string title = "Title for Blazor WebAssembly";

    private Calculator calculator = new Calculator();
    private int result;

    private void Calculate() {
        result = calculator. Add(5, 3);
    }

}

<PageTitle>@title</PageTitle>
<h1>@message</h1>
<button @onclick="Calculate">Add</button>
<p>Result: @result</p>

Performance Optimization

In comparison to traditional JavaScript applications, Blazor WebAssembly applications offer enhanced performance by utilizing WebAssembly. The efficient binary format and near-native execution speed of WebAssembly ensure a smooth and responsive user experience.

@using Newtonsoft.Json;
@using ZiggyRafiq.InteractiveBlazorWebApps.Components
@page "/"
@code {

    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
    private string title = "Title for Blazor WebAssembly";

    private Calculator calculator = new Calculator();
    private int result;

    private void Calculate() {
        result = calculator.Add(5, 3);
    }

    private async Task CallJavaScriptFunction() => await JSRuntime.InvokeVoidAsync("alert", "Hello from Ziggy Rafiq!");
}

<PageTitle>@title</PageTitle>
<h1>@message</h1>
<button @onclick="Calculate">Add</button>
<p>Result: @result</p>
<button @onclick="CallJavaScriptFunction">Call JavaScript</button>

Platform Independence

Blazor WebAssembly runs within the web browser, ensuring cross-platform compatibility, and enabling users to access applications seamlessly across devices and operating systems.

@* Example of platform-independent UI rendering in Blazor WebAssembly *@
<h1>Welcome to Ziggy Rafiq Example of Blazor WebAssembly!</h1>

Using Blazor WebAssembly, developers can write robust, performant, and platform-independent web applications in C# and .NET. With its innovative client-side development approach and WebAssembly benefits, it makes a compelling choice for modern web development projects.

Key Features of Blazor WebAssembly

Modern Web Development with C# on the Client Side

.NET developers seeking to leverage the power of C# on the client side will appreciate Blazor WebAssembly as a groundbreaking advancement in web development. By enabling developers to write client-side code using C#, Blazor WebAssembly facilitates a seamless transition into modern web development while leveraging their existing skills and libraries.

C# offers .NET developers a lot of familiarity on the client side with Blazor WebAssembly. Since developers have spent years honing their craft in the C# language and the .NET ecosystem, they can seamlessly apply their knowledge to build dynamic and interactive web applications without learning a new language or framework.

Let's delve deeper into how developers can utilize C# on the client side with Blazor WebAssembly, supplemented by illustrative code examples below.

Integration of C# seamlessly

Blazor WebAssembly seamlessly integrates C# into client-side development, allowing developers to build web applications using familiar syntax and conventions. By leveraging existing C# libraries and frameworks, developers can streamline the development process and increase code reuse.

@* Example of a simple Blazor component written in C#*@
@code {
private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
}
<h1>@message</h1>

Making use of existing .NET libraries

Using Existing .NET Libraries: Developers can enhance client-side functionality with Blazor WebAssembly by leveraging the vast .NET library ecosystem. By integrating third-party libraries or implementing custom solutions developed in-house, developers can integrate a wide range of features into their web applications.

//The file is inside folder name Models and the file name is Customer.cs
namespace ZiggyRafiq.InteractiveBlazorWebApps.Models;
public class Customer
{
    public string Name { get; set; }=string.Empty;
    public int Age { get; set; }
    public string Email { get; set; } = string. Empty;
}

@* the file is inside the folder name Compents and the file name is JsonCompent.razor *@
@using Newtonsoft.Json;
@using ZiggyRafiq.InteractiveBlazorWebApps.Models;
@code {
 
        private string? serializedData;

        protected override void OnInitialized()
        {
            var data = new Customer { Name = "Lisa", Age = 31, Email = "[email protected]" };
            serializedData = JsonConvert.SerializeObject(data);
        }
}
<p>Serialized Object: @serializedData</p>

The codebase shared by both

Developers can maintain a shared codebase for their web applications by using C# on both the client and server sides with Blazor WebAssembly. As a result, development is simplified, consistency is promoted, and errors are reduced as a result of inconsistencies between client and server logic.

//File is Calculator.cs inside folder name Components
namespace ZiggyRafiq.InteractiveBlazorWebApps.Components;
public class Calculator
{
    public int Add(int a, int b)
    {
        return a + b;
    }
}

The Client side usages

@using ZiggyRafiq.InteractiveBlazorWebApps.Components
@page "/"
@code {
    private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
    private string title = "Title for Blazor WebAssembly";

    private Calculator calculator = new Calculator();
    private int result;

    private void Calculate() {
        result = calculator.Add(5, 3);
    }
}

<PageTitle>@title</PageTitle>
<h1>@message</h1>
<button @onclick="Calculate">Add</button>
<p>Result: @result</p>

With Blazor WebAssembly, .NET developers can build dynamic, interactive web applications in C# using their existing skills and libraries. As a result of this seamless integration, development is not only accelerated, but code reuse, maintainability, and consistency are also enhanced.

The Blazor WebAssembly Rich Component Model encapsulates UI components

By embracing a component-based architecture, Blazor WebAssembly offers developers a framework for creating and reusing UI components that is rich and versatile. By encapsulating both markup and logic within individual components, this approach simplifies development, enhances code modularity, and improves maintainability.

With illustrative code examples, let's explore how Blazor WebAssembly facilitates the creation and utilization of UI components.

Using a component-based architecture

A component-based architecture is at the heart of Blazor WebAssembly, which uses self-contained components to render UI elements and handle user interaction. By composing smaller, reusable components, developers can build complex applications using this component-based approach, which fosters a modular and scalable codebase.

@*Example of a simple Blazor component*@
<h1>Hello, from Ziggy Rafiq Blazor Example!</h1>

Markup and logic encapsulated

A clean separation of concerns and a more maintainable code structure are promoted by encapsulating both markup (HTML) and logic (C#) in Blazor WebAssembly components. As a result of this encapsulation, developers can define UI elements and their behaviours within a single component, improving code readability and organization.

@using Newtonsoft.Json;
@using ZiggyRafiq.InteractiveBlazorWebApps.Components
@page "/"
@code {

    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private string message = "Hello from Ziggy Rafiq, This is  Blazor WebAssembly!";
    private string title = "Title for Blazor WebAssembly";

    private Calculator calculator = new Calculator();
    private int result;

    private void Calculate() {
        result = calculator.Add(5, 3);
    }

    private async Task CallJavaScriptFunction() => await JSRuntime.InvokeVoidAsync("alert", "Hello from Ziggy Rafiq!");

    private string serializedObject;

    protected override void OnInitialized()
    {
        var obj = new { Name = "Lisa", Age = 35 };
        serializedObject = JsonConvert.SerializeObject(obj);
    }

    private int counter = 0;

    private void IncrementCounter()
    {
        counter++;
    }
}

<PageTitle>@title</PageTitle>
<h1>@message</h1>
<button @onclick="Calculate">Add</button>
<p>Result: @result</p>
<button @onclick="CallJavaScriptFunction">Call JavaScript</button>
<p>Serialized Object: @serializedObject</p>
<button @onclick="IncrementCounter">Click me</button>
<p>Counter: @counter</p>

Composition and reusability

With Blazor WebAssembly, developers can reuse components in different parts of their application or even across multiple projects. By reusing elements and behaviors throughout the application, developers not only save development time but also ensure consistency.

@code {
    [Parameter]
    public string? Text { get; set; }

    private void OnClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

<button @onclick="OnClick">@Text</button>

 <ButtonComponent Text="Click me" />

Handling events and binding data

Creating interactive and dynamic user interfaces is easier with Blazor WebAssembly's robust event handling and data binding mechanisms. A seamless and engaging user experience is provided by components that respond to user inputs, trigger actions, and update UI elements in real-time.

@code {
    private string? inputValue;

    private void SubmitForm()
    {
        
        Console.WriteLine("Form submitted with value: " + inputValue);
        
    }
}
<input type="text" @bind="inputValue" />
<button @onclick="SubmitForm">Submit</button>

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

In essence, Blazor WebAssembly's rich component model empowers developers to create sophisticated and interactive web applications with ease. By encapsulating UI elements and logic within reusable components, developers can build modular, maintainable, and scalable applications while delivering a seamless user experience.

Blazor WebAssembly simplifies UI updates with two-way data binding

Two-way data binding is a powerful feature of Blazor WebAssembly that streamlines the synchronization between the user interface (UI) and the data model. By simplifying the process of updating and reflecting changes in the UI based on user interactions, the amount of code for managing state and handling UI updates is significantly reduced.

Using illustrative code examples, let's explore how Blazor WebAssembly facilitates two-way data binding for web applications.

Synchronization automatically

As a result of Blazor WebAssembly's two-way data binding, changes to the UI elements are automatically propagated to the data model, and vice versa. As a result of this seamless synchronization, the UI keeps up with the current state of the data model in real-time, eliminating the need for manual updates and callbacks.

@code {
    private string userName = "Ziggy";
}
@*  Example of two-way data binding in Blazor *@
<input type="text" @bind="userName" />
<p>Hello, @userName!</p>

UI Updates Simplified

By enabling two-way data binding, Blazor WebAssembly simplifies the code required to update the UI in response to user interactions. Since the framework handles this synchronization automatically, developers do not need to manually update UI elements when the underlying data model changes.

private int counter = 0;

private void IncrementCounter()
{
    counter++;
}
@* Example of using two-way data binding for numeric input *@
<input type="number" @bind="counter" />
<p>Counter: @counter</p>

Enhancing developer productivity

In Blazor WebAssembly, two-way data binding reduces the cognitive overhead associated with managing UI state and updates, enhancing developer productivity. By relying on the framework to synchronize UI and data models efficiently, developers can focus on building application logic and features.

 @* Example of two-way data binding with a checkbox *@
<input type="checkbox" @bind="isToggleEnabled" />
@if (isToggleEnabled)
{
    <p>Toggle is enabled</p>
}
else
{
    <p>Toggle is disabled</p>
}

@code {
    private bool isToggleEnabled = false;
}

Interactive user experiences

Developers can create highly interactive user experiences with two-way data binding that responds to real-time inputs and interactions from users. Developers can easily create engaging web applications with Blazor WebAssembly, whether they want to update UI elements based on form inputs or reflect changes dynamically.

Two-way data binding in Blazor WebAssembly simplifies UI updates and improves developer productivity, revolutionizing web application development. In order to deliver seamless user experiences, developers can create responsive and interactive web applications that automatically sync the UI with the underlying data model.

A Guide to Using the .NET Standard Libraries

By providing seamless compatibility with existing .NET Standard libraries on the client side, Blazor WebAssembly offers developers a powerful advantage. By integrating this integration, developers can extend the capabilities of their web applications with ease by leveraging a wide range of pre-built functionalities. We will examine how .NET Standard libraries enhance the development experience, with illustrative examples.

Pre-built functionality for easy integration

Integration of Pre-built Functionalities: Blazor WebAssembly allows developers to easily integrate existing libraries into their client-side codebase. This means developers can leverage a plethora of functionalities, ranging from data manipulation and networking to cryptography and more, without having to reinvent the wheel.

//The file is inside folder name Models and the file name is Customer.cs
namespace ZiggyRafiq.InteractiveBlazorWebApps.Models;
public class Customer
{
    public string Name { get; set; }=string.Empty;
    public int Age { get; set; }
    public string Email { get; set; } = string. Empty;

}

@* the file is inside the folder name Compents and the file name is JsonCompent.razor *@
@using Newtonsoft.Json;
@using ZiggyRafiq.InteractiveBlazorWebApps.Models;
@code {
 
        private string? serializedData;

        protected override void OnInitialized()
        {
            var data = new Customer { Name = "Lisa", Age = 31, Email = "[email protected]" };
            serializedData = JsonConvert.SerializeObject(data);
        }
}
<p>Serialized Object: @serializedData</p>

Enhancing Blazor WebAssembly capabilities

A developer can extend Blazor WebAssembly capabilities beyond its built-in capabilities by utilizing .NET Standard libraries. Whether it's integrating advanced algorithms, accessing external APIs, or implementing custom business logic, developers have access to a wealth of resources to enhance their web applications.

using System.Security.Cryptography;
using System.Text;

namespace ZiggyRafiq.InteractiveBlazorWebApps.Services;
public class EncryptionService
{
    public string Encrypt(string data)
    {
        using (var aes = Aes.Create())
        {
            if (aes == null)
            {
                throw new InvalidOperationException("AES encryption algorithm is not supported.");
            }

            aes.GenerateIV();

            string ivString = Convert.ToBase64String(aes.IV);

            byte[] plainTextBytes = Encoding.UTF8.GetBytes(data);


            using (var encryptor = aes.CreateEncryptor())
            {
                byte[] encryptedBytes = encryptor.TransformFinalBlock(plainTextBytes, 0, plainTextBytes.Length);


                string encryptedData = Convert.ToBase64String(encryptedBytes);

                return ivString + ":" + encryptedData;
            }
        }
    }


    public string Decrypt(string encryptedData)
    {
        string[] parts = encryptedData.Split(':');
        if (parts.Length != 2)
        {
            throw new ArgumentException("Invalid encrypted data format.");
        }

        byte[] ivBytes = Convert.FromBase64String(parts[0]);

        byte[] encryptedBytes = Convert.FromBase64String(parts[1]);

        using (var aes = Aes.Create())
        {
            if (aes == null)
            {
                throw new InvalidOperationException("AES encryption algorithm is not supported.");
            }

            aes.IV = ivBytes;

            using (var decryptor = aes.CreateDecryptor())
            {
                byte[] decryptedBytes = decryptor.TransformFinalBlock(encryptedBytes, 0, encryptedBytes.Length);

                string decryptedData = Encoding.UTF8.GetString(decryptedBytes);

                return decryptedData;
            }
        }
    }
}

using Microsoft.AspNetCore.Components;
using ZiggyRafiq.InteractiveBlazorWebApps.Services;

namespace ZiggyRafiq.InteractiveBlazorWebApps.Components;
public partial class SecureComponent : ComponentBase
{
    private EncryptionService encryptionService = new EncryptionService();
    private string? encryptedMessage;
    private string? decryptedMessage;

    protected override void OnInitialized()
    {
        var message = "Sensitive information";
        encryptedMessage = encryptionService.Encrypt(message);
        decryptedMessage = encryptionService.Decrypt(encryptedMessage);
    }
}

@inherits Microsoft.AspNetCore.Components.ComponentBase

<div>
    <p>Encrypted Message: @encryptedMessage</p>
    <p>Decrypted Message: @decryptedMessage</p>
</div>

The .NET ecosystem is vast

A Vast .NET Ecosystem: Blazor WebAssembly supports the .NET Standard libraries so developers have access to a vast community of libraries and tools. Ultimately, this speeds up the development process and improves productivity as developers have access to a rich set of resources to address various development needs and challenges.

Developers can build rich and feature-packed web applications with Blazor WebAssembly's compatibility with .NET Standard libraries. Developers can create robust, scalable, and innovative solutions that meet the needs of modern web development by seamlessly integrating existing functionalities and tapping into the vast .NET ecosystem.

How to Build a Simple Counter Component with Blazor WebAssembly

Using Blazor WebAssembly, we'll create a basic counter component that increments when you click a button. Let's walk through steps to create the counter component and run the application.

Step 1. Start by creating a Blazor WebAssembly project

Execute the following commands at your terminal or command prompt.


dotnet new blazorwasm -n ZiggyRafiqBlazorApp
cd ZiggyRafiqBlazorApp

Step 2. Defining the counter component

Using your preferred code editor, open the Pages/Index.razor file and add the following code as in this code example below, we define a simple Blazor component named Index that displays a heading, the current count, and a button. The @currentCount variable holds the current count value, which is initially set to 0. When the button is clicked, the IncrementCounter method is called, which increments currentCount by one.

<!-- Pages/Index.razor -->
<h1>Ziggy’s Blazor WebAssembly Counter</h1>

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

<button class="btn btn-primary" @onclick="IncrementCounter">Increment</button>

@code {
    private int currentCount = 0;

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

Step 3. Run the Application

Run Blazor WebAssembly by returning to your terminal or command prompt and executing the following command:

dotnet run

Step 4. View the Application

Go to https://localhost:**** in your web browser to see your Blazor WebAssembly application in action, displaying the counter component with the initial count value and a button to increment it.

Summary

Modern Web Development with Blazor WebAssembly

For developers who wish to create modern, interactive web applications while leveraging the familiarity of C# and .NET stack, Blazor WebAssembly stands out as a compelling choice. With its component-based architecture, two-way data binding capabilities, and seamless integration with .NET Standard libraries, it is an ideal framework for a wide range of web development applications. With Blazor WebAssembly, you'll discover its versatility and efficiency in creating powerful web applications.

To illustrate Blazor WebAssembly's strengths, let's look into each aspect and provide code examples.

Architecture based on components

In Blazor WebAssembly, developers can create reusable and modular UI components. This architecture promotes code organization, enhances maintainability, and facilitates collaboration.

@* Example of a simple Blazor component*@
<h1> Simple Example of Hello, Blazor!</h1>

Two-way data binding is supported

Two-way Data Binding: Blazor WebAssembly supports two-way data binding, which enables automatic synchronization between the UI and underlying data model. This simplifies the updating of the UI as a result of user interactions.

@* Example of two-way data binding in Blazor*@
<input type="text" @bind="name" />
<p>Hello, @name!</p>

@code {
    private string name = "Ziggy";
}

Integrated with .NET Standard Libraries

Blazor WebAssembly seamlessly integrates with .NET Standard libraries, allowing developers to take advantage of a wide range of pre-built functionality. By reducing the need for custom implementations, Blazor WebAssembly is enhanced and the development process is accelerated.

//The file is inside folder name Models and the file name is Customer.cs
namespace ZiggyRafiq.InteractiveBlazorWebApps.Models;
public class Customer
{
    public string Name { get; set; }=string.Empty;
    public int Age { get; set; }
    public string Email { get; set; } = string. Empty;

}

@* the file is inside the folder name Compents and the file name is JsonCompent.razor *@
@using Newtonsoft.Json;
@using ZiggyRafiq.InteractiveBlazorWebApps.Models;
@code {
 
        private string? serializedData;

        protected override void OnInitialized()
        {
            var data = new Customer { Name = "Lisa", Age = 31, Email = "[email protected]" };
            serializedData = JsonConvert.SerializeObject(data);
        }
}
<p>Serialized Object: @serializedData</p>

Using Blazor WebAssembly, developers can develop sophisticated web applications using the robustness of C# and .NET. Featuring component-based architecture, two-way data binding, and seamless integration with the .NET Standard libraries, it is an excellent framework for developing modern web applications. You will unlock Blazor WebAssembly's full potential as you explore it further.

Please do not forget to like this article if you have found it useful and follow me on my LinkedIn https://www.linkedin.com/in/ziggyrafiq/ also I have uploaded the source code for this article on my GitHub Repo https://github.com/ziggyrafiq/CSharp-10-and-DotNet-Interactive-Blazor-Web-Apps