How to Add UI Components to a Blazor WebAssembly Application

Blazor WebAssembly (WASM) is a modern web development framework built on top of .NET. It enables developers to create interactive client-side web applications using C# and .NET instead of JavaScript. By eliminating the need to learn JavaScript in depth, Blazor WASM makes the development process more accessible for .NET developers.

Unlike Blazor Server, Blazor WASM runs entirely on the client-side, resulting in faster load times, a more responsive user interface, and improved application performance. It can be hosted on any web server and does not require a dedicated server, making it more scalable and easier to deploy.

With its features, Blazor WASM enables the creation of dynamic user interfaces using various UI components. This blog post will cover WebAssembly project creation, adding UI components to a Blazor WebAssembly application, finding additional components from NuGet, and writing a simple event/method for ComponentOne control. For working with a Blazor Server application, see How to Add Blazor UI Controls to Your Web Application | ComponentOne.

This blog will cover the following:

• Creating a Blazor WebAssembly Project
• Adding UI Components in Blazor WebAssembly
• Finding Additional UI Components from NuGet
• Writing a Simple Event/Method for a ComponentOne Control
• Benefits of Using ComponentOne Controls

Ready to Get Started? Download ComponentOne Today!

Creating a Blazor WebAssembly Project

To create a Blazor WebAssembly project, follow these steps:

1. Open Visual Studio 2022.

2. Click on "Create a new project".

3. Select the "Blazor WebAssembly App" template from the list of available templates.

4. Choose a name and location for your project, and then click on "Create".

5. Select the NET version accordingly. We will select NET 6.0 for now.

6. In the next screen, choose the authentication as needed. For this blog example, select "None".

7. Click on "Create" to create your project.

Once the project is created, we are ready to add pages, components, and other elements to it.

Adding UI Components in Blazor WebAssembly

Blazor WASM allows developers to create interactive and responsive web applications using .NET and C# programming languages. To add UI components in Blazor WebAssembly, we can use the built-in components provided by Blazor or create our custom components.

Please refer to the following steps to add the components to the Blazor WASM application:

1. Import the required namespace for adding the component in *.razor

2. Add component tag in HTML markup part of *. razor pages

3. Add the related event for the UI component

@using Microsoft.AspNetCore.Components
<button @onclick="OnButtonClick">Test Click</button>
@code {
    private int _count = 0; // define properties here
    private void IncrementCount() 
    {
         //Method Code here
    }
}

Similarly, following the above steps, we may add other UI components, such as TextBox, CheckBox, etc. Additionally, we may create our custom components in a new .razor file and implement the required C# code.

Finding Additional UI Components from NuGet

Along with the built-in UI components provided by Blazor WASM, many third-party UI component libraries are available on NuGet that we may use in our Blazor WASM project. These libraries offer a wide range of UI components with distinctive styles and functionalities.

This saves development time and effort in building custom components from scratch.

ComponentOne Blazor Edition provides various UI components like FlexGrid, FlexChart, C1TextBox, C1ComboBoxes, etc. For detail, please refer to the ComponentOne Blazor Edition Demo samples

To add the ComponentOne Components in existing Blazor projects, please refer to the following steps to add the simple C1TextBox in the *.razor file:

1. Right-click on the solution file from Solution Explorer

2. Select the “Manage NuGet packages for Solution” option from here

3. Now select the Browse tab and focus on the Search box

4. Type C1.Blazor.Input in the search box and select the first result from the suggestions

5. Now, select *.Client and *.Server to install the NuGet packages

6. After selecting the project, click on the Install button.

This will add the required packages to the Blazor WASM application. After adding the required packages, we would import the required JS and CSS references for ComponentOne Blazor components.

To add the required JS and CSS references, please refer to the following steps:

1. Navigate to the wwwroot folder under *.client project.

2. Open the index.html file from the wwwroot folder.

3. Add the following references to the index.html file.

    <link rel="stylesheet" href="/_content/C1.Blazor.Core/styles.css" />
    <link rel="stylesheet" href="/_content/C1.Blazor.Input/styles.css" />
 
    <script src="/_content/C1.Blazor.Core/scripts.js"></script>
    <script src="/_content/C1.Blazor.Input/scripts.js"></script>

4. Import the required namespaces in the *.razor pages.

5. After following the above steps, we are ready to add the C1Textbox to the razor page

@using C1.Blazor.Input;

<C1TextBox></C1TextBox>

By following this approach, we can easily add a ComponentOne control to a Razor page and utilize the pre-defined components provided by ComponentOne.

Writing a Simple Event/Method for a ComponentOne Control

With the above steps, we understand how to add the Blazor Components to the Razor pages. Sometimes we need to write the custom implementation with the component's help.

After following the previous steps, we have learned how to add Blazor Components to the Razor pages. However, there may be cases where we need to customize the components. In such cases, we need to handle the defined events for components.

For example, we would like to add a Button next to the C1TextBox, but the button should be visible only when C1TextBox has the value “Test”. In this case, we need to check whether the C1TextBox has a “Test” value or not. This can be checked using the TextChanged event of C1TextBox.

<C1TextBox @ref="textbox" TextChanged="OnControlTextChanged"></C1TextBox>
 
<button style="@_style" >Submit !!!</button>
 
@code{
    C1TextBox? textbox;
    C1Style _style = new C1Style() { Display = C1StyleDisplay.None };
    public void OnControlTextChanged(string text)
    {
        if (text == "Test")
        {
            _style.Display = C1StyleDisplay.Inline;
        }
    }
}

With this code, we could show the hidden Button as the Control text value is “Test”. We also see the @ref in the code snippet used to get the reference of the targeted control in the Code section and perform actions through the code for customizations.

Benefits of Using ComponentOne Controls

One of the benefits of using ComponentOne controls is that they provide client-side IntelliSense. This means that when we use a ComponentOne control on our Razor page, Visual Studio may provide suggestions and auto-completion for the control's properties and events. This makes it easier and faster to write code that uses the control.

Along with the client-side IntelliSense, the ComponentOne controls are easy to use, customizable, and with high quality and performance, and integrate with Visual Studio.

Conclusion

In conclusion, Blazor WebAssembly is an excellent option for developers to create interactive and responsive web applications using .NET and C#. Following the steps mentioned in this blog post, developers can easily add UI components to their Blazor WebAssembly application.

ComponentOne Blazor Edition control can be particularly useful to save time and effort in building custom components from scratch. With the help of event handling and customization, developers can take their applications to the next level and provide a more personalized and tailored experience to their users.

Ready to Get Started? Download ComponentOne Today!