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 ?
- It is free open source controls.
- They have created 60+ free and open source native Blazor UI controls.
- 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">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>RadzenTest</title>
<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">
</head>
<body>
<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>
</div>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
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.
Chandradev's Blog 