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.

Project Templates

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

DevExtreme ASP.NET MVC Controls - Project Templates

Add the Resources to an Existing Project

If you already have a project, add controls resources manually using the instructions below.

ASP.NET MVC 3, 4, 5

Use this tool for Visual Studio.

ASP.NET Core MVC

  1. Add a new NuGet package source, which is located in the folder where you have installed DevExtreme.

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

  2. Install the DevExtreme.AspNet.Data and DevExtreme.AspNet.Core packages for your solution.

    DevExtreme ASP.NET MVC Controls - Install the NuGet Packages

  3. Add the following strings to the "dependencies" section of the bower.json file.

    "jquery": "~3.1",
    "devextreme": "~17.1",
    "devextreme-aspnet-data": "~1"
    NOTE
    If the bower.json file is absent, run the console in the project directory and execute the bower init command in it.
  4. Copy and paste the following strings to the <head> tag of the Views/Shared/_Layout.cshtml file.

    <link href="~/lib/devextreme/css/dx.common.css" rel="stylesheet" /> 
    <link href="~/lib/devextreme/css/dx.light.css" rel="stylesheet" /> 
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <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>
  5. Add the following string to the Views/_ViewImports.cshtml file.

    @using DevExtreme.AspNet.Mvc

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