Skip to main content
BuyLog In
ASP.NET Core Controls
Search in…
Docs > DevExtreme-Based Controls > Get Started > Configure a non Visual Studio Project
All docs
V24.2
ASP.NET Core Controls
Prerequisites and Installation
Supported Browsers
Demos and Sample Apps
DevExtreme-Based Controls
Get Started
Configure a Visual Studio Project
Configure a non Visual Studio Project
Add Controls to a Project
Upgrade to a New Version
Concepts
Controls
Reporting
Query Builder
Rich Text Editor
Spreadsheet
Web Dashboard
Security Considerations
Troubleshooting
Redistribution and Deployment
API Reference
Client API Reference
Migration from WebForms & MVC5
Download CHM

Configure a non Visual Studio Project

  • 5 minutes 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. Obtain your NuGet feed URL. Then, follow one of the installation tutorials:

  3. Install the DevExtreme.AspNet.Data and DevExtreme.AspNet.Core packages for your project:

    dotnet add package DevExtreme.AspNet.Data
dotnet add package -v 24.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-dist@24.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.
    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.5.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.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://unpkg.com/devextreme-quill/dist/dx-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.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>

    @* Uncomment to use Globalize for localization *@
    @*<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://code.jquery.com/jquery-3.5.1.min.js"></script>
...

Note

You can also apply bundling and minification to static resources as described in the following article: Bundle and minify static assets in ASP.NET Core.

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

Add the following code to ensure proper JSON serialization:

builder.Services.AddRazorPages().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);

Enable Controllers

For Razor page projects, enable controllers at the top level of the application:

app.MapControllers();
app.MapDefaultControllerRoute();