How To Configure Radzen In Blazor

Introduction

In this article, we are going to start with .NetCore Blazor web assembly project and ending with a Radzen configured project, where we can use enhanced Radzen components. So basically after reading this article you will be able to configure Radzen in you're Blazor App and can use their components easily. So before we go deep in, How to configure Radzen? First, I want to introduce you to Radzen.

If you want to understand anything, there are two most important questions that help a lot to understand anything, first is 'What?' and the second is 'Why?'. Let's start with What.

What is Radzen?

According to the Radzen Documentation "Radzen is a rapid application development solution that creates Blazor and Angular web applications connected to local databases or RESTful services". Radzen helps a lot when we need to create rapid applications, Radzen provides their inbuilt components, and these all components require less coding and effort than normal components. Radzen provides their attributes, these attributes are very helpful in case of data binding, applying validations, and other things. I hope it's clear now that, what is Radzen. Now it's time to move forward to our next question, "why is Radzen".

Why is Radzen?

There are a lot of reasons to choose Radzen with Blazor some of them are written below.

Radzen helps in rapid development.
Radzen provides inbuilt UI components.
Radzen is a free library, we just need to configure it with our project.
Radzen decreases the no of lines of code in your program.

Now introduction is done let's move forward, that is how we configure our Blazor project with Radzen.

Configuring Radzen with Blazor

To configure your project with Radzen we need to follow these steps. Let's start with an example.

Step 1

Open visual studio and click on Create new project. Here I am using Visual Studio 2022 with .Net 6 which is the latest version of visual studio.

Figure-Creating new project

Step 2

Now we need to choose the project type and template, here I am choosing Blazor WebAsembly App and clicking on next

Figure-Choosing Project Template

Step 3

Then we go to the next window and enter the project name, Then choosing the .Net version, I have chosen .Net6, which has long-term support. Then click on Create button. It may take 2 or 3 seconds to create a template of Blazor WebAssembly. Now it's just a Blazor assembly app, here begins our main story.

Step 4

Right-click on the solution file 'project-name with .sln extension ' or project Name in your solution explorer(if your solution explorer is closed you can simply open it from the view window or just click Ctrl+Alt+L, and your solution explorer is open now). Then click on Manage NuGet Packages.

Figure-Open NuGet Package Manager

Step 5

Now you need to click on Browse and search for Radzen in the search box and you get results similar to this window

Figure-Installing Radzen Lib.

Now we can see that Radzen.Blazor by Radzen Ltd. is shown at the top, of the search box, and at the time I'm writing this article there are 2.1 million downloads. Now you just need to click on Radzen.Blazor, then we need to click on the check box that represents in which project you want to install this particular Library, currently, we have only one project in our solution but sometimes we have more than one project in our solution. Now click on the Install button.

Step 6

Next, we get an alert that shows preview changes done by Radzen.Blazor library.

Figure-Preview Alert

Now simply click on the ok button and if you don't want to see this alert next time you can also check the check box "Do not show it again". Now you can see that we are getting the option to uninstall the Radzen.Blazor means it's installed in our project or solution.

Figure-Radzen.Blazor

Now If we see our .csproj file we can see that the Reference of Radzen is automatically added to the project file by installing it.

 <PackageReference Include="Radzen.Blazor" Version="4.3.4" />

Now we need to make some changes in our configuration to use Radzen for our Project.

Step 7

Now open Solution Explorer and double-click on _Imports.razor and add two lines

@using Radzen
@using Radzen.Blazor

This will import the Radzen into the project.

Step 8

Now we need to add a theme file or .css by Radzen, to do this we need to make changes in the wwwroot/index.html file to use these files in our project, let's add a snipped-in <head>....</head>.

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

Now we can use Radzens css. Next, we need to add js by Radzen to do this in the WebAssembly app wwwroot/index.html file and add the script under the <body>.....<bod> tag.

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

Now we can use Radzen components in our project let's use the button component by Radzen.

<RadzenButton Text="@text" Click="@SayHii"></RadzenButton>
@code {
    string text = "Hi";
    public void SayHii(){
        text = "Hi learner.";
    }
}

Explanation

Here we have used RadzenButton and set its text with a variable text and when we click on the button the text of the button change to Hi learner.

Figure-Out-put before clicking on the button

When we click on the button, then button click event occurs and it will call the method SayHii(), and the message changed to Hii Learner. from Hi let's have a look at the final output

Figure-Out-put after clicking on the button

Now we can see that Radzen components are working fine with the Blazor.

If you want to use Dialog, Notification, ContextMenu, and Tooltip components you have to make some little changes in your project, and if you don't want to use these components then it's fine you don't need to configure these settings. Let's do it.

First Open Shared\MainLayout.razor and add these components in the MainLayout.razor

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

Next, we need to add services for these components. We are using Blazor WebAssembly so we add these services to Program.cs

builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

By adding these services, now we can use these advanced and updated components in our project.

Conclusion

Radzen is a free Blazor library that can help you in rapid development, it provides some more featured components. These components are easy to use and customizable, you can use them based on your requirements.