DevExtreme ASP.NET Zero Integration

Image for post
Image for post

In this article, I will explain how to use DevExtreme components into ASP.NET Zero based applications. I won’t explain details about how to configure and run ASP.NET Zero. There is already detailed explanation here about that. I will focus how to integrate DevExtreme to project and how to use it. Then I will create an advanced (paging, sorting, filtering) DevExtreme datagrid example.

Introduction to DevExtreme

DevExtreme is integrated with the following libraries and frameworks:

  • jQuery versions 2.1–2.2 and 3.x
  • Knockout versions 2.2.3–2.3.0 and 3.1.0–3.4.0
  • AngularJS versions 1.2–1.5
  • Angular versions 2.2.1+

In this artcile I will integrate DevExtreme with using JQuery and Angular versions to ASP.NET Zero. As you know, there are Angular and JQuery version of ASP.NET Zero, too.

So I will use DevExtreme JQuery version in ASP.NET Zero Core MVC & JQuery and use DevExtreme Angular version in ASP.NET Zero Core Angular.

NOTE: Also I will show DevExtreme ASP.NET Core & MVC integration example. But we don’t offer this since it’s not easy to use with existing design.

DevExtreme JQuery

Integration

First, download ASP.NET Zero Core MVC & JQuery. To use DevExtreme in project just add scripts and styles. There are different ways (local, cdn, bower, npm) to install/reference resources. I will install required resources using npm.

Adding devextreme npm package to package.json:

Image for post
Image for post
Add devextreme npm package

Visual Studio automatically downloads related packages. If it is not downloaded, you can update with running yarncommand in the command line.

Then add required mappings to module.exports.mappings section in bundle.config.js:

Image for post
Image for post
Add mappings to bundle.config.js

Add styles to wwwroot/view-resources/Areas/App/Views/_Bundles/app-layout-libs.css bundle in bundle.config.js:

Image for post
Image for post
Add styles

Add scripts to wwwroot/view-resources/Areas/App/Views/_Bundles/app-layout-libs.js bundle in bundle.config.js:

Image for post
Image for post
Add scripts to bundle.config.js

Finally, run gulp command in .Mvc project location to copy devextreme resources from node_modules to wwwroot/lib. Now, DevExtreme is ready to use in the project.

Image for post
Image for post
Run gulp command under .Mvc project

Let’s do an example

I will convert Audit Logs page to use DevExtreme datagrid. I will take this example as a base code.

First I removed existing table tag and added a simple div in the .cshtml file as shown below:

Then changing the AuditLogs/index.js script. I commented to the added and removed lines.

index.js

Actually, I just added code similar to the example that I mentioned above.

Now we are ready to run project and see how it looks.

Image for post
Image for post
DevExtreme datagrid

What about other controls?

I will also change DateRangePicker to DevExtreme DatePicker. Actually there isn’t date range picker in DevExtreme library, so I will do this with using two date pickers.

.Web.Mvc\Areas\App\Views\Auditlogs\Index.cshtml:

Image for post
Image for post
Add date html

.Web.Mvc\wwwroot\view-resources\Areas\App\Views\AuditLogs\Index.js

Image for post
Image for post
Add date js

And result

Image for post
Image for post
DevExtreme date picker

DevExtreme Angular

Integration

First, download ASP.NET Zero Core & Angular. Like JQuery version, you should add devextreme npm packages (you can use different ways like bower, CDN or local etc.). I will use npm like before.

Adding devextreme and devextreme-angular npm packages to package.json:

Image for post
Image for post
Add devextreme npm packages

Then running yarn command in angular folder:

Image for post
Image for post

Added styles to ~\DevExtremeDemoSPA\angular\angular.json:

Image for post
Image for post
Add styles

Finally, DevExtreme is ready to use in the project.

Let’s do an example

In this example, I will convert AuditLogs grid to DevExtreme datagrid. I will use this example code in the project. I just added some filtering configuration.

First I will change audit-logs.component.html file:

Now I will change audit-logs.component.ts:

And lastly, I will add DxDataGridModule to admin.module.ts:

Image for post
Image for post
Add DxDataGridModule to admin.module.ts

And the result

Now we are ready to run project and see how it looks.

Image for post
Image for post
DevExtreme ASP.NET Zero integration

More example

Let’s create date example for angular version. It is quite easy like jquery version.

