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

Configure a non Visual Studio Project

  • 6 min to read

You can develop your ASP.NET Core application without Visual Studio, for example, on MacOS, Linux, using Visual Studio Code or CLI tools.

To configure your project to use DevExtreme-based controls, follow the steps below.

Install Server-Side Packages

  1. Open the console and navigate to your project's directory:

    cd MyProject
    
  2. Add one of the following NuGet package sources:

    • DevExpress NuGet Feed

      Obtain your NuGet feed URL and run the following command. If nuget is not recognized, follow these instructions to install the NuGet CLI.

      nuget sources Add -Name "DevExpress NuGet Feed" -Source "https://nuget.devexpress.com/{authorization key}/api"
      
    • Local Source

      DevExtreme NuGet packages for ASP.NET Core MVC are included in the installer for Windows. Add their path to the package sources by running the following command. If nuget is not recognized, follow these instructions to install the NuGet CLI.

      nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles(x86)%\DevExpress 19.2\DevExtreme\System\DevExtreme\Bin\AspNetCore"
      

    In both cases, you can change the %AppData%\NuGet\NuGet.config file as follows instead of running commands in the NuGet CLI:

     <configuration>
         <packageSources>
             ...
             <add key="DevExpress NuGet Feed"
                  value="https://nuget.devexpress.com/{authorization key}/api" />
             <!-- or -->
             <add key="DevExtreme ASP.NET MVC Controls"
                  value="%ProgramFiles(x86)%\DevExpress 19.2\DevExtreme\System\DevExtreme\Bin\AspNetCore" />
         </packageSources>
     </configuration>
    
  3. Install the DevExtreme.AspNet.Data and DevExtreme.AspNet.Core packages for your project:

    dotnet add package DevExtreme.AspNet.Data
    dotnet add package -v 19.2.3 DevExtreme.AspNet.Core
    

Add Client-Side Resources

The instructions below describe how to use npm and LibMan CLI to add client-side resources (DevExtreme scripts and CSS files) to a project.

Note

