Getting Started with Radzen Components in Blazor

24/05/2024

If you’re a .NET developer looking to enhance the user experience of your Blazor applications, Radzen components can be a valuable addition to your projects.

What are Radzen Blazor Components?

Radzen Blazor Components are a free, open-source collection of pre-built UI components that enable developers to create interactive web applications quickly. Radzen Components cover many scenarios, making it easier for developers to add interactive elements to their applications.

References

Getting Started

Setting up a Blazor project

If you don’t have an existing Blazor project, let’s create a new one to start using Radzen Blazor Components.

Open your terminal or command prompt and run the following command:

dotnet new blazorwasm -o RadzenApp
cd RadzenApp

This command creates a new Blazor Web Assembly project called “RadzenApp” and navigates into the project folder.

Installing Radzen components

To use Radzen Components in your Blazor project, you need to install the Radzen.Blazor NuGet package. In your terminal or command prompt, run the following command:

dotnet add package Radzen.Blazor

Importing the namespaces Open the _Imports.razor file of your application and add these two lines:

@using Radzen
@using Radzen.Blazor

Importing CSS and JS files

Open wwwroot/index.html (Blazor WebAssembly) and include the theme CSS file by adding:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

Radzen Blazor Components come with five themes. To include a different file just change the name of the CSS file:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard.css">

Include the JS file in wwwroot/index.html:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Adding a Radzen Component

Let’s add a Radzen button to our Blazor application. Open the Pages/Index.razor file and replace the existing content with the following code:

@page "/"

<h1>Hello Radzen!</h1>

<RadzenButton Text="Click Me" Click="@OnButtonClick" />

@code {
    private void OnButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Running the application

To see the button in action, run the following command in your terminal:

dotnet watch run

Open your browser and navigate to https://localhost:5001 to see your Blazor application with the Radzen button.

Conclusion

You’ve successfully incorporated a Radzen Component into your Blazor application. This is just the tip of the iceberg, as Radzen offers a wide range of components. Experiment with different Radzen Components, and explore their properties to build powerful and visually appealing Blazor applications.

In future blog posts, we’ll delve deeper into specific Radzen Components and explore more advanced use cases. Stay tuned for more exciting content on Blazor and Radzen!