How To Get Started With The Radzen Blazor Components

Introduction

When creating a Blazor Application (both Server and WebAssembly), by default it consists of the UI framework. But some projects might be need to delivered sooner or the time frame for a project is shorter. In those scenarios, we can use Blazor UI Components and in this article, we discuss an awesome Blazor UI Component called Radzen Blazor Components. By using Radzen Blazon Components we can boost our Blazor Application Development

Radzen Blazor components

Radzen Blazor Components is a free and open-source set of more than 60 native Blazor UI controls. Radzen Blazor Components are free for commercial use. Paid support is available as part of the Radzen Professional subscription.

Pros of using Radzen Blazor components

We can quickly create Blazor page(s).
It consumes Swagger, OData, or REST service painlessly.
Simple Scaffolding CRUD application from MSSQL, MySQL, Postgres, or Oracle databases.
We can Customize the Radzen Blazor Components based on our requirements.
It has built-in Authentication, authorization, user, and role management.
Easy to deploy our Blazor application to IIS and Azure.
Since the components are implemented in C#, it takes full advantage of the Blazor framework.
Do not depend on or wrap existing JavaScript frameworks or libraries.
Both server-side and client-side (Blazor WebAssembly) Blazor are supported.

Demo

By the end of this article, we are going to achieve as shown below.

Interactive UI

Fig 1. Interactive UI Components designed using Radzen Blazor components.

Getting started

Installing the package

We can add the NuGet package in one of the following ways.

Install the package from the command line by running.
```
dotnet add package Radzen.Blazor
```
Add ImportOr by adding the project from the Visual NuGet Package Manager.

After installing the package, we need to add the following to _Imports.razor

@using Radzen
@using Radzen.Blazor

Add the following to our HTML head section, it’s either index.html since we are implementing this in WebAssemblyAdd Style & Font references.

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

In the HTML body section of index.html add this code.

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Since Blazor WebAssembly add the following to our Program.MainRegister Services.

using Radzen;
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
    builder.Services.AddScoped(sp => new HttpClient
    {
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
    });
    builder.Services.AddScoped<DialogService>();
    builder.Services.AddScoped<NotificationService>();
    builder.Services.AddScoped<TooltipService>();
    builder.Services.AddScoped<ContextMenuService>();
    await builder.Build().RunAsync();
}

Now let's delete the default UI framework which was created while creating a new project. As an example, now let's open the NavMenu.razor file under the shared folder. Remove the HTML code block on that page and paste the below code.Implement Radzen Blazor components.

<div class="rz-sidebar"></div>
<div class="rz-sidebar" @onclick="ToggleNavMenu" style="top: 51px; bottom: 0px; width: 250px;; transform: translateX(0px);">
    <RadzenPanelMenu Style="width:300px">
        <ul class="rz-panel-menu">
            <li class="rz-navigation-item">
                <RadzenPanelMenuItem Text="Home" Icon="home" Path="/" />
            </li>
            <li class="rz-navigation-item">
                <RadzenPanelMenuItem Text="Counter" Icon="zoom_in" Path="counter" />
            </li>
            <li class="rz-navigation-item">
                <RadzenPanelMenuItem Text="Fetch Data" Icon="zoom_out" Path="fetchdata" />
            </li>
        </ul>
    </RadzenPanelMenu>
</div>

<RadzenPanelMenuItem>

This component is used to create the Menu Item under the Panel Menu and its attributes are,<RadzenPanelMenu> – This component will create a Panel menu.

Text: To give the menu name.
Icon: To add an icon for that menu.
Path: Component that is to be opened.

Now we have designed our side menu and let's design a new component with attractive UI controls. In this example, I have used Index.razor component to modify its UI. You can either use the same or else create a new component.

Add the below code to that razor component.

@page "/"
<style>
    form.row {
        margin-bottom: 16px;
    }
