Use the Scaffolding Tool to Create Controllers, Views, and Pages

• Jun 28, 2024
• 4 minutes to read

The DevExpress Scaffolding tool is an interactive add-on for Microsoft Visual Studio. The interactive DevExpress .NET Product Installer installs the tool alongside DevExpress packages. You cannot install the tool separately.

The DevExpress Scaffolding tool allows you to perform the following tasks:

• Generate API controllers with CRUD actions for EF Core or XPO models. You can then reference these controllers in your data-bound DevExtreme components (such as Data Grids).
• Scaffold the following DevExtreme components:
  1. DataGrid
  2. Form
  3. TreeList
• Generate ASP.NET Core MVC views or Razor pages with the aforementioned DevExtreme components.

Scaffold API Controllers (EF Core and XPO)

The DevExpress Scaffolding tool can generate API controllers with CRUD actions for Entity Framework Core and XPO models. You can bind these controllers to DevExtreme components.

Prerequisites

The DevExpress Scaffolding tool works differently depending on your ORM framework of choice. DevExpress recommends EF Core for new ASP.NET Core web applications.

EF Core

• If your application doesn’t have an existing Model, follow the ASP.NET Core Getting Started Tutorial to create one.
• Entity Framework interacts with databases through a database context class. Follow the Create the Database Context tutorial to add a Database Context class to your project.
• If your application doesn’t have a Controllers subfolder, use the Add context menu to create one.

XPO

• You can use the Data Model Wizard to scaffold an XPO model.

• When you create an XPO model for an existing database, set the Nullable behavior option to By underlying type (see the Database First topic for more information). The wizard will generate nullable model properties for data columns with the NULL flag, which allows DevExtreme controls to validate these properties. Refer to the Required Attribute topic for more information.

  

• If your application doesn’t have a Controllers subfolder, use the Add context menu to create one.

Tutorial

1. Open the Solution Explorer and right-click the Controllers folder. Navigate to the Add submenu and select Controller or New Scaffolded Item.

   

2. The right-hand pane of the dialog displays items available for scaffolding. Select the DevExtreme API Controller with actions, using Entity Framework or the DevExtreme API Controller with actions, using XPO option, depending on your ORM framework of choice.

   Click Add.

   

3. EF Core

   Select the data context class and the model class. Enter the name for the controller, and click Add.

   

   XPO

   Select the data model and the model class. Enter the name for the controller, and click Add.

   

Scaffold Components

1. Open a .cshtml file and right-click the spot where you wish to insert the component.

   Select Insert a DevExtreme Control Here from the context menu.

   

2. Wait for Visual Studio to open the interactive wizard.

   DevExtreme allows you to scaffold the following components:

   • DataGrid
   • TreeList
   • Form

   Select a component from the list and click “Next”.

   

3. Configure data binding. The Model field is necessary to configure the component, even if you don’t specify a controller.

   

4. Configure component settings.

   

5. Click Add to insert the component into the .cshtml file.

   Example

   @(Html.DevExtreme().DataGrid<MyApp.Models.SampleOrder>()
       .DataSource(ds => ds.Mvc()
           .Controller("SampleData")
           .LoadAction("Get")
       )
       .RemoteOperations(true)
       .Columns(columns => {
           columns.AddFor(m => m.OrderID);
           columns.AddFor(m => m.OrderDate);
           columns.AddFor(m => m.CustomerID);
           columns.AddFor(m => m.CustomerName);
           columns.AddFor(m => m.ShipCountry);
           columns.AddFor(m => m.ShipCity);
       })
   )
   

Generate a Razor Page or an MVC view with a DevExtreme Control

You can generate a new page or view with the following DevExtreme controls:

• DataGrid
• Form
• TreeList

1. Open Solution Explorer. Right-click the target folder. Navigate to the Add submenu and click View…/Razor Page… or New Scaffolded Item….

   

2. The right-hand pane of the dialog displays items available for scaffolding. Select Razor Page with a DevExtreme Control or MVC View with a DevExtreme Control and click Add.

   

3. Wait for Visual Studio to open the Page Creation wizard.

   

   Follow the wizard’s prompts to select the page name and specify component settings.