DevExtreme for Angular– CRUD UI Scaffolding Wizard in Visual Studio (v18.2)

A lot of Angular developers are already familiar with the Angular CLI (Command Line Interface). Besides creating, running and testing an Angular project, it also enables you to generate different parts of your application including scaffolding.

This all works very nice and efficient if you know all the command-line options to accomplish certain tasks.

Since DevExpress loves Visual Studio, in our v18.2 release we have included a really cool Scaffolding tool for Angular projects which are developed in Visual Studio.  The scaffolding tool is able to generate an Angular component which includes a DevExtreme widget. The cool thing here is that it is also configured to use the selected action methods on an ASP.NET WebAPI Controller.

Requirements

First make sure you have the following installed:

ASP.NET Core MVC:

  • Visual Studio 2017 and later
  • .NET Core SDK 2.1
  • ASP.NET Core application with Angular
  • Entity Framework Core Data Model

The DevExtreme Scaffolder is automatically installed for all compatible Visual Studio versions by the DevExtreme installer.

How does it work?

Once all prerequisites are installed, create a new project by going to File / New project to create a new ASP.NET Core Web Application with the standard Angular Project template.

Don’t forget to add the Entity Framework Core Data Model to the project!

Once the project wizard has completed its work, you can start using the scaffolding wizard by right-clicking any folder in the Solution Explorer and select Add / New Scaffolded item.. in the context menu.

In the Add Scaffold dialog, select Angular Component with a DevExtreme UI Widget and click Add.

The DevExtreme Wizard popups up which allows you to enter an Angular component name.

On the second tab you can select the DevExtreme Widget you want to use:

The real fun begins on the Data Binding tab:

Here you can directly specify the Entity Framework Data Context class together with the Model and the Controller (server-side). For all of you interested in the scaffolding process, you can read more about it here.

Once you’ve also configured the specific properties and other configuration options on the Settings tab, you can click the Add button which initiates the magic.

The component will be created in the ~/ClientApp/src/app/[ComponentName] folder and the component will be registered in the app.module.ts file as well. If there are any required NPM packages needed, they will also be automatically installed into the project.

The last thing that happens is the creation or modification of the ASP.NET Core controller with the appropriate action method(s) to provide the desired CRUD operations.

Try it?

Our v18.2 public beta is already available for our customers so login at our web-site and head to the My Downloads section from where you can download and install DevExtreme v18.2.

What do you think?

I invite all of you to test this new time-saving Scaffolding Wizard and let me know what you think of it. Also questions and suggestions are more than welcome by replying to this post.

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

  • you'll see all the new features/tools/components in v18.2 and
  • you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

7 comment(s)
Juan Antonio Trujillo Montenegro

This is really nice!

Is this feature coming for Vue.js too?

6 November, 2018
SistemasCaltic

Do you consider add this to visual studio code?

6 November, 2018
jdubeau

Wow, this is huge.  Can I assume it will work with a custom controller and code first model?

I see a CustomerId and EmployeeId, will it work with a ViewModel?  

6 November, 2018
Abdullah AlFifi

Only datagrid and treeview! what about form?

6 November, 2018
Alex B (DevExpress)

> Is this feature coming for Vue.js too?

We are considering this. Are you using MS Visual Studio (please don't confuse it with Visual Studio Code) for Vue development?

> Do you consider add this to visual studio code?

We are considering providing it as CLI tools that you could use in your VSCode console.

> Can I assume it will work with a custom controller and code first model? I see a CustomerId and EmployeeId, will it work with a ViewModel?

The view scaffolder can't work with any custom controller. Yet, if your custom controller complies with our Web API Controller conventions, then yes, our scaffolder can consume it. Note that we have an API Controller scaffolder as well. To generate controllers, you can use a DBContext created with the 'code first' approach.

> Only datagrid and treeview! what about form?

It is in our plans.

7 November, 2018
Juan Antonio Trujillo Montenegro

> We are considering this. Are you using MS Visual Studio (please don't confuse it with Visual Studio Code) for Vue development?

Yes, we are using Visual Studio Enterprise 2017.

7 November, 2018
Miro Mz

Love it! Vote for adding it to the CLI. We also use https://angularconsole.com to speed up code generation. This way, one should be able to use it with any editor and spend less time looking up commands and options ...  

8 November, 2018

Please login or register to post comments.