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.razorand 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();
}