\angular\src\app\admin\audit-logs\audit-logs.component.html

Image for post
Image for post
Add date control

\angular\src\app\admin\admin.module.ts

Image for post
Image for post
Import module

Result

Image for post
Image for post
DevExtreme date box

DevExtreme ASP.NET Core & MVC

Integration

1. Download DevExtreme

2. Download ASPNET Zero

3. Create local nuget package source for DevExpress

To create local nuget source right click to .Mvc project and select “Manage Nuget Packages” and click setting button.

Image for post
Image for post
Manage Nuget Packages

Then following window will open. Click “+” button and add new source. Set a name for local package source into “Name” input what you want.

And select the folder that contains DevExtreme nuget packages (C:\Program Files (x86)\DevExpress 17.2\DevExtreme\System\DevExtreme\Bin\AspNetCore) for “Source” input. And click “Update” button.

Image for post
Image for post
Creating local nuget package source

Then you will see the DevExtreme nuget packages. Select and install these two packages DevExtreme.AspNet.Data and DevExtreme.AspNet.Core.

Image for post
Image for post
Install DevExtreme nuget packages

4. Install bower packages

Note: We don’t use bower our projects anymore, but DevExtreme use bower for ASP.NET Core controls. Npm packages and bower packages are different, so if you use npm to install packages, DevExtreme controls will not run, because there are missing files that are downloaded from npm. (this is only for DevExtreme ASP.NET Core & MVC)

Open command promt at .Mvc project location and run bower init to create bower.son file and fill fields (you can type what you want). For example:

Image for post
Image for post
Run bower init command

To install bower packages run bower install <package> --save command. We should install devextreme and devextreme-aspnet-data packages.

Image for post
Image for post
Run bower install <package> — save command

5. Reference and configure scripts and styles

First, add mappings to bundle.config.js to copy files from bower_components to wwwroot/lib. Add following lines to module.exports.mappings section:

"bower_components/devextreme/css/dx.common.css": "devextreme/css",
"bower_components/devextreme/css/dx.light.css": "devextreme/css",
"bower_components/devextreme/js/dx.all.js": "devextreme/js",
"bower_components/devextreme/js/dx.aspnet.mvc.js": "devextreme/js",
"bower_components/devextreme-aspnet-data/js/dx.aspnet.data.js": "devextreme-aspnet-data/js",
"bower_components/devextreme/css/icons": "devextreme/css/icons"

File will look like this:

Image for post
Image for post
Adding mappings to bundle.config.js

Add styles to bundle.config.js

Image for post
Image for post
Styles

Add scripts to_Bundles/app-layout-libs.js in bundle.config.js

Image for post
Image for post
Scripts

6. Import the DevExtreme.AspNet.Mvc namespace

Import the DevExtreme.AspNet.Mvc namespace in the _ViewImports.cshtml file located in the .Mvc/Areas/AppAreaName/Views folder.

@using DevExtreme.AspNet.Mvc

Now you can use DevExtreme Controls in ASP.NET Zero. Let’s do an example.

Example of Usage

Remove existing grid in .Web.Mvc\Areas\App\Views\AuditLogs\Index.cshtml and add DevExtreme grid

Also changed the corresponding javascript file:

Result

Image for post
Image for post
DevExtreme datagrid

More example

I will do date box (this example) like the examples above.

.Web.Mvc\Areas\App\Views\Auditlogs\Index.cshtml

Image for post
Image for post
Add date box control html

.Web.Mvc\wwwroot\View-resources\Areas\App\Views\Auditlogs\index.js

Image for post
Image for post
Add scripts to handle data changes

Result

Image for post
Image for post
DevExtreme date box

I tried to add the DevExtreme controls without changing the existing design.

We suggest you use JQuery version of DevExtereme for ASP.NET Zero MVC & jQuery version rather than DevExtreme ASP.NET Core components (HTML helpers) since it better fits our design.

Conclusion

I used examples from DevExtreme Demos page. I just made minor changes.

When you use DevExtreme data grids in ASP.NET Zero you can’t properly use the grid built-in filter feature. Because of DevExtreme grids suitable for full list of data. But ASP.NET Zero designed to return always paged data. If you enabled the filtering feature, the grid will search for data on the current page. You can surely return the full table from the server, but it is not performant if the table has too many data rows.


This article was originally published on Volosoft Blog.

Volosoft

Volosoft

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store