DevExpress DevExtreme ASP.NET Core CRUD Application

DevExpress has been providing UI components since 1998 and have won many awards year in year out. They can be counted amongst the top component publishers like Telerik, Infragistics, etc. Their DevExtreme component suite has won the Visual Studio Magazine Readers Choice Best Cross-Platform suite for the past 3 years.

CodeStencil just released a stencil that targets this same DevExtreme family of components, and this stencil gives you the ability to generate a complete working application with full CRUD capabilities.  It was inspired by a demo realeased some weeks ago on YouTube showing how to easily implement the DevExtreme Grid in a Razor application, See:  

This stencil will generate models, razor pages, services, controllers, etc. The good thing is that you have full control and configuration on how the code is generated, so you do not end up with a lot of redundant code.

You can see the full video of this blog see:


So, let's get into it.

If you do not have CodeStencil installed, you can download and install a free/trial copy from Downloads.


By default, CodeStencil has the Quick Start Wizard loaded at startup. Once this dialog is loaded, clicking NEXT will take you to the  "Add Project Name, Select Stencil" page. This shows some stencils downloaded and listed by default.


Unfortunately, you will not see the DevExtreme Grid Stencil listed because it is not downloaded by default and you need a DevExpress license to be able to use it. This is by design;  there is no point automatically downloading 3rd party stencils unless you have a license for the corresponding product. You can get a trial version here.

Close/Cancel the Quick Startup wizard.


Now we proceed...

Step 1: Download the DevExtreme Grid Stencil.

From Stencils | Manage Stencils:

You will see the "Manage Stencils" dialog pop-up. Under the list of "Online" stencils, select the DevExpress category, under 3rd Party, Select "DevExtremeAspCore" Click Install.



Step 2: Create a new project

Accept the default name = "Project1"

Click on the stencil icon to select the DevExtreme stencil:

The "Select Stencil" dialog opens. Follow the numbered steps:

1 - Select the DevExpress category

2 - Select the "DevExtremeAspCore" stencil

3 - Click the "Select" button

After the stencil has been selected we are returned to the New Project form. Note the following:

A - The "DevExtremeAspCore.codestencil" stencil has been selected.

B - Note the output folder for the generated code. This can be changed at any time.


Step 3: Code Generation

Click on the Generate button:



Once the code is generated you will be prompted to navigate to the output folder. Click "No" to close this prompt.

Next, highlight/select the node : [%PROJECT_NAME%].sln; Right-Click for the context menu, Select the menu item - "Load File using Registered Application";  This will open the solution in a new copy of Visual Studio.


Run the application. You will see the generated DevExtreme ASP.NET Core application with all the tables from the Chinook Database

So what is the big deal here?

You may be thinking, what is the big deal, this is just another code generator and now you will have to start deleting redundant code you do not need. Consider the following:

CRUD Features: Your grid is automatically enhanced with CRUD capabilities without you writing any line of code. The stencil will pick the tables you selected before code generation and build the models, controllers, and razor pages to support this.


Time Saver: This entire application was generated in just about 27 seconds.

  1. Think about how long it would have taken to code the razor pages, controllers,  etc. by hand.  



If you can generate between 60-70% of clean and concise code that you have control over, that is huge!




Continue reading
  1733 Hits
Instant SSL Pro