Get started with the Radzen Blazor Components

Radzen is a rapid application development solution that creates Blazor and Angular web applications connected to local databases or RESTful services.

In this article we will get to know about the integration of Blazor and radzen components. For getting understanding about the Blazor, you can follow the pervious article here https://www.garudax.id/pulse/begin-blazor-ravinder-singh/?published=t

Install

Radzen Blazor Components are distributed as the Radzen.Blazor nuget package. You can add them to your project in one of the following ways

• Install the package from command line by running dotnet add package Radzen.Blazor
• Add the project from the Visual Nuget Package Manager
• Manually edit the .csproj file and add a project reference

Import the namespace

Open the _Imports.razor file of your Blazor application and add this line @using Radzen.Blazor.

Include a theme

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side Blazor) and include a theme CSS file by adding this snippet 

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"> or 

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> 

if you either include Bootstrap manually or don't use it at all.

Include Radzen.Blazor.js

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side Blazor) and include this snippet <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Use a component

Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.

<RadzenButton Text="Hi"></RadzenButton>

Data-binding a property

<RadzenButton Text=@text />
<RadzenTextBox @bind-Value=@text />
@code {
  string text = "Hi";
}

Handing events

<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
  void ButtonClicked()
  {

  }
}

You can also fork this application on Github. Try this new framework and let me know what you think of it in the comments section below.