Get Started (Blazor)

1. Installation

Radzen Blazor Components are distributed as the Radzen.Blazor.

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 package from Visual Nuget Package Manager.
  • Manually edit the .csproj file of your application and include a project reference <PackageReference Include="Radzen.Blazor" Version="3.9.10" />.

2. Import namespaces

Open the _Imports.razor> file of your Blazor application and add these two lines:

@using Radzen
@using Radzen.Blazor

3. Include a theme

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

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

Optionally include Bootstrap.

Radzen also ships with themes that include some vital parts of Bootstrap (mostly layout). To use a theme bundled with Bootstrap include the file without -base suffix:

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

4. Include the JS

Open _Host.cshtml (server-side Blazor) or wwwroot/index.html (WebAssembly Blazor) and add this snippet

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

5. Use a component

Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <RadzenButton Text="Hi"></RadzenButton>.

Setting properties

<RadzenButton Text="@text"></RadzenButton>

@code {
   string text = "Hi";
}

Handling events

<RadzenButton Text="Hi" Click=@ButtonClicked></RadzenButton>

@code {
   void ButtonClicked()
   {
   }
}

6. Register Dialog, Notification, ContextMenu and Tooltip

  • Open Shared/MainLayout.razor and add the following
<RadzenDialog/>
<RadzenNotification/>
<RadzenContextMenu/>
<RadzenTooltip/>
  • In server-side Blazor applications register the services in the ConfigureServices method of Startup.cs. Import the Radzen namespace first.
public void ConfigureServices(IServiceCollection services)
{
   // Snip

   services.AddScoped<DialogService>();
   services.AddScoped<NotificationService>();
   services.AddScoped<TooltipService>();
   services.AddScoped<ContextMenuService>();

   // Snip
}
  • In web assembly Blazor applications register the services in the Main method of Program.cs. Import the Radzen namespace first.
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);

    // Snip

    builder.Services.AddScoped<DialogService>();
    builder.Services.AddScoped<NotificationService>();
    builder.Services.AddScoped<TooltipService>();
    builder.Services.AddScoped<ContextMenuService>();

    // Snip

    await builder.Build().RunAsync();
}

We are here for you

Making our users happy is always a priority for us.