The requested page is not available for the requested platform. You are viewing the content for Default platform.

Configure a Visual Studio Project

  • 3 min to read

Install Required Packages

Perform the following steps to install the Rich Text Editor and Spreadsheet controls' 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 19.1 Local in the Package source drop-down list and go to the Browse page. Locate the control's package and install it.

The following packages are available:

  • DevExpress.AspNetCore.RichEdit
  • DevExpress.AspNetCore.Spreadsheet

Nuget

  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": "19.1.X",
        "devexpress-richedit": "19.1.X"
      }
    }
    
  2. Right-click the package.json file and select Restore Packages. This adds the node_modules directory to the application project.

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

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

  4. For Razor Pages web apps only.

    Disable the AntiForgeryToken option (enabled for Razor Pages web apps by default) if you use a Spreadsheet or save a Rich Text Editor's document server side using the ExportUrl(String) property.

    • To disable the AntiForgeryToken for an application, add the following code to the ConfigureServices method in Startup.cs.
    services.AddMvc().AddRazorPagesOptions(o =>
    {
        o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
    });
    
    • To disable the AntiForgeryToken for a page, add the following code to a page model.
    [IgnoreAntiforgeryToken]
    public class IndexModel : PageModel
    {
        public void OnPost()
        {
        }
    }    
    

Register Static Resources

  1. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace all the views in the project should use.
@using DevExpress.AspNetCore
  1. Create or open an existing view (for example, the Index.cshtml file), and register the resources in a header section as shown below:
<script src="~/node_modules/jszip/dist/jszip.min.js" type="text/javascript"></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/devextreme/dist/js/dx.all.js"></script>

<link href="~/node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" />

<script src="~/node_modules/devexpress-richedit/dist/dx.richedit.js"></script>