Add DevExpress Components to an Application
- 4 minutes to read
This topic describes how to run a Blazor application and how to integrate DevExpress Blazor components into pages. Instructions for different application types and platforms are included.
Run the Application
Press F5 in Visual Studio. You can also run Blazor applications in the .NET CLI with the following commands:
Blazor App for .NET 6 or .NET 7:
cd MyBlazorServerApp dotnet runBlazor App for .NET 8 or .NET 9:
cd MyBlazorInteractiveServerApp dotnet run
The command output contains the application URL, which can differ depending on the host:
Now listening on: http://localhost:5000
Open your browser and navigate to the URL to see the result. The following image shows the application created from the DevExpress project template:
Add Components to Blazor Web and MAUI Projects
Add DevExpress Blazor components to any .razor file. For .NET 8 and .NET 9 projects, enable interactivity for DevExpress components:
Make sure the required interactive services are registered.
Add an appropriate render mode attribute to a component’s page.
The following code demonstrates how to add a DxCalendar component to a Razor page:
@page "/"
<DxCalendar @bind-SelectedDate="@SelectedDate" />
@code{
DateTime SelectedDate { get; set; } = DateTime.Now;
}
Add Components to Blazor WinForms and Blazor WPF Projects
Create a MyComponent.razor page in the project root. Add DevExpress Blazor components (such as DxGrid and DxButton) to this page.
@using System.Collections.ObjectModel
<DxButton Text="Add New Day"
Click="(e) => AddNewForecast()" />
<p />
<DxGrid Data="@WeatherForecastData">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" />
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
<DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" />
</Columns>
</DxGrid>
@code {
public class WeatherForecast {
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
public string Forecast { get; set; }
public string CloudCover { get; set; }
public bool Precipitation { get; set; }
}
int DayCount { get; set; } = 0;
ObservableCollection<WeatherForecast> WeatherForecastData { get; set; }
static readonly Random Rnd = new Random();
protected override void OnInitialized() {
WeatherForecastData = new ObservableCollection<WeatherForecast>();
foreach (var date in Enumerable.Range(1, 5).Select(i => DateTime.Now.Date.AddDays(i))) {
AddNewForecast();
}
}
void AddNewForecast() {
WeatherForecastData.Add(new WeatherForecast() {
Date = DateTime.Now.Date.AddDays(++DayCount),
TemperatureC = Rnd.Next(10, 20)
});
}
}
Replace the default Counter component with a component that contains DevExpress Blazor components:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using DevExpress.Blazor;
namespace WinFormsBlazorApp1 {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
//blazorWebView1.RootComponents.Add<Counter>("#app");
blazorWebView1.RootComponents.Add<MyComponent>("#app");
}
}
}
Included Components
For instructions on how to add an individual DevExpress Blazor component to your application, refer to the class descriptions linked below:
Next Step
The default render mode for most DevExpress Blazor components is interactive. If your application renders content in static server-side render mode (static SSR), proceed to the following step: