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.
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.