Version: 19.1.8.0
Copyright © 2006-2019 Developer Express Inc

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

  1. Ensure that you have .NET Core 3 installed.
  2. Download the "demo" and "tools" directories from the GitHub repository.
  3. Open demo/BlazorDemo.ServerSide/BlazorDemo.ServerSide.sln in Visual Studio 2019.

  4. 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.

  5. Start the application.
See also:

How to create a new project

Follow the steps below to try our Blazor in your own application.

  1. Create a new solution using the "Blazor App" template in Visual Studio 2019.

  2. 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.

  3. Install the "DevExpress.Blazor" NuGet package.
  4. Build the project.

  5. 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.

  6. 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.

  7. Register our tag namespace and helper in _Imports.razor file: 
    
@using DevExpress.Blazor
  8. Your application is ready to use DevExpress UI for Blazor.
See also:

Included Demo Modules