Getting started with Radzen Blazor Controls

In recent few months I got a chance to work with Radzen Blazor Controls. It is good for rapid development on Blazor project.

why should we choose this controls ?

  1. It is free open source controls.
  2. They have created 60+ free and open source native Blazor UI controls.
  3. Latest Version controls are fully stable and bugs free.

How to integrate in Blazor Project ?

It is very simple to integrate in Blazor Project

Step 1: Create the Blazor Project

Step 2: Add  Radzen.Blazor from Nuget package manager.

Step 3: Add the CSS and Javascript file like this

For Blazor Server .NET 6+

 >> Pages\_Layout.cshtml

For Blazor WebAssembly

>> wwwroot/index.html

<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="RadzenTest.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>


Step 4: Now use the controls like this

Step 5: Run the application, It will look like this

Hey, Thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.