Migrate from ASP.NET Core 2.0+ to ASP.NET Core 3.0 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.0.
Prerequisites
- .NET Core 3.0 SDK or later
- Visual Studio 2019 with the ASP.NET and web development workload
Update the Project File
ASP.NET Core 3.0 and later only run on .NET Core and no longer supports a large number of NuGet packages. Update the target framework to netcoreapp3.0 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="19.2.3-beta" />
<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:
Tip
See also: package.json configuration
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.common.css",
"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.js",
"node_modules/jquery-ui-dist/jquery-ui.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.
- Change the env parameter type from IHostingEnvironment to IWebHostEnvironment.
- Call the EndpointRoutingApplicationBuilderExtensions.UseEndpoints method instead of MvcApplicationBuilderExtensions.UseMvc.
- Use the EndpointRouteBuilderExtension.MapDashboardRoute method instead of RouteBuilderExtension.MapDashboardRoute.
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?}");
});
}
See Also