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

Perform 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"
    }
}

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"
        });         
    }
}

[C#]
@using DevExpress.AspNetCore

[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.