All docs
V21.1
21.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Migrate from ASP.NET Core 2.0+ to ASP.NET Core 3.1 Dashboard Application

  • 3 minutes to read

The following migration guide explains how to update an ASP.NET Core 2.2 Dashboard application to ASP.NET Core 3.1.

Prerequisites

Update the Project File

ASP.NET Core 3.1 and later only run on .NET Core and no longer supports a large number of NuGet packages. Update the target framework to netcoreapp3.1 and remove obsolete package references (for example, Microsoft.AspNetCore.App).

<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>netcoreapp2.1</TargetFramework>
    </PropertyGroup>
    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.App" />
        <PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="21.1.5" />
        <PackageReference Include="Newtonsoft.Json" Version="12.0.2" />
        <PackageReference Include="System.Data.SQLite.Core" Version="1.0.108" />
        <PackageReference Include="BuildBundlerMinifier" Version="3.2.435" />
    </ItemGroup>
    <ItemGroup>
        <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
    </ItemGroup>
</Project>

Disable Automatic Scripts and Styles Integration

Remove the @Html.DevExpress().StyleSheets() and @Html.DevExpress().Scripts() methods in the View to disable automatic scripts and styles integration.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Remove the line below. -->
    @Html.DevExpress().StyleSheets(config => config.AddDashboard(cssSettings => cssSettings.ColorScheme("light")))
</head>
<body>
    <div style="position: absolute; left:0;top:0;right:0;bottom:0;">
        @(Html.DevExpress().Dashboard("clientDashboardControl1")
        .WorkingMode(WorkingMode.Designer)
        .Width("100%")
        .Height("100%")
        )
    </div>
    <!-- Remove the line below. -->
    @Html.DevExpress().Scripts()
</body>
</html>

Integrate Scripts and Styles

Install npm Packages

Install the latest version of the npm packages listed below:

Bundle the Scripts and Styles

Bundle the resources before add them to the View page. Install the BuildBundlerMinifier NuGet package and create the bundleconfig.json file with the following content:

[
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            "node_modules/devextreme/dist/css/dx.light.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
            "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
        ],
        "minify": { "enabled": false, "adjustRelativePaths": false }
    },
    {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
            "node_modules/jquery/dist/jquery.min.js",
            "node_modules/jquery-ui-dist/jquery-ui.min.js",
            "node_modules/knockout/build/output/knockout-latest.js",
            "node_modules/ace-builds/src-min-noconflict/ace.js",
            "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
            "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
            "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
            "node_modules/devextreme/dist/js/dx.all.js",
            "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
            "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
            "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
        ],
        "minify": {
            "enabled": false
        },
        "sourceMap": false
    }
]

Attach the Bundled Resources

Attach the bundled resources to the View page.

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Dashboard Web Application</title>
    <!-- Attach the bundled CSS files and scripts. -->
    <link href="css/site.min.css" rel="stylesheet" />
    <script src="js/site.min.js"></script>
    <!-- ... -->
</head>
<body>
    <div style="position: absolute; left:0;top:0;right:0;bottom:0;">
        @(Html.DevExpress().Dashboard("clientDashboardControl1")
        .WorkingMode(WorkingMode.Designer)
        .Width("100%")
        .Height("100%")
        )
    </div>
</body>
</html>

Change the Routing Type

Change routing at the MVC level to endpoint routing.

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
    } else {
        app.UseExceptionHandler("/Home/Error");
    }
    app.UseStaticFiles();
    // Register the DevExpress middleware.
    app.UseDevExpressControls();
    app.UseMvc(routes => {
        // Map dashboard routes.
        routes.MapDashboardRoute("api/dashboard");
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}
TIP

To update an ASP.NET Core 3.1 project to ASP.NET Core 5.0, set the TargetFramework value to net5.0. The other settings remain the same as for ASP.NET Core 3.1. See the following Microsoft migration guide for more information: Migrate from ASP.NET Core 3.1 to 5.0

See Also