Microsoft Templates (CLI)
- 4 minutes to read
Important
Ensure your system meets these requirements.
This topic describes how to:
- Use Microsoft templates to create a Blazor project from .NET Core CLI
- Install the DevExpress.Blazor NuGet package that includes DevExpress components
- Add DevExpress components to a project
1. Create a New Project
Run one of the following commands to create a project:
Blazor Server App
dotnet new blazorserver -o MyBlazorServerProject cd MyBlazorServerProject
Blazor WebAssembly App
dotnet new blazorwasm -o MyBlazorWasmProject cd MyBlazorWasmProject
Blazor Hosted WebAssembly App
dotnet new blazorwasm -ho -o MyBlazorWasmHostedProject cd MyBlazorWasmHostedProject
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.
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.
Use your DevExpress credentials to log into nuget.devexpress.com.
Obtain your NuGet feed URL and copy it to the clipboard.
You can find the same URL in the Download Manager.
3. Register the NuGet Feed as a Package Source
Add the feed as a package source to your NuGet configuration files.
dotnet nuget add source https://nuget.devexpress.com/{your-feed-url}/api -n DevExpress
An error can occur if the specified source is already in the source list. Run dotnet nuget list source
to view all the configured sources. Make sure that the specified source and the nuget.org
package source are enabled. To enable them, use the dotnet nuget enable source
command.
4. Install the DevExpress Blazor NuGet Package
Run the following commands to add the DevExpress.Blazor NuGet package to the newly created application:
dotnet add package DevExpress.Blazor
dotnet restore
5. Register DevExpress Resources
Blazor Server
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>
Register the DevExpress.Blazor namespace in the
_Imports.razor
file:@using DevExpress.Blazor
DevExpress Blazor components use an RCL (Razor class library) with static assets to share resources. Call the
UseStaticWebAssets
method on the host builder in theProgram.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.
(Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.
Blazor WebAssembly
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>
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(); } }
Register the DevExpress.Blazor namespace in the
_Imports.razor
file:@using DevExpress.Blazor
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.
(Optional) Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.
6. Add DevExpress Blazor Components
Add DevExpress Blazor components to any .razor file in the Pages
folder. For example, the following code demonstrates how to add a DxCalendar component to Pages/Index.razor
:
@page "/"
<DxCalendar @bind-SelectedDate="@SelectedDate" />
@code{
DateTime SelectedDate { get; set; } = DateTime.Now;
}
The following help topics contain information on how to add different DevExpress Blazor components:
- Data Grid
- Pivot Grid
- Chart
- Reports
- Scheduler
Data editors
- Button
Navigation and Layout components
- Upload
- Rich Text Editor
7. Run the Application
Run a Server or WebAssembly application:
dotnet run
Run a hosted WebAssembly application:
cd Server
dotnet run
The project starts listening on https://localhost:5000. Open it in the browser.