Getting Started with the Spreadsheet for ASP.NET Core (CTP)

This tutorial describes how to add the ASP.NET Core Spreadsheet control to an ASP.NET Core application.

Install required packages

Perform the following steps to install a Spreadsheet's NuGet package:

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

    Solution Explorer

  2. Select DevExpress 18.2 Local in the Package source drop-down list and go to the Browse page. Enable the Include prerelease checkbox, 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:

        "version": "1.0.0",
        "name": "",
        "private": true,
        "dependencies": {
            "devexpress-aspnetcore-spreadsheet": "~18.2.3"
  4. Right-click the package.json file and select Restore Packages. This adds the node_modules folder to the application project.

  5. Add the following code to the Startup.cs file to configure the application so that it can serve the node_modules folder's files:

        using Microsoft.Extensions.FileProviders;
        using System.IO;
        public class Startup {
            public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
                // ...
                // ...
                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 folder accessible from the client. To make only required files accessible, use bundling and minification by the means of Gulp, as an example.

Add the Spreadsheet Control

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

  1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace to be used by all views in the project. Alternatively, you can add this namespace to the views with Spreadsheet.
@using DevExpress.AspNetCore
  1. Create a new view or open an existing one (for example, the Index.cshtml file), and register the required resources by adding the following scripts to a header section:
<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" />
  1. 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:
public class HomeController : Controller
    public ContentResult DxDocRequest() {
        return SpreadsheetRequestProcessor.GetResponse(HttpContext);
     /// ...
  1. Use the Spreadsheet in this view to display the Spreadsheet control on a web page: