Register DevExpress Blazor Resources
- 4 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 following files:
- Components/App.razor for Blazor Web applications
- wwwroot/index.html for hybrid applications
Add a link to your theme to this file (see sections below for examples).
We recommend that you refresh cached resources on user machines to avoid rendering issues. For example, you can add a file version to a theme link as follows:
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
@code {
private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}
Note: Blazor hybrid applications use the BlazorWebView component to render Razor markup. Since this component does not retain the browser cache between application sessions, you may omit this step. If you still wish to implement this solution, make sure that you move the theme link into a Razor component.
You can find another solution that uses IFileVersionProvider in applications generated by our project templates.
Such techniques ensure that web browsers on user machines use the current 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. For example, to apply the Blazing Berry theme, add a link to a stylesheet before the site.css or app.css and <ProjectName>.styles.css links.
<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) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}
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.
<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) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}
Register Client Resources
Open the App.razor file and call the DxResourceManager.RegisterScripts method to register scripts required for DevExpress components.
Omit this step if you created a hybrid project. Our Blazor components obtain scripts for interaction automatically.
<head>
@*...*@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
@DxResourceManager.RegisterScripts()
@*...*@
</head>