DevExtreme Vue - 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 need the following development environment:

For ASP.NET MVC 5:
- Visual Studio 2015 and later
- .NET Framework 4.5.2 and later
For ASP.NET Core:
- Visual Studio 2017 and later
- .NET Core 2.0 and later

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 5

Open your project in Visual Studio.
Add the DevExtreme.AspNet.Mvc.dll assembly to References. You can find the assembly in %ProgramFiles(x86)%\DevExpress 18.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.

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

<configuration>
    <system.web.webPages.razor>
        <pages>
            <namespaces>
                <add namespace="DevExtreme.AspNet.Mvc" />
                ...

Install the DevExtreme.AspNet.Data NuGet package from NuGet.org.
Copy the DevExtreme scripts and CSS files:
- from %ProgramFiles(x86)%\DevExpress 18.2\DevExtreme\Sources\Lib\css to the Content folder
- from %ProgramFiles(x86)%\DevExpress 18.2\DevExtreme\Sources\Lib\js to the Scripts folder

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

Register the bundles in the Global.asax.cs file:

C#

protected void Application_Start() {
    ...        
    DevExtremeBundleConfig.RegisterBundles(BundleTable.Bundles);
}

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

Open the console and navigate to your project's directory:
```
cd MyProject
```

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, install the NuGet CLI using these instructions.
```
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 these instructions.
```
nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles(x86)%\DevExpress 18.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 18.2\DevExtreme\System\DevExtreme\Bin\AspNetCore" />
    </packageSources>
</configuration>

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
```
Open the bower.json file and reference the jquery, devextreme, and devextreme-aspnet-data packages in the "dependencies" section. In addition, change the bootstrap version to 3.4.1 or later because earlier versions contain known XSS vulnerabilities (report 1, report 2) or do not support jQuery v3. If bower.json is absent, run the bower init command.
```
"dependencies": {
    ...
    "bootstrap": "^3.4.1",
    "jquery": "~3.1",
    "devextreme": "~18.2",
    "devextreme-aspnet-data": "~1"
}
```
Install the bower packages:
```
bower install
```

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

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>

Import the DevExtreme.AspNet.Mvc namespace in the _ViewImports.cshtml file located in the same folder:
```
@using DevExtreme.AspNet.Mvc
```

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

The WidgetsGallery folder contains two applications that show how to configure most controls in the DevExtreme library. They demonstrate identical use-cases, but one of them is built using ASP.NET MVC 5, while the other targets ASP.NET Core MVC 2.0.

The DevAV folder contains a real-world application demo built using ASP.NET Core MVC 2.0. You can view its online version here.