You can also use Webpack or Gulp to add client-side resources.

  1. Ensure that Node.js is installed.

  2. Open the console from the project directory and run the following commands to install DevExtreme and DevExtreme AspNet Data:

    npm init -y
    npm i devextreme@19.2 devextreme-aspnet-data
    

    The last command adds DevExtreme files to the <project_name>/node_modules/devextreme and <project_name>/node_modules/devextreme-aspnet-data directories. You will refer to these files in step 5.

    Note

    If your project is under source control, add the node_modules directory to the project's ignore list. For example, if you use git, add this directory to your .gitignore file.

  3. Install the LibMan CLI:

    dotnet tool install -g Microsoft.Web.LibraryManager.Cli
    
  4. Run the following command to initialize LibMan in your project:

    libman init
    

    A libman.json file is added to the project root:

    {
        "version": "1.0",
        "defaultProvider": "cdnjs",
        "libraries": []
    }
    
    Note

    MacOS, Linux: If the libman command is unavailable, specify the full path to LibMan: ~/.dotnet/tools/libman init. Refer to this issue for more information.

  5. Add library files listed below to the libman.json file. You can modify this file or use the libman install command.

    Directories and Files What Provider to Use Notes
    jquery.js from the jQuery library cdnjs Add this file if it is not included in your project.
    cldr.js cdnjs
    Globalize cdnjs
    JSZip cdnjs Required for client-side export.
    node_modules/devextreme/dist/js/ filesystem
    node_modules/devextreme/dist/js/localization/ filesystem Required if you set up localization.
    node_modules/devextreme/dist/js/vectormap-data/ filesystem Required if you use a VectorMap control.
    node_modules/devextreme/dist/css/dx.common.css filesystem
    CSS themes you want to use, for example:
    - node_modules/devextreme/dist/css/dx.light.css
    - node_modules/devextreme/dist/css/dx.material.blue.light.css
    filesystem
    node_modules/devextreme/dist/css/icons/ filesystem
    node_modules/devextreme/dist/css/fonts/ filesystem Required if you use one of the Material Design Themes.
    node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js filesystem

    The libman.json file should look like this:

    {
        "version": "1.0",
        "defaultProvider": "cdnjs",
        "libraries": [
            {
                // add this file if your project does not include it yet
                "library": "jquery@3.4.1",
                "provider": "cdnjs",
                "destination": "wwwroot/js/devextreme",
                "files": [
                    "jquery.js"
                ]
            },
            {
                "library": "cldrjs@0.5.1",
                "provider": "cdnjs",
                "destination": "wwwroot/js/devextreme/"
            },
            {
                "library": "globalize@1.4.2",
                "provider": "cdnjs",
                "destination": "wwwroot/js/devextreme/"
            },
            {
                // required for client-side export
                "library": "jszip@3.2.1",
                "provider": "cdnjs",
                "destination": "wwwroot/js/devextreme/"
            },
            {
                "library": "node_modules/devextreme/dist/js/",
                "provider": "filesystem",
                "destination": "wwwroot/js/devextreme/"
            },
            {
                // required if you set up localization
                "library": "node_modules/devextreme/dist/js/localization/",
                "provider": "filesystem",
                "destination": "wwwroot/js/devextreme/localization"
            },
            {
                // required if you use a VectorMap control
                "library": "node_modules/devextreme/dist/js/vectormap-data/",
                "provider": "filesystem",
                "destination": "wwwroot/js/devextreme/vectormap-data"
            },
            {
                "library": "node_modules/devextreme/dist/css/dx.common.css",
                "provider": "filesystem",
                "destination": "wwwroot/css/devextreme/"
            },
            {
                "library": "node_modules/devextreme/dist/css/dx.light.css",
                "provider": "filesystem",
                "destination": "wwwroot/css/devextreme/"
            },
            {
                "library": "node_modules/devextreme/dist/css/icons/",
                "provider": "filesystem",
                "destination": "wwwroot/css/devextreme/icons"
            },
            {
                // required if you use one of the Material Design Themes
                "library": "node_modules/devextreme/dist/css/fonts/",
                "provider": "filesystem",
                "destination": "wwwroot/css/devextreme/fonts"
            },
            {
                "library": "node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js",
                "provider": "filesystem",
                "destination": "wwwroot/js/devextreme"
            }
        ]
    }
    
  6. Run the following command to restore library files:

    libman restore
    
  1. Open your project's layout. Typically, it is the _Layout.cshtml file located in the Views/Shared folder (for MVC projects) or Pages folder (for Razor Pages).

  2. Link the following styles and scripts in the head section:

    <head>
        ...
        @* Uncomment to use the HtmlEditor control *@
        @* <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script> *@
    
        @* Uncomment to use the Gantt control *@ 
        @*<link href="~/css/devextreme/dx-gantt.css" rel="stylesheet" />*@
    
        @* Uncomment to use the Diagram control *@
        @*<link href="~/css/devextreme/dx-diagram.css" rel="stylesheet" />*@
    
        <link href="~/css/devextreme/dx.common.css" rel="stylesheet" />
        <link href="~/css/devextreme/dx.light.css" rel="stylesheet" />
    
        @* Uncomment to use the Gantt control *@ 
        @*<script src="~/js/devextreme/dx-gantt.js"></script>*@
    
        @* Uncomment to use the Diagram control *@
        @*<script src="~/js/devextreme/dx-diagram.js"></script>*@
    
        <script src="~/js/devextreme/jquery.js"></script>
    
        <script src="~/js/devextreme/cldr.js"></script>
        <script src="~/js/devextreme/cldr/event.js"></script>
        <script src="~/js/devextreme/cldr/supplemental.js"></script>
        <script src="~/js/devextreme/cldr/unresolved.js"></script>
    
        <script src="~/js/devextreme/globalize.js"></script>
        <script src="~/js/devextreme/globalize/message.js"></script>
        <script src="~/js/devextreme/globalize/number.js"></script>
        <script src="~/js/devextreme/globalize/currency.js"></script>
        <script src="~/js/devextreme/globalize/date.js"></script>
    
        @* Uncomment to enable client-side export *@
        @*<script src="~/js/devextreme/jszip.js"></script>*@
    
        <script src="~/js/devextreme/dx.all.js"></script>
    
        @* Uncomment to provide geo-data for the VectorMap control *@
        @*<script src="~/js/devextreme/vectormap-data/world.js"></script>*@
    
        <script src="~/js/devextreme/dx.aspnet.mvc.js"></script> 
        <script src="~/js/devextreme/dx.aspnet.data.js"></script>
    </head>
    
  3. The layout file can contain jQuery links that were added earlier (they may be placed in the <environment> containers). In this case, remove them.

    ...
    <!-- Remove the jQuery links below -->
    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
    ...
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
    ...
    

Register the DevExtreme.AspNet.Mvc Namespace

Open the _ViewImports.cshtml file located in the Views/Shared folder or Pages folder and add the following directive to it:

@using DevExtreme.AspNet.Mvc

Configure JSON Serialization

In the Startup.cs file, amend the ConfigureServices method as follows to ensure proper JSON serialization:

// ...
using Newtonsoft.Json.Serialization;

public void ConfigureServices(IServiceCollection services) {
    services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
}

Enable Controllers

For Razor page projects (ASP.NET Core 3), enable controllers in endpoint routing. To do this, amend the Configure method in the Startup.cs file as follows:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    // ...
    app.UseEndpoints(endpoints => {
        // ...
        endpoints.MapControllers(); // enables controllers in endpoint routing
    });
}