Skip to main content
BuyLog In
Blazor
Search in…
Docs > Get Started > Install Components and Create an Application > Alternative Install Methods > Microsoft Templates (Visual Studio)
A newer version of this page is available. .
All docs
V20.2
Blazor Components
Get Started
Prerequisites
Install Components and Create an Application
DevExpress .NET Product Installer
Alternative Install Methods
DevExpress Templates (Visual Studio)
DevExpress Templates (CLI)
Microsoft Templates (Visual Studio)
Microsoft Templates (CLI)
Demos
Videos
Common Concepts
Data Grid
Pivot Grid
Charts
Reports
Scheduler
Data Editors
Buttons
Navigation and Layout
File Management
Rich Text Editor
API Reference
Download CHM

Microsoft Templates (Visual Studio)

  • 4 minutes to read

Important

Ensure your system meets these requirements.

This topic describes how to:

Note

These instructions are also available in the following videos:

1. Create a New Project

The steps below describe how to create a new Blazor project. If you want to add DevExpress Blazor components to an existing application, go to Step 2.

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

    GettingStarted Create a New Project

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

    GettingStarted Configure a New Project

  3. Select a template and click Create.

    **Blazor Server App**

    Blazor Server App

    **Blazor WebAssembly App**

    Blazor WebAssembly App

2. Obtain Your DevExpress NuGet Feed

You need to obtain your personal NuGet feed URL to access the DevExpress.Blazor NuGet package from your project.

  1. Make sure your DevExpress.com account has access to Blazor UI Components. This product line is available as part of the Universal, DXperience, or ASP.NET subscription. Refer to the subscription comparison matrix for more information.

  2. Use your DevExpress credentials to log into nuget.devexpress.com.

  3. Obtain your NuGet feed URL and copy it to the clipboard.

    NuGet Feed

    You can find the same URL in the Download Manager.

3. Install the DevExpress Blazor NuGet Package

  1. In Visual Studio, select Tools -> NuGet Package Manager -> Package Manager Settings.

    GettingStarted Package Manager Settings

  2. Navigate to NuGet Package Manager -> Package Sources. Click the plus sign at the top right corner to add a new NuGet package source. Use the following package settings:

    • Name - DevExpress

    • Source - the obtained NuGet Feed URL (https://nuget.devexpress.com/{your feed authorization key}/api)

    Click OK.

    GettingStarted NuGet Feed API

    Note

    Make sure the nuget.org package source is also enabled.

  3. Select Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution.

  4. In the invoked dialog, open the Browse tab, select the created DevExpress package source, and install the DevExpress.Blazor NuGet package.

    GettingStarted Install Package

  5. Build the project.

4. Register DevExpress Resources

Blazor Server

  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. DevExpress Blazor components use an RCL (Razor class library) with static assets to share resources. 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.

Blazor WebAssembly

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

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

    @using DevExpress.Blazor

  4. Configure the linker as described in the following topic: Configure the Linker for ASP.NET Core Blazor.

    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.

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

5. Add DevExpress Blazor Components

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