DevExtreme ASP.NET MVC Core Controls on Linux

Using our DevExtreme Widgets in ASP.NET Core is an alternative to the obvious approach of instantiating these widgets from JavaScript. Our documentation has good instructions to get you started, beginning with the Prerequisites and Installation section. However, the instructions focus on the processes required for Windows and Visual Studio users, and I was curious to find out how easy it would be to use a Linux based toolchain instead.

I didn’t hit any real issues on the way, but I decided to document the steps I took, hoping it will make things easier for others.

Install .NET Core

Microsoft has usable instructions for various Linux distributions. Here’s the page for Ubuntu, the distribution I used.

There’s only one thing I should add here. Since I’ve been following .NET Core for a while, I have found that occasionally old (preview?) versions have conflicted with current ones. So I recommend, at least if you encounter any issues, to cleanly remove old packages from your system and reinstalling the new ones after that. Try the sample Hello World application (dotnet new console -o hwapp…, as shown on the instruction page) to check whether your installation works correctly.

Create an ASP.NET Core MVC project

I have previously used Yeoman (that’s the yo command) to scaffold new .NET Core applications. There are various generators available for this purpose, and I’m sure some of them work just fine. However, I have also found that some generators weren’t always up to date with Microsoft’s preferences regarding solution structure, project files etc.

To create a new project that is definitely compatible with your version of .NET Core, you can use the dotnet new ... command. For MVC, this will work:

mkdir MyNewProject
cd MyNewProject
dotnet new mvc

If you’d like to see what the standard project does, you can restore the references and run at this point:

dotnet restore
dotnet run

Navigate to http://localhost:5000 in a browser to see the standard website, which contains a number of useful links for further .NET Core and ASP.NET Core information.

Add DevExtreme references

.NET Core uses nuget for package management, and latest versions have the functionality built in, so you don’t need a separate nuget. This used to be a problem in the past, because the nuget available easily to Linux distributions was based on Mono and used different configuration paths (by default, ~/.config/NuGet).

Note: I also found that the Mono nuget doesn’t behave exactly as documented when it tries to find its configuration file. I have successfully made it work, but I find it easier at this point to use the built-in version for .NET Core.

The .NET Core nuget configuration file is ~/.nuget/NuGet/NuGet.Config. To make the DevExtreme packages available, you need to edit this file and add a line like this to the packageSources:

<add key="DevExpress" value="https://nuget.devexpress.com/<YOURACCESSKEY>/api" protocolVersion="2" />

Note that you must insert your own access key into the URL at the position where it says <YOURACCESSKEY>. Your personal key can be found at the bottom of the page in our Download Manager, and you can find more information about our nuget repository here.

With the package source configured, you can now run this command from your project directory to add the DevExtreme reference:

dotnet add package DevExtreme.AspNet.Core

Project modifications

You still need to follow steps 3-5 from the ASP.NET Core MVC section of the documention page now, to edit bower.json, Views/Shared/_Layout.cshtml and Views/_ViewImports.cshtml.

Run Bower

Note that this section is an update of the original post.

After you have modified bower.json in the previous step, you must install the bower packages. This requires the Bower tool itself, which is most easily installed via npm (here are installation instructions).

With bower available on your machine, simply execute bower install in your project directory to install the required client-side packages in wwwroot/lib.

Try it!

Finally, you can test whether the widgets are now available for use. Edit Views/Home/Index.cshtml and insert some code like this:

@(Html.DevExtreme().Button().Text("Done it!"))

You should see the button rendered correctly in your running application.

Sample

I have created a small sample that renders some data in a Data Grid. It is available on github here, in case you want to double-check something.

Free DevExpress Products - Get Your Copy Today