Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started > Microsoft Templates (DevExpress Installation)
A newer version of this page is available. .
All docs
V21.2
Blazor Components
Prerequisites
Supported Browsers
Get Started
DevExpress Templates (DevExpress Installation)
DevExpress Templates (NuGet Packages)
DevExpress Templates (NuGet CLI)
Microsoft Templates (DevExpress Installation)
Microsoft Templates (NuGet Packages)
Microsoft Templates (NuGet CLI)
Troubleshooting
Demos
Videos
Common Concepts
Grid
Pivot Grid
Charts
Reports
Scheduler
Rich Text Editor
Data Editors
Buttons
Navigation and Layout
File Management
Dashboard
XAF (App UI & Security API)
Maintenance Mode
API Reference
Download CHM

Microsoft Templates (DevExpress Installation)

  • 4 minutes to read

Important

  1. Ensure your system meets these requirements.
  2. Use the DevExpress .NET Product Installer to install DevExpress Blazor components.

This topic describes how to:

  • Use Microsoft templates to create a Blazor project
  • Configure the project to use DevExpress components
  • Add DevExpress components

1. Create a New Project

This section describes how to create a new Blazor project. If you want to add DevExpress Blazor components to an existing application, you can skip these steps and navigate to the next section.

  1. Click Create a new project on Visual Studio’s start page, select the Blazor Server App or Blazor WebAssembly App template, and click Next.

    Getting Started - Create a New Project

  2. Specify the project name and location, and click Next.

    Getting Started - Configure a New Project

  3. Specify additional options, and click Create.

    **Blazor Server App**

    Blazor Server App

    **Blazor WebAssembly App**

    Blazor WebAssembly App

2. Install the DevExpress Blazor NuGet Package

  1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

  2. In the invoked dialog, open the Browse tab, select the DevExpress 21.2 Local package source, and install the DevExpress.Blazor NuGet package.

    The DevExpress 21.2 Local package is automatically added as a package source to your NuGet configuration files if you use the DevExpress .NET Product Installer.

    Install Package

  3. Build the project.

3. Register DevExpress Resources

Blazor Server in .NET 6.0

  1. Add the following line to the Pages/_Layout.cshtml file’s HEAD section: 

    <head>
    @* ... *@
    <link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />
</head>

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. Call the AddDevExpressBlazor method in the Program.cs file.

    builder.Services.AddDevExpressBlazor();
  4. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

Blazor Server in .NET 5.0

  1. Add the following line to the Pages/_Host.cshtml file’s HEAD section: 

    <head>
    @* ... *@
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
</head>

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. Call the UseStaticWebAssets method on the host builder in the Program.cs file to enable the application to load client-side resources. 

    public class Program {
    // ...

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder => {
                webBuilder.UseStartup<Startup>();
                webBuilder.UseStaticWebAssets();
            });
}

    Refer to the following topics for more information: Consume content from a referenced RCL and Troubleshooting: Failed to load resource.

  4. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

  5. (Optional) Configure the project to use Bootstrap v5. Refer to the BootstrapVersion property description for more information.

Blazor WebAssembly in .NET 6.0

  1. Add the following line to the wwwroot/index.html file’s HEAD section: 

    <head>
    @* ... *@
    <link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />
</head>

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. Call the AddDevExpressBlazor method in the Program.cs file.

    builder.Services.AddDevExpressBlazor();

  4. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

Note

If you enabled the ASP.NET Core hosted option when you create the project, make sure that the server-side project is set as the solution’s startup project.

Blazor WebAssembly in .NET 5.0

  1. Add the following line to the wwwroot/index.html file’s HEAD section: 

    <head>
    @* ... *@
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
</head>

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project’s Program.Main() method:

    using Microsoft.Extensions.DependencyInjection;

public class Program {
    public static async Task Main(string[] args) {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        // ...
        builder.Services.AddDevExpressBlazor();
        await builder.Build().RunAsync();
    }
}

  4. (Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

  5. (Optional) Configure the project to use Bootstrap v5. Refer to the BootstrapVersion property description for more information.

Note

If you enabled the ASP.NET Core hosted option when you create the project, make sure that the server-side project is set as the solution’s startup project.

4. Add DevExpress Blazor Components

For instructions on how to add an individual DevExpress Blazor component to your application, refer to the documents below: