How to add the Spreadsheet to an ASP.NET Core Application - v18.2 Beta Release Notes

Install Required PackagesPerform the following steps to install the NuGet packages required for the Spreadsheet control:

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

2. Select DevExpress 18.2 Local in the Package source drop-down list and go to the Browse page. Enable the Include pre-release check box, find the DevExpress.AspNetCore.Spreadsheet package and install it.

3. Right-click the application 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:

[JavaScript]
{  
    "version": "1.0.0",  
    "name": "asp.net",  
    "private": true,  
    "dependencies": {  
        "devexpress-aspnetcore-spreadsheet": "~18.2.2"  
    }  
}

Note:
Starting with version 19.1 you need to also load corresponding DevExtreme scripts by adding the following dependencies:

[JavaScript]
{  
  "version": "1.0.0",  
  "name": "asp.net",  
  "private": true,  
  "dependencies": {  
    "devextreme": "19.1.5",  
    "devexpress-aspnetcore-spreadsheet": "19.1.5"  
  }  
}

See also:
Configure a Visual Studio Project

4. Right-click the package.json file and select Restore Packages. This adds the node_modules folder to the application project.
5. Publish the node_modules folder's static files to the site. You can add the following code to the Startup.cs  file and make the whole node_modules  folder accessible from the client. To make only required client resources accessible, use bundling and minification by the means of Gulp, as an example.

[C#]
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"  
        });  
    }  
}

Add the Spreadsheet Control
Do the following to integrate the Spreadsheet control into the ASP.NET Core project:

1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace to be used by all other Views. Alternatively, you can add this namespace to the Views with Spreadsheet.

[C#]
@using DevExpress.AspNetCore

2. Create a new View or open an existing one (for example, the Index.cshtml file), and register the following required resources into a header section:

[HTML]
<script src="~/node_modules/devextreme/dist/js/dx.all.js"></script>  
  
<link href="~/node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />  
<link href="~/node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />  
  
<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" />

3. Create a new Controller or open an existing one (for example, the HomeController.cs file), and add an action that handles document commands as shown below:

[C#]
public class HomeController : Controller  
{  
    [HttpPost]  
    public ContentResult DxDocRequest() {  
        return SpreadsheetRequestProcessor.GetResponse(HttpContext);  
     }  
     /// ...  
}

4. Use the Spreadsheet in this View to display the Spreadsheet control on a web page:

[C#]
@(Html.DevExpress()  
    .Spreadsheet("spreadsheet")  
    .DocumentRequestHandlerUrl(Url.Action("DxDocRequest")))

Note, that It is required to specify an URL to the action that handles document commands.