Skip to main content

Configure a Visual Studio Project

  • 3 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.

    Solution Explorer

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

    Nuget

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.

    Nuget

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

    {
      "version": "1.0.0",
      "name": "asp.net",
      "private": true,
      "dependencies": {
        "devextreme": "22.1.3",
        "devexpress-aspnetcore-spreadsheet": "22.1.3"
      }
    }
    
  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:

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

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

Configure Razor Pages web apps

If you use a Spreadsheet in a Razor Pages web app, it is necessary to add the following adjustments:

  1. Disable the AntiForgeryToken option.

    • To disable the AntiForgeryToken for an application, add the following code in the Startup.cs (for .NET 3.1 and .NET 5.0) or Program.cs (for .NET 6.0) file:
    builder.Services.AddMvc().AddRazorPagesOptions(o => {
        o.Conventions.ConfigureFilter(new Microsoft.AspNetCore.Mvc.IgnoreAntiforgeryTokenAttribute());
    });
    
    • Add the following code to a page model to disable the AntiForgeryToken for a page:
    [IgnoreAntiforgeryToken]
    public class IndexModel : PageModel {
        public void OnPost() {
        }
    }    
    
  2. Add the following code to the app.UseEndpoints function to access an MVC Controller action in Razor Pages.

    app.UseEndpoints(endpoints => {
        endpoints.MapRazorPages();
        endpoints.MapControllerRoute(name: "default", pattern: "{controller=Spreadsheet}/{action=Index}/{id?}");
    });
    
  3. Declare a POST action handler in the SpreadsheetController controller.

    public class SpreadsheetController : Controller {
        [HttpPost]
        [HttpGet]
        public IActionResult OnPostDocumentRequest() {
            return SpreadsheetRequestProcessor.GetResponse(HttpContext);
        }
    }
    
  4. Use this handler in the DocumentRequestHandlerUrl(String) method as follows.

    @(Html.DevExpress().Spreadsheet("spreadsheet")
        .DocumentRequestHandlerUrl(Url.Action("OnPostDocumentRequest", "Spreadsheet"))
        //...
    )
    

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.

    <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" />