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.
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.
Image may be NSFW.Clik here to view.