Introduction
When creating a Blazor Application (both Server and WebAssembly), by default it consist of the UI framework. But some projects might be need to deliver sooner or the time frame for a project is lesser. 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,
Getting Started
Installing the Package
We can add NuGet package in one of the following ways,
- Install the package from command line by running
dotnet add package Radzen.Blazor
- Or by adding the project from the Visual NuGet Package Manager
Add Import
After installing the package, we need to add the following in to _Imports.razor
@using Radzen
@using Radzen.Blazor
Add Style & Font references
Add the following to our HTML head section, it’s either index.html, since we are implementing this in WebAssembly
<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>
Register Services
Since Blazor WebAssembly add the following to our Program.Main
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();
}
Implement Radzen Blazor components
Now lets delete the default UI framework which was created while creating a new project. As an example, now lets open NavMenu.razor file under the shared folder. Remove the HTML code block in that page and paste the below code.
<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>
<RadzenPanelMenu> – This component will create Panel menu
<RadzenPanelMenuItem> – This component is used to create the Menu Item under the Panel Menu and its attributes are,
- Text – To give the menu name
- Icon – To add icon for that menu
- Path – Component that to be opened
Now we have designed our side menu and lets 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 this below code into 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
We will have detailed view on each components of Radzen Blazor components in upcoming article, but still if you wish to learn more, then see the official site here.
GitHub
The code samples used this article is available in this GitHub Repo. Please feel free to refer
Conclusion
In this article, we have seen how to implement the Radzen Blazor Components, its advantages and code samples. I assume you all found this article useful and in upcoming article series we will have a detailed view on the each components in Radzen Blazor Components. Please do share your feedback in the comment section.
Learn With Sundar 
Leave a Reply