Configure a non Visual Studio Project | ASP.NET Core Controls (2024)

• Aug 09, 2024
• 6 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:

   • Console

   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.

     • Console

     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.

     • Console

     nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles%\DevExpress 24.1\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%\DevExpress 24.1\DevExtreme\System\DevExtreme\Bin\AspNetCore" /> </packageSources></configuration>

   Note

   Storing credentials in a NuGet.config file (especially when saving NuGet.config to your source control) is risky because it can lead to credential leakage. If you store credentials in NuGet.config, please consider using a more secure option as described in Consuming packages from authenticated feeds and How to Protect Your Private NuGet Feed and Safely Consume the Feed From External Systems.

   See Also

   Quickstart: Deploy an ASP.NET web app - Azure App ServiceASP.NET - ConfigurationApplication configuration in ASP.NET - ASP.NETApplication Configuration in ASP.NET Core

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

   • Console

   dotnet add package DevExtreme.AspNet.Datadotnet add package -v 24.1.6 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.

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:

   • Console

   npm init -ynpm i devextreme-dist@24.1 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:

   See Also

   [Solved] what is difference between app setting file and web.config file ?
   • Console

   dotnet tool install -g Microsoft.Web.LibraryManager.Cli

4. Run the following command to initialize LibMan in your project:

   • Console

   libman init

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

   • libman.json

   { "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:

   • libman.json

   { "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { // add this file if your project does not include it yet "library": "[email protected]", "provider": "cdnjs", "destination": "wwwroot/js/devextreme", "files": [ "jquery.js" ] }, { "library": "[email protected]", "provider": "cdnjs", "destination": "wwwroot/js/devextreme/" }, { "library": "[email protected]", "provider": "cdnjs", "destination": "wwwroot/js/devextreme/" }, { // required for client-side export "library": "[email protected]", "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:

   • Console

   libman restore

Link Client-Side Resources

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:

   • _Layout.cshtml

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

   • _Layout.cshtml

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

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 in endpoint routing.

app.UseEndpoints(endpoints => { endpoints.MapControllers(); // enables controllers in endpoint routing endpoints.MapDefaultControllerRoute(); // adds the default route {controller=Home}/{action=Index}/{id?}});

If you use .NET 6+, enable controllers at the top level of the application:

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