Skip to content
DevExpress UI for Blazor
Branch: master
Clone or download
Latest commit e02af60 Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client-runtime Update to 0.0.9 Jun 10, 2019
demo Update to 0.0.10 - Blazor Preview 6 Support Jun 14, 2019
media Update to 0.0.8 Jun 3, 2019
LICENSE.md Update LICENSE.md May 6, 2019
README.md Update README.md Jun 14, 2019
changelog.md Update to 0.0.10 - Blazor Preview 6 Support Jun 14, 2019

README.md

DevExpress UI for Blazor

This project demonstrates the Preview (CTP) version of 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.*

* Like any software preview, the DevExpress UI for Blazor is not without fault. You should not use these products in production environments or in mission-critical applications.

Live Demo

  Check out this demo in live.

Version compatibility

The following table describes the version compatibility of .NET Core 3.0 Preview and the DevExpress.Blazor NuGet package.

.NET Core 3.0 version DevExpress.Blazor.nuget version
.NET Core 3.0 Preview 6 0.0.10
.NET Core 3.0 Preview 5 0.0.9
.NET Core 3.0 Preview 5 0.0.8
.NET Core 3.0 Preview 5 0.0.7
.NET Core 3.0 Preview 5 0.0.6
.NET Core 3.0 Preview 5 0.0.5
.NET Core 3.0 Preview 4 0.0.4
.NET Core 3.0 Preview 3 0.0.3

Set up your environment

  1. Install Visual Studio 2019 (latest update).
  2. Ensure that you have .NET Core 3 (preview 4) installed.
  3. If you work with the release version of Visual Studio 2019, make sure to enable the option "Use previews of the .NET Core SDK".

The corresponding check box's location depends on the Visual Studio build number. You can find the check box here:

Create New ASP.NET Core Web Application Project"

or here:

Create New ASP.NET Core Web Application Project"

How to run this demo locally

The Blazor framework uses either WebAssembly-based .NET runtime (client-side Blazor) or server-side ASP.NET Core (server-side Blazor). Our Blazor components support both of these approaches.

You can find appropriate demos in the repositories below:

  • demo/BlazorDemo.ServerSide
  • demo/BlazorDemo.ClientSide

To open the required demo, do the following:

  1. Download the "demo" folder from the proper repository.

  2. Use Visual Studio 2019 to open the solution file:

    demo/BlazorDemo.ServerSide/BlazorDemo.ServerSide.sln

    or

    demo/BlazorDemo.ClientSide/BlazorDemo.ClientSide.sln

  3. Start the application.

See also:

Official Microsoft Blazor site

How to create a new project

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

  1. Create a new solution using the "Blazor (server-side)" or "Blazor" template in Visual Studio 2019.

In the "Create a new project" dialog select "ASP.NET Core Web Application (where the language is C#).

Create New ASP.NET Core Web Application Project"

In the next step ensure that an "ASP.NET Core 3.*" framework is selected, and select the "Blazor (server-side)" project template.

Create New ASP.NET Core Web Application Project"

  1. Register the DevExpress Early Access feed in Visual Studio's NuGet Package Manager.

Open the "Package Manager Settings".

Open the "Package Manager Settings"

Add new NuGet source:

https://nuget.devexpress.com/early-access/api

Add new NuGet source

  1. Install the "DevExpress.Blazor" NuGet package.

    Navigate to:

    Add new NuGet source

    Select the "Early Access" NuGet package source you have just created in the "Package source" combo box.

    Make sure that the "Include prerelease" option is selected.

    Install the "DevExpress.Blazor" NuGet package.

    Add new NuGet source

  2. Navigate to the GitHub repository and download all files from the "client-runtime" directory. Put the downloaded files into the "wwwroot" directory of your project. Include these files to your start page.

  3. Register our namespace in _Imports.razor file:

@using DevExpress.Blazor
  1. Your application is ready to use DevExpress Blazor.

Troubleshooting

1. DxDataGrid in Blazor

If you use Blazor (client-side) with DxDataGrid, you may see the following exception in a browser:

Troubleshooting - No Generic Method 'Take' On Type System.Linq.Queryable

"System.InvalidOperationException: No generic method 'Take' on type 'System.Linq.Queryable' is compatible with the supplied type arguments and arguments."

The solution is to follow the official Blazor documentation.

So, you can either Disable linking or Control linking.

In case you decide to control linking: the following types types must be added in the Linker.xml file:

    <type fullname="System.Linq.Expressions*" />
    <type fullname="System.Linq.Queryable*" />
    <type fullname="System.Linq.Enumerable*" />
    <type fullname="System.Linq.EnumerableRewriter*" />

So, the Linker.xml file should look as follows:

<?xml version="1.0" encoding="UTF-8" ?>
...
<linker>
  <assembly fullname="mscorlib">
...
    <type fullname="System.Threading.WasmRuntime" />
  </assembly>
  <assembly fullname="System.Core">
...
    <type fullname="System.Linq.Expressions*" />
    <type fullname="System.Linq.Queryable*" />
    <type fullname="System.Linq.Enumerable*" />
    <type fullname="System.Linq.EnumerableRewriter*" />
  </assembly>
...
  <assembly fullname="[PUT YOUR ASSEMBLY NAME HERE]" />
</linker>

2. The "Early Access" NuGet Feed is empty in Visual Studio

If you don't see packages in the https://nuget.devexpress.com/early-access/api NuGet feed, make sure that the "Include prerelease" option is selected: Include prerelease

Included Demo Modules

  • Data Grid
    • Column Types
    • Templates
    • Large Datasets
  • Pivot Grid
    • Data Binding Basics
    • Templates
    • Large Datasets
  • Tabs
  • Form Layout
  • Form Validation
  • Data Editors
    • Combo Box – Business Object List
    • Combo Box – Cascading Lists
    • Date Edit
    • Spin Edit
    • Text Box
  • Pager

NuGet Package Change Log

Check out thе NuGet package's version history.

You can’t perform that action at this time.