</style>
@if (order == null)
{
    <p><em>Loading...</em></p>
}
else
{
<RadzenTemplateForm Data="@order" Submit="@((Order args) => { Submit(args); })">
    <div class="row">
        <div class="col-md-6">
            <RadzenFieldset Text="Purchase Info">
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Credit Card" />
                    </div>
                    <div class="col-md-8">
                        <RadzenDropDown
                            @bind-Value="order.CardId"
                            AllowClear="true"
                            Placeholder="Select something"
                            Data="@cards"
                            style="width: 100%;"
                            TextProperty="CardNr"
                            ValueProperty="CardId"
                            Name="CardId">
                        </RadzenDropDown>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Card #" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="CardNr" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Expiry Date" />
                    </div>
                    <div class="col-md-8">
                        <RadzenDatePicker
                            style="width: 100%;"
                            Name="ExpiryDate"
                            @bind-Value="order.ExpiryDate" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Cardholder" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="CardHolder" />
                    </div>
                </div>
            </RadzenFieldset>
            <RadzenFieldset Text="Contact Info">
                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Name" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="Name" />
                    </div>
                </div>
                <RadzenTabs SelectedIndex="0">
                    <Tabs>
                        <RadzenTabsItem Text="Billing Address">
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="Country" />
                                </div>
                                <div class="col-md-8">
                                    <RadzenDropDown
                                        @bind-Value="order.Country"
                                        Placeholder="USA"
                                        Data="@countries"
                                        style="width: 100%;"
                                        TextProperty="Name"
                                        ValueProperty="Id"
                                        Name="Country">
                                    </RadzenDropDown>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="City" />
                                </div>
                                <div class="col-md-8">
                                    <RadzenTextBox style="width: 100%;" Name="City" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="Address Line 1"></RadzenLabel>
                                </div>
                                <div class="col-md-8">
                                    <RadzenTextBox style="width: 100%;" Name="Address1" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="Address Line 2" />
                                </div>
                                <div class="col-md-8">
                                    <RadzenTextBox style="width: 100%;" Name="Address2" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="State/Province/Region" />
                                </div>
                                <div class="col-md-8">
                                    <RadzenTextBox style="width: 100%;" Name="State" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 align-items-center d-flex">
                                    <RadzenLabel Text="Zip/Postal Code" />
                                </div>
                                <div class="col-md-8">
                                    <RadzenTextBox style="width: 100%;" Name="Zip" />
                                </div>
                            </div>
                        </RadzenTabsItem>
                        <RadzenTabsItem Text="Shipping Address"></RadzenTabsItem>
                    </Tabs>
                </RadzenTabs>
            </RadzenFieldset>
        </div>
        <div class="col-md-6">
            <RadzenFieldset Text="Store Info">
                <div class="row">
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="Store #" />
                    </div>
                    <div class="col-md-10">
                        <RadzenTextBox
                            Placeholder="123"
                            style="width: 45.3125px;"
                            Name="StoreId" />
                        <RadzenButton
                            ButtonStyle="ButtonStyle.Info"
                            Icon="add_location"
                            style="margin-left: 11px; width: 166.046875px;"
                            Text="Locate store">
                        </RadzenButton>
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="Name" />
                    </div>
                    <div class="col-md-10">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="The warehouse"
                            style="width: 100%;"
                            Name="Warehouse" />
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="Region" />
                    </div>
                    <div class="col-md-3">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="West"
                            style="width: 100%;"
                            Name="Region" />
                    </div>
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="System" />
                    </div>
                    <div class="col-md-5">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="US"
                            style="width: 100%;"
                            Name="System" />
                    </div>
                </div>
            </RadzenFieldset>
            <RadzenFieldset Text="POS Info">
                <div class="row">
                    <div class="align-items-center d-flex col-md-3">
                        <RadzenLabel Text="Trans #" />
                    </div>
                    <div class="col-md-9">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="S4485"
                            style="width: 100%;"
                            Name="TransId" />
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-3">
                        <RadzenLabel Text="Register" />
                    </div>
                    <div class="col-md-9">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="Register #4"
                            style="width: 100%;"
                            Name="Register" />
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-3">
                        <RadzenLabel Text="Clerk" />
                    </div>
                    <div class="col-md-9">
                        <RadzenTextBox
                            Disabled="true"
                            Placeholder="Jane Doe"
                            style="width: 100%;"
                            Name="Clerk" />
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-3">
                        <RadzenLabel Text="Amount" />
                    </div>
                    <div class="col-md-3">
                        <RadzenNumeric
                            Placeholder="300"
                            style="width: 100%;"
                            Name="Amount"
                            @bind-Value="order.Amount" />
                    </div>
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="Tax" />
                    </div>
                    <div class="col-md-4">
                        <RadzenNumeric
                            Placeholder="123"
                            style="width: 100%;"
                            Name="Tax"
                            @bind-Value="order.Tax" />
                    </div>
                </div>
                <div class="row">
                    <div class="align-items-center d-flex col-md-3">
                        <RadzenLabel Text="Order Date" />
                    </div>
                    <div class="col-md-3">
                        <RadzenDatePicker
                            style="width: 100%;"
                            Name="OrderDate"
                            @bind-Value="order.OrderDate" />
                    </div>
                    <div class="align-items-center d-flex col-md-2">
                        <RadzenLabel Text="Ship Date" />
                    </div>
                    <div class="col-md-4">
                        <RadzenDatePicker
                            style="width: 100%;"
                            Name="ShipDate"
                            @bind-Value="order.ShipDate" />
                    </div>
                </div>
            </RadzenFieldset>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-12 d-flex align-items-end justify-content-center" style="margin-top: 16px;">
            <RadzenButton ButtonType="ButtonType.Submit" Icon="save" Text="Save" />
            <RadzenButton
                ButtonStyle="ButtonStyle.Light"
                Icon="cancel"
                style="display: inline-block; margin-left: 10px;"
                Text="Cancel"
                Click="@Cancel" />
        </div>
    </div>
</RadzenTemplateForm>
}
@code {
public class Order
{
    public int CardId { get; set; }
    public string CardNr { get; set; }
    public DateTime ExpiryDate { get; set; }
    public string CardHolder { get; set; }
    public string Name { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
    public int Country { get; set; }
    public int StoreId { get; set; }
    public string Warehouse { get; set; }
    public string Region { get; set; }
    public string System { get; set; }
    public int TransId { get; set; }
    public string Register { get; set; }
    public string Clerk { get; set; }
    public decimal Amount { get; set; }
    public decimal Tax { get; set; }
    public DateTime OrderDate { get; set; }
    public DateTime ShipDate { get; set; }
}
public class CreditCard
{
    public int CardId { get; set; }
    public string CardNr { get; set; }
}
public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}
Order order = new Order() { ExpiryDate = DateTime.Parse("10/10/2022"), OrderDate = DateTime.Now, ShipDate = DateTime.Now };
List<CreditCard> cards = new List<CreditCard>() { new CreditCard() { CardId = 1, CardNr = "5555555555554444" }, new CreditCard() { CardId = 2, CardNr = "4012888888881881" } };
List<Country> countries = new List<Country>() { new Country() { Id = 1, Name = "USA" }, new Country() { Id = 2, Name = "Germany" } };
void Submit(Order arg) { }
void Cancel() { }
}

When the above code is implemented, we will get the output as shown below.

UI component

Fig 2. UI components

We will have a detailed view of each component of Radzen Blazor components in an upcoming article, but still, if you wish to learn more, then see the official site here.

GitHub

The code samples used in this article are available in this GitHub Repo.

Conclusion

In this article, we have seen how to implement the Radzen Blazor Components, their advantages, and code samples. I assume you all found this article useful and in the upcoming article series we will have a detailed view of each component of Radzen Blazor Components. Please share your feedback in the comment section.

6 Comments

Join the conversation! Your thoughts help the community grow.

Ryan Hughes4y ago
Where can I find the follow up article as mentioned? Thanks.
Victor Stoddard5y ago
Error CS1061 'Index.Order' does not contain a definition for 'CardId' and no accessible extension method 'CardId' accepting a first argument of type 'Index.Order' could be found (are you missing a using directive or an assembly reference?)
Saravanakumar Sekaran5y ago
Amazing Article !!
- Sundaram Subramanian5y ago
  Thank you, glad you found this article useful.
Gurpreet Arora5y ago
Amazing Article !!
- Sundaram Subramanian5y ago
  Thank you. Glad to hear.