DevExpress UI Components for Blazor
The DevExpress UI components featured in this demo are available for free download and can be used in your next Blazor app.
Review our GitHub Guide for details on how to set up your environment.
How to run this demo on your machine
- Ensure that you have .NET Core 3 installed.
- Download the "demo" and "tools" directories from the GitHub repository.
- Open demo/BlazorDemo.ServerSide/BlazorDemo.ServerSide.sln in Visual Studio 2019.
-
Go to nuget.devexpress.com, log in or sign up and click Obtain Feed URL. This redirects you to a page's section that displays a development account's NuGet Feed URL.
Register the DevExpress NuGet feed in Visual Studio's NuGet Package Manager.
https://nuget.devexpress.com/{your feed authorization key}/api
See the Setup Visual Studio's NuGet Package Manager topic for more information.
- Start the application.
How to create a new project
Follow the steps below to try our Blazor in your own application.
- Create a new solution using the "Blazor App" template in Visual Studio 2019.
-
Go to nuget.devexpress.com, log in or sign up and click Obtain Feed URL. This redirects you to a page's section that displays a development account's NuGet Feed URL.
Register the DevExpress NuGet feed in Visual Studio's NuGet Package Manager.
https://nuget.devexpress.com/{your feed authorization key}/api
See the Setup Visual Studio's NuGet Package Manager topic for more information.
- Install the "DevExpress.Blazor" NuGet package.
- Build the project.
-
Make sure the following folder is automatically created in your project’s wwwroot directory:
- lib/dx-blazor/
- dx-blazor/.gitignore
- dx-blazor/modules/
- dx-blazor/dx-blazor.js
- dx-blazor/dx-blazor.css
For existing Blazor projects, copy the DevExpress static files from the Lib/dx-blazor folder to the appropriate folder in your project. The Lib/dx-blazor folder is automatically cleared while the project is built and contains static files for an installed nuget package only. Do not store your files here.
-
Link the dx-blazor.js and dx-blazor.css files to your layout’s HEAD section:
- For server-side Blazor, add the lines below to the _Host.cshtml file.
- For client-side Blazor, add the lines below to the Index.cshtml file.
<head> ... <link href="lib/dx-blazor/dx-blazor.css" rel="stylesheet" /> <script src="lib/dx-blazor/dx-blazor.js"></script> </head>
Reference this JavaScript file only because the dx-blazor/dx-blazor.js file is the entry point for DevExpress module files.
-
Register our tag namespace and helper in _Imports.razor file:
@using DevExpress.Blazor
- Your application is ready to use DevExpress UI for Blazor.
Included Demo Modules
- Data Grid
- Pivot Grid
- Charts
- Scheduler
- Data Editors
- Navigation and Layout
- Form Validation