Configure a Visual Studio Project

• Jul 07, 2022
• 2 minutes to read

Install Required Packages

Perform the following steps to install the Spreadsheet control’s NuGet packages:

1. Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the invoked context menu.

   

2. Select DevExpress 21.2 Local in the Package source drop-down list and go to the Browse page. Locate the DevExpress.AspNetCore.Spreadsheet package and install it.

   

Configure the Project

1. Right-click the application’s name in the Solution Explorer and select Add | Add New Item. In the invoked Add New Item dialog, select the Installed | Visual C# | ASP.NET Core | Web category and the npm Configuration File item template. Click Add.

   

   This adds the package.json file to the project. Open this file and add the following dependencies:

   JS

   {
     "version": "1.0.0",
     "name": "asp.net",
     "private": true,
     "dependencies": {
       "devextreme": "21.2.15",
       "devexpress-aspnetcore-spreadsheet": "21.2.15"
     }
   }
   

2. Right-click the package.json file and select Restore Packages. This adds the node_modules directory to the application folder.

3. Add the following code to the Startup.cs (for .NET 3.1 and .NET 5.0) or Program.cs (for .NET 6.0) file to configure the application, so that it can serve the node_modules directory’s files:

   Program.cs

   using Microsoft.Extensions.FileProviders;
   using Microsoft.AspNetCore.Mvc;
       //...
   app.UseStaticFiles();
   app.UseStaticFiles(new StaticFileOptions {
       FileProvider = new PhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath, "node_modules")),
       RequestPath = "/node_modules"
   });
   

   Startup.cs

   using Microsoft.Extensions.FileProviders;
   using System.IO;
   //...
   
   public class Startup {
   //...
       public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
           // ...
           app.UseStaticFiles();
           app.UseStaticFiles(new StaticFileOptions {
               FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules")),
               RequestPath = "/node_modules"
           });
       }
   }
   

   Note that the code above makes all the files in the node_modules directory accessible from the client. To restrict access, bundle and minify assets (for example, using Gulp).

Register Static Resources

1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace that all views in the project should use.

   @using DevExpress.AspNetCore
   

2. Create or open an existing view (for example, the Index.cshtml file), and register the resources in the header section as shown below.

   HTML

   <script src="~/node_modules/devextreme/dist/js/dx.all.js"></script>
   <link href="~/node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
   
   @* If you localize the control, you should register localization resources before the control script registration.*@
   <script src="~/node_modules/devexpress-aspnetcore-spreadsheet/localization/dx-spreadsheet.de.js"></script>
   
   <script src="~/node_modules/devexpress-aspnetcore-spreadsheet/dist/dx-aspnetcore-spreadsheet.js"></script>
   <link href="~/node_modules/devexpress-aspnetcore-spreadsheet/dist/dx-aspnetcore-spreadsheet.css" rel="stylesheet" />