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


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 in 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 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 this below code into that razor component,

@page "/" 
<style>
  form.row {
    margin - bottom: 16 px;
} 
</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,


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 is 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 do share your feedback in the comment section.