Create a Blazor Web App

• Jan 14, 2026
• 3 minutes to read

This help topic contains step-by-step instructions on how to create and run a Blazor Server web application with DevExpress components in Visual Studio.

Create and Run a Project

Note

This help topic applies to Visual Studio 2022. Steps may vary slightly in other versions.

1. Open Visual Studio and click File → New → Project….
2. In the Create a new project dialog, search for DevExpress Template Kit.

3. Select the DevExpress v25.2 Template Kit template.

   

4. Click the Next button.

5. Specify the project name and location.
6. Click the Create button.

7. Click Blazor in the left pane of the Template Kit window.

   

8. Click the Create Project button.

9. Press F5 to run your new Blazor application.

Visual Studio builds the project and automatically opens the app’s home page in a web browser.

Add a DevExpress Blazor Component to the App

To get acquainted with the project structure, add a simple DevExpress Blazor component (Calendar) to the app and see it in action:

1. Create a new Razor Component (.razor file) under Components → Pages in the Solution Explorer. Name the file Calendar.razor.
2. Open the Calendar.razor component and remove all autogenerated content to start from scratch.

3. Define a component as a routable page that can handle requests from http://localhost:####/calendar. Use the following directive:

   @page "/calendar"
   

4. The DevExpress Calendar for Blazor does not support static render mode. Enable interactivity:

   @rendermode InteractiveServer
   

5. Add a page title and heading text:

   <PageTitle>Calendar</PageTitle>
   <h1>Calendar</h1>
   

6. Add the DxCalendar component to the page. Bind the component to the SelectedDate variable to test interactivity.

   <DxCalendar @bind-SelectedDate="@SelectedDate" />
   
   <p><b>Selected date:</b> @SelectedDate.ToLongDateString()</p>
   
   @code {
       DateTime SelectedDate { get; set; } = DateTime.Now;
   }
   

7. Add a link to the page in the application’s sidebar. Open the Components → Layout → NavMenu.razor file and add a new DxMenuItem:

   <DxMenuItem NavigateUrl="/calendar"
               Text="Calendar"
               CssClass="@MenuItemCssClass("/calendar")"
               IconCssClass="icon icon-demos" />
   

8. Press F5 to run your Blazor application and switch to Calendar.

   

Full code:

Calendar.razor

@page "/calendar"
@rendermode InteractiveServer

<PageTitle>Calendar</PageTitle>
<h1>Calendar</h1>

<DxCalendar @bind-SelectedDate="@SelectedDate" />

<p><b>Selected date:</b> @SelectedDate.ToLongDateString()</p>

@code {
    DateTime SelectedDate { get; set; } = DateTime.Now;
}

NavMenu.razor

@inject NavigationManager NavigationManager
@implements IDisposable

<div>
    <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
        <Items>
            <DxMenuItem NavigateUrl="/"
                        Text="Home"
                        CssClass="@MenuItemCssClass("/")"
                        IconCssClass="icon icon-home"></DxMenuItem>
            <DxMenuItem NavigateUrl="/counter"
                        Text="Counter"
                        CssClass="@MenuItemCssClass("/counter")"
                        IconCssClass="icon icon-counter"></DxMenuItem>
            <DxMenuItem NavigateUrl="/weather"
                        Text="Weather"
                        CssClass="@MenuItemCssClass("/weather")"
                        IconCssClass="icon icon-weather"></DxMenuItem>
            <DxMenuItem NavigateUrl="/calendar"
                        Text="Calendar"
                        CssClass="@MenuItemCssClass("/calendar")"
                        IconCssClass="icon icon-demos" />
        </Items>
    </DxMenu>
</div>

@code {
    private string? currentLocalPath;

    protected override void OnInitialized() {
        currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e) {
        currentLocalPath = new Uri(NavigationManager.Uri).LocalPath;
        InvokeAsync(StateHasChanged);
    }

    private string? MenuItemCssClass(string itemPath) {
        return string.Equals(currentLocalPath, itemPath,
            StringComparison.OrdinalIgnoreCase) ? "menu-item-active" : null;
    }

    public void Dispose() {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}