Prerequisites and Installation

This topic shows how to download and install DevExtreme ASP.NET MVC Controls and then run a sample ASP.NET MVC application.

Environment and Requirements

DevExtreme ASP.NET MVC Controls support:

  • .NET Framework 4.0 and later / .NET Core 1.0.1 and later
  • ASP.NET MVC 3 and later
  • Visual Studio 2012 and later
NOTE
If you use Visual Studio 2012, make sure that you have the following updates and hotfixes applied. This ensures proper Razor code highlighting and the absence of unexpected dialog boxes.
- Visual Studio 2012 Update 5
- ASP.NET and Web Tools 2013.1 for Visual Studio 2012
- KB3002339 hotfix

Apart from the libraries required by DevExtreme itself, DevExtreme ASP.NET MVC Controls have the following dependencies.

Download and Installation

Download the DevExtreme installer (.exe file) here and run it. The setup wizard will guide you through the installation steps.

Start a New Project

After the installation is completed, you can create a new project that includes all the resources ASP.NET MVC Controls require.

DevExtreme ASP.NET MVC Controls - Project Templates

Add or Upgrade the Resources in an Existing Project

Using Visual Studio Wizards

See this topic for details.

Manually in ASP.NET MVC 3, 4, 5

  1. Open your project in Visual Studio.

  2. Add the DevExtreme.AspNet.Mvc.dll assembly to References. You can find the assembly in %ProgramFiles(x86)%\DevExpress 17.2\DevExtreme\System\DevExtreme\Bin\AspNet if you did not change the default installation path. Alternatively, you can install the DevExtreme.AspNet.Mvc NuGet package from the DevExpress NuGet feed.

  3. Add the DevExtreme.AspNet.Mvc namespace to the Views\Web.config file:

    <configuration>
        <system.web.webPages.razor>
            <pages>
                <namespaces>
                    <add namespace="DevExtreme.AspNet.Mvc" />
                    ...
  4. Install the DevExtreme.AspNet.Data NuGet package from NuGet.org.

    DevExtreme ASP.NET MVC Controls - Install the DevExtreme.AspNet.Data NuGet Package

  5. Copy the DevExtreme scripts and CSS files:

    • from %ProgramFiles(x86)%\DevExpress 17.2\DevExtreme\Sources\Lib\css to the Content folder
    • from %ProgramFiles(x86)%\DevExpress 17.2\DevExtreme\Sources\Lib\js to the Scripts folder
  6. Create a DevExtremeBundleConfig.cs file in the AppStart folder and configure bundles for the DevExtreme resources in it:

    DevExtremeBundleConfig.cs
    C#
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Optimization;
    namespace ProjectName {
        public class DevExtremeBundleConfig {
            public static void RegisterBundles(BundleCollection bundles) {
                var scriptBundle = new ScriptBundle("~/Scripts/DevExtremeBundle");
                var styleBundle = new StyleBundle("~/Content/DevExtremeBundle");
                // CLDR scripts
                scriptBundle
                    .Include("~/Scripts/cldr.js")
                    .Include("~/Scripts/cldr/event.js")
                    .Include("~/Scripts/cldr/supplemental.js")
                    .Include("~/Scripts/cldr/unresolved.js");
                // Globalize 1.x
                scriptBundle
                    .Include("~/Scripts/globalize.js")
                    .Include("~/Scripts/globalize/message.js")
                    .Include("~/Scripts/globalize/number.js")
                    .Include("~/Scripts/globalize/currency.js")
                    .Include("~/Scripts/globalize/date.js");
                // NOTE: jQuery may already be included in the default script bundle. Check the BundleConfig.cs file​​​
                // scriptBundle
                //    .Include("~/Scripts/jquery-1.10.2.js");
                // JSZip for client-side exporting
                // scriptBundle
                //    .Include("~/Scripts/jszip.js");
                // DevExtreme + extensions
                scriptBundle
                    .Include("~/Scripts/dx.all.js")
                    .Include("~/Scripts/aspnet/dx.aspnet.data.js")
                    .Include("~/Scripts/aspnet/dx.aspnet.mvc.js");
                // VectorMap data
                // scriptBundle
                //    .Include("~/Scripts/vectormap-data/africa.js")
                //    .Include("~/Scripts/vectormap-data/canada.js")
                //    .Include("~/Scripts/vectormap-data/eurasia.js")
                //    .Include("~/Scripts/vectormap-data/europe.js")
                //    .Include("~/Scripts/vectormap-data/usa.js")
                //    .Include("~/Scripts/vectormap-data/world.js");
                // DevExtreme themes              
                styleBundle
                    .Include("~/Content/dx.common.css")
                    .Include("~/Content/dx.light.css");
                bundles.Add(scriptBundle);
                bundles.Add(styleBundle);
    #if !DEBUG
                BundleTable.EnableOptimizations = true;
    #endif
            }
        }
    }
  7. Register the bundles in the Global.asax.cs file:

    C#
    protected void Application_Start() {
        ...        
        DevExtremeBundleConfig.RegisterBundles(BundleTable.Bundles);
    }
  8. Open the Views\Shared\_Layout.cshtml file, find a jQuery bundle reference in the <body> section and move it to the <head>. If there is no reference, return to the DevExtremeBundleConfig.cs file (step 6) and uncomment the lines that add jQuery to the DevExtreme script bundle. After that, reference the DevExtreme bundles in the <head> section.

    Razor C#
    <head>
        ...
        @Scripts.Render("~/bundles/jquery")
        @Styles.Render("~/Content/DevExtremeBundle")
        @Scripts.Render("~/Scripts/DevExtremeBundle")
    </head>

To upgrade your project, update the NuGet packages and replace the files mentioned in steps 2 and 5 with their new versions.

Manually in ASP.NET Core MVC

  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

      Find your authorization key in your DevExpress account's Download Manager.

      DevExtreme ASP.NET MVC Controls - Install the NuGet Packages

      Run the following command with this key. If nuget is not recognized, install the NuGet CLI using this instruction.

      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, install the NuGet CLI using this instruction.

      nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles(x86)%\DevExpress 17.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 17.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 DevExtreme.AspNet.Core
  4. Reference the jquery, devextreme, and devextreme-aspnet-data bower packages in the bower.json file's "dependencies" section. If this file is absent, run the bower init command.

    "dependencies": {
        ...
        "jquery": "~3.1",
        "devextreme": "~17.2",
        "devextreme-aspnet-data": "~1"
    }
  5. Install the bower packages:

    bower install
  6. Open the _Layout.cshtml file located in the Views/Shared folder (for conventional Razor views) or Pages folder (for Razor Pages) and move the jQuery links in the <environment> containers from the <body> to the <head> section. If there are no jQuery links, add one to the <head> section manually.

    <head>
        ...
        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
                ...
        <environment names="Staging,Production">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                ...
        <!-- or -->
        <!-- script src="~/lib/jquery/dist/jquery.js"></script -->
  7. Link the following styles and scripts after the jQuery links:

    <head>
        ...
        <link href="~/lib/devextreme/css/dx.common.css" rel="stylesheet" /> 
        <link href="~/lib/devextreme/css/dx.light.css" rel="stylesheet" /> 
        <script src="~/lib/devextreme/js/dx.all.js"></script>     
        <script src="~/lib/devextreme-aspnet-data/js/dx.aspnet.data.js"></script> 
        <script src="~/lib/devextreme/js/dx.aspnet.mvc.js"></script>
    </head>
  8. Import the DevExtreme.AspNet.Mvc namespace in the _ViewImports.cshtml file located in the same folder:

    @using DevExtreme.AspNet.Mvc
  9. 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()
            // ... other settings of the MVC service ...
            .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
    }

To upgrade your project, update the NuGet and bower packages from steps 3 and 4.

Sample Applications

DevExtreme ASP.NET MVC Controls come with two sample applications that show how to configure almost every widget from the DevExtreme library. They demonstrate identical use-cases, but one of them is built using ASP.NET MVC 5 and Visual Studio 2012, while the other targets ASP.NET Core MVC 2.0. You can find both applications in the C:\Users\Public\Public Documents\DevExpress Demos 17.2\DevExtreme\ASP.NET MVC Controls\ directory.

See Also