Radzen Blazor Setup

https://razor.radzen.com/get-started

Steps

Install Radzen.Blazor using Nuget Package Manager. You only need to install on the Client app.

_Imports.razor

@using Radzen
@using Radzen.Blazor

Program.cs

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

index.html

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

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

MainLayout.razor

    <RadzenDialog />
    <RadzenNotification />
    <RadzenContextMenu />
    <RadzenTooltip />

Get started

1. 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

2. Import the namespace

Open the _Imports.razor file of your Blazor application and add these two lines @using Radzen and @using Radzen.Blazor.

3. Include a theme

Open the _Host.cshtml file (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"> This version requires only the Radzen Blazor CSS. Optionally you can include Bootstrap.

Alternatively you can include <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"> which embeds Bootstrap.

4. Include Radzen.Blazor.js

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

5. Use Dialog, Notification, ContextMenu and Tooltip components

Open the Shared/MainLayout.razor file and include <RadzenDialog/>, <RadzenNotification/>, <RadzenContextMenu/> and <RadzenTooltip/>

Open the Startup.cs file (server-side Blazor) or Program.cs (client-side WebAssembly Blazor) and add DialogService, NotificationService, ContextMenuService and TooltipService.

Startup.cs (server-side Blazor)

    using Radzen;
    ...
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddScoped<DialogService>();
        services.AddScoped<NotificationService>();
        services.AddScoped<TooltipService>();
        services.AddScoped<ContextMenuService>();
        ...
    }
    

Program.cs (client-side WebAssembly Blazor)

    using Radzen;
    ...
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Services.AddTransient(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();
    }