Skip to content
This repository has been archived by the owner on Dec 3, 2017. It is now read-only.

Install Packages

San4es edited this page Jul 13, 2016 · 7 revisions

Start With a New ASP.NET Core Web Application

Ensure that .NET Core SDK and Tools are installed.

In Visual Studio 2015, use the "ASP.NET Core Web Application" project template:

Next, in the "Select a template" dialog, choose "Web Application".

Install DevExtreme Libraries (bower)

Use the "Manage Bower Packages..." window in Visual Studio or edit the bower.json file manually:

"dependencies": {
    . . .
    "devextreme": "~15.2.11",
    "devextreme-aspnet-data": "~1.0.0"
}

devextreme - contains DevExtreme libraries (scripts, styles, images)
devextreme-aspnet-data - a helper library for data operations

NOTE. In Microsoft .NET Core Tools (Preview 2), bower search functionality may not work (GitHub issue).

NOTE. If the bower.json file is missing from the Solution Explorer window, click the "Show All Files" button in the toolbar.

Prevent compilation errors caused by globalize 0.1

The globalize 0.1 package (required by DevExtreme 15.x) contains some C# files which may interfere with the .NET Core build process (see issue #28).

To resolve it, exclude the wwwroot/lib folder from compilation. Add these changes to project.json:

"buildOptions": {
    "compile": {
        "exclude": [ "wwwroot/lib" ]
    }
}

Install the 'DevExtreme.AspNet.TagHelpers' NuGet Package

Use the "Manage NuGet Packages..." window in Visual Studio or edit the projest.json file manually:

"dependencies": {
    . . .
    "DevExtreme.AspNet.TagHelpers": "15.2.11"
}

NOTE. Make sure to use matching versions of NuGet and Bower packages.


Add JavaScript and CSS References to Razor Layout

Add the following lines to the layout view (typically ~/Views/Shared/_Layout.cshtml):

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/globalize/lib/globalize.js"></script>
<script src="~/lib/devextreme/js/dx.all.js"></script>
<script src="~/lib/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

<link rel="stylesheet" href="~/lib/devextreme/css/dx.common.css" />
<link rel="stylesheet" href="~/lib/devextreme/css/dx.light.compact.css" />

Read more about the ~/lib directory and managing client-side dependencies with Gulp in the Scott Hanselman's article Control how your bower packages are installed with a gulpfile in ASP.NET 5

For a complete description of available JavaScript and CSS files, refer to the DevExtreme Packages article.

Register DevExtreme ASP.NET Core Tag Helpers Assembly and Namespace

Add the following lines to the ~/Views/_ViewImports.cshtml file:

@using DevExtreme.AspNet.TagHelpers
@addTagHelper *, DevExtreme.AspNet.TagHelpers