DevExtreme jQuery - Scaffolding

DevExtreme Scaffolder for Visual Studio allows you to generate views and API controllers for DevExtreme ASP.NET MVC Controls.

Requirements

ASP.NET MVC 5:

  • Visual Studio 2015 and later
  • C#/VB application
  • Entity Framework Data Model

ASP.NET Core MVC:

  • Visual Studio 2017 and later
  • C# application
  • Entity Framework Core Data Model

Installation

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

API Controller Scaffolding

Scaffolding helps you automate implementing a controller that follows the guidelines and is compatible with DevExtreme controls.

The scaffolded API controller contains REST actions that perform CRUD operations on entities from the selected data context. Follow the instructions below to scaffold such a controller:

  1. In Solution Explorer, right-click the Controllers folder. On the invoked menu, point to Add and then click Controller... or New Scaffolded Item....

    DevExtreme ASP.NET MVC Controls - Add New Scaffolded Item in Context Menu

  2. In the Add Scaffold window, choose DevExtreme Web API Controller with actions, using Entity Framework for an ASP.NET MVC 5 app or DevExtreme API Controller with actions, using Entity Framework for an ASP.NET Core MVC app and click Add.

    DevExtreme ASP.NET MVC Controls - Add Scaffold Window

  3. In the Add Controller window, select the data context and model for which to generate the controller, enter the controller's name, and click Add.

    DevExtreme ASP.NET MVC Controls - Add Controller Window

    NOTE
    If your project does not contain a data context, generate it by following the Entity Framework Code First to an Existing Database walkthrough for Entity Framework or the Getting Started with EF Core on ASP.NET Core with an Existing Database walkthrough for Entity Framework Core.

Finally, scaffold a DevExtreme control that works with the controller.

DevExtreme Control Scaffolding

DevExtreme Scaffolder enables you to scaffold data-bound DevExtreme controls. You can insert them into an existing view or create a new view. The following articles provide step-by-step instructions for both cases:

Insert Into an Existing View

Follow the steps below to scaffold a DevExtreme control and insert it into an existing view.

  1. Open the view for editing. Right-click on the position in which to insert the DevExtreme control's configuration and click Insert a DevExtreme Control Here in the invoked menu.

    DevExtreme ASP.NET MVC Controls - Insert a DevExtreme Control Here on the context menu

  2. In the wizard, follow the configuration steps, which include choosing which DevExtreme control to scaffold and configuring data binding and related settings. At the last step, click Add to finish the scaffolding.

    DevExtreme ASP.NET MVC Controls - The Insert a DevExtreme Control window

NOTE
Scaffolding is implemented for major controls. You can configure a missing control manually using the Fundamentals article's instructions.

Create a New View

You can also create a new view with a scaffolded DevExtreme control on it. It is an MVC view or a Razor page, depending on the type of project.

  1. In Solution Explorer, right-click the folder in which to place the view. On the invoked menu, point to Add and then click View.../Razor Page... or New Scaffolded Item....

    DevExtreme ASP.NET MVC Controls - Add New Scaffolded Item on the context menu

  2. In the Add Scaffold window, choose MVC View with a DevExtreme Control or Razor Page with a DevExtreme Control and click Add.

    DevExtreme ASP.NET MVC Controls - The Add Scaffold window

  3. In the wizard, follow the configuration steps, which include entering the view's name, choosing the DevExtreme control to scaffold, and configuring data binding and related settings. At the last step, click Add to finish the scaffolding.

    DevExtreme ASP.NET MVC Controls - The Add View window

Finally, reference the view as a partial view or use it as a separate page.

NOTE
Scaffolding is implemented for major controls. You can configure a missing control manually using the Fundamentals article's instructions.