DevExtreme MVC - New Web API and Razor View Scaffolding Wizard (v18.1)

As you may know, manually coding your own Web API controllers in ASP.NET MVC can be tedious. Web API controllers are important because they deliver your server's back-end data to your client-side views. Writing each CRUD (create, read, update, delete) method for all your database tables may tempt you to start to copy-and-paste code. But that can lead to typos and errors after deployment.

Good news: with our most recent release (v18.1), we've included new scaffolding wizards that help you add Web API support in minutes. Our new scaffolding wizards can be used on a new or existing project too. In this blog post, I'll describe how to take advantage of these new wizards in your ASP.NET MVC or ASP.NET Core projects.

What is Scaffolding?

The term scaffolding means that the CRUD source code is auto-generated for you. Scaffolding Controllers and Views helps to save you time in ASP.NET MVC and let's you focus on the rest of your application logic.

Visual Studio vs DevExtreme Wizards

While Visual Studio does provide a "Scaffolded Item" wizard, it only generate views that are based on simple HTML tags. (A scaffolded item can be an MVC View, Controller, Area, etc.)

Our new scaffolding wizard provides 'scaffolded items' for Web API controllers. Our wizard also helps you to create the Views with DevExtreme Controls to interact with these WebAPI based controllers.

Now let's dig into how you can use this technology today.

How to use

Our wizard helps you to create both an ASP.NET MVC Controller and View. To bring up the wizard in Visual Studio, right-click on the Solution Explorer and from the context menu and select either: 'Add|Controller', 'Add|View', or 'Add|New Scaffolded Item'.

If you select 'Add|New Scaffolded Item' then you'll see the following DevExtreme items:

• DevExtreme Web API Controller with actions, using Entity Framework
• MVC 5 View with a DevExtreme Control
• Razor Page with a DevExtreme Control

Scaffolding Web API Controllers

We'll start by creating the controller. Right-click on the controllers folder like so:

In the scenario below, we'll assume that you have an Entity Framework DBContext already created.

Note: You'll need to have an existing Database Context. Currently, we only support Entity Framework and Entity Framework Core.

From the dialog, choose the 'DevExtreme Web API Controller with actions, using Entity Framework' option:

This controller wizard is concise and produces impressive results. The generated controllers code provides all the CRUD actions, customization points, and actions to load data for related lookups:

By default, we scaffold all CRUD operations and model properties for convenience. If you don't need certain parts, then please comment them out or delete them.

Scaffold MVC Views & Razor Pages

Controllers are only one piece of the MVC puzzle and our scaffolding wizard helps you to create MVC Views as well. In fact, our wizard also helps you to create 'Razor Pages' which do not use a controller. (Learn more about DevExtreme MVC Controls and Razor Pages support here.)

Now, let's create an MVC View to consume the data from the MVC Controller we just made. Right-click on the Views folder and select 'Add|New Scaffolded Item'. Then choose 'MVC View with a DevExtreme Control' from the 'Add Scaffold' dialog.

This brings up our view wizard which provides more options than the simple controller wizard. The view wizard has four steps:

1. View configuration (similar to VS built-in version)
2. Select DevExtreme control to scaffold
3. Select Web API controller to connect to
4. Options customization

Insert Control Here

If you already have a View and would like to simply add a DevExtreme control to it then:

1. Right-click within your Razor file where you'd like to insert the DevExtreme control
2. Select 'Insert a DevExtreme Control Here' option

Here's an example of a scaffolded DevExtreme DataGrid:

In the DataGrid sample code above, please note:

• Typed Html helpers are used (generic of type <Product>)
• Data source is configured with a controller and primary key
• Columns are declared using strongly typed expressions
• Columns which represent related entities are configured with lookup data sources

This "Insert..." dialog is useful to build up your View with more DevExtreme controls too. For example, let's say where you first scaffold a view with the DevExtreme DataGrid. Then, declare a detail template and use this "Insert..." feature to scaffold a detail DataGrid in the template.

Learn More

Take a look at the documentation topic for more information: DevExtreme Control Scaffolding

C#, VB, & ASP.NET Core

We haven't forgotten about Visual Basic (VB) developers because we offer our scaffolding wizard for both C#, VB, and ASP.NET Core.

Report Issues

We've setup a support ticket to discuss any issues you may have with the beta testing of this feature. Please report any bugs here: T622095

Future Plans

In this v18.1 release, our View scaffolding wizards only support the DataGrid and TreeList controls. And the configuration options are focused mainly on data binding.

In future releases, we plan to add:

• More controls, for example, Form & Scheduler!
• Commonly used options configuration (i.e.: sorting, filter row, grouping, and more)
• Support for events and templates. For example: generate stubs for selected event handlers, generate a detail template for grid, etc.
• A way to insert Angular and React components for certain types of ASP.NET Core apps

Follow our progress on our public DevExtreme Roadmap.

Watch the Webinar

Watch the “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll see all the new DevExtreme v18.1 items demonstrated for our ASP.NET MVC, ASP.NET Core, React, Vue, or other client-side offerings.

Test It Today

Download this DevExtreme v18.1 preview to test these new DevExtreme MVC wizards today.

Then be sure to let us know your feedback, thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today