Register DevExpress Blazor Resources
- 3 minutes to read
This topic describes how to integrate DevExpress Blazor resources into various project types: how to set up namespaces, add and configure DevExpress Blazor services, and apply themes.
Register the Namespace
Register the DevExpress.Blazor namespace in the _Imports.razor file:
@using DevExpress.Blazor
Add using DevExpress.Blazor; to one of the following files based on the project type:
- Server and WASM: Program.cs
- Blazor MAUI: MauiProgram.cs
- Blazor WinForms: Form1.cs
- Blazor WPF: MainWindow.xaml.cs
In the same file, call the AddDevExpressBlazor method and specify the BootstrapVersion global option. The option’s default value is v4. If your application uses a theme based on Bootstrap 5, you should set the BootstrapVersion property to v5.
using DevExpress.Blazor;
/* ... */
builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
Apply a Theme
Application-wide stylesheets are stored in the Components/App.razor file for Blazor Web applications.
Add a link to your theme to this file (see sections below for examples).
If you do not implement any solutions to refresh cached resources on user machines, inject the IFileVersionProvider interface in the layout file. If you did not create the project from the DevExpress template, you also need to add the corresponding service in the Program.cs file:
builder.Services.AddMvc();
The interface ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.
Built-In DevExpress Theme
You can link one of the built-in DevExpress themes. We use the DevExpress Blazing Berry theme in our documentation. To apply this theme, add a link to a stylesheet before the site.css or app.css and <ProjectName>.styles.css links.
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
@* ... *@
<head>
@*...*@
@* Bootstrap 5 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
@* Bootstrap 4 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css") rel="stylesheet" />
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
<link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
@*...*@
</head>
@code {
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
External Bootstrap Theme
You can apply an external Bootstrap theme. Add a link to your theme and bootstrap-external stylesheet (v4 or v5) to apply CSS variables from Bootstrap CSS files to DevExpress Blazor components. Note that the project may already contain a link to the standard or custom Bootstrap theme.
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
@* ... *@
<head>
@*...*@
@* Bootstrap theme *@
<link href=@AppendVersion("css/bootstrap/bootstrap.min.css") rel="stylesheet" />
@* bootstrap-external for Bootstrap 5 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css") rel="stylesheet" />
@* bootstrap-external for Bootstrap 4 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css") rel="stylesheet" />
@*...*@
</head>
@code {
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
Register Client Resources
Open the App.razor file and call the DxResourceManager.RegisterScripts method to register scripts required for DevExpress components.
<head>
@*...*@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
@DxResourceManager.RegisterScripts()
@*...*@
</head>