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:
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 and enable interactivity:
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 "/"
@rendermode InteractiveServer
<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: