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.

Starting 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

Adding the Resources to an Existing Project

You can manually add control resources to an existing project using the following instructions:

ASP.NET MVC 3, 4, 5

Use this tool for Visual Studio.

ASP.NET Core MVC

  1. Open your project in Visual Studio or 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.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(x86)%\DevExpress 17.1\DevExtreme\System\DevExtreme\Bin\AspNetCore" />
        </packageSources>
    </configuration>

    ... or use the NuGet Package Manager in Visual Studio:

    DevExtreme ASP.NET MVC Controls - Add a New NuGet Package Resource

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

    dotnet add package DevExtreme.AspNet.Data
    dotnet add package DevExtreme.AspNet.Core

    ... or using the NuGet Package Manager:

    DevExtreme ASP.NET MVC Controls - Install the NuGet Packages

  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.1",
        "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());
    }

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. You can find both applications in the C:\Users\Public\Public Documents\DevExpress Demos 17.1\DevExtreme\ASP.NET MVC Controls\ directory.

See Also