Scaffolding Syncfusion Controls in ASP.NET Core Applications | Syncfusion Blogs
Detailed Blog page Skeleton loader
Scaffolding ASP.NET Core

Syncfusion is happy to announce that scaffolding support for Syncfusion ASP.NET Core controls is available with our 2019 Vol 4 (v17.4.0.39) release.

In this blog, we will explain how to use scaffolding in an ASP.NET Core application with the Syncfusion DataGrid control for ASP.NET Core as an example.

What is scaffolding?

Scaffolding is a great way to kick-start model-view-controller (MVC) framework development. It is a code-generation framework for ASP.NET Core applications. Application developers can quickly create the controller and views with respect to the existing models in the application.

Scaffolding support for Syncfusion ASP.NET Core controls

Developers can be more productive with Syncfusion scaffolding because the system will fill in the data with Syncfusion code snippets to controllers and views. The following are the Syncfusion ASP.NET Core controls that support scaffolding:

Create model and DB context classes

To perform Syncfusion scaffolding, you should use model and DB context classes in your application. Please follow these steps to create model and DB context classes in an ASP.NET Core application, if does not exist:

Step 1: Create a new database and table using the SQL Server application if the project does not have the database.

Step 2: Open an existing ASP.NET Core web application project or create a new one in Visual Studio.

Step 3: Install the following NuGet packages in the application:

  • AspNetCore.Mvc.NewtonsoftJson
  • EntityFrameworkCore.SqlServer
  • EntityFrameworkCore.Tools
  • Extensions.Logging.Debug
  • VisualStudio.Web.CodeGeneration.Design

Step 4: To connect your SQL Server, go to View->SQL Server Object Explorer in SQL Server Object Explorer, right-click your database, and then copy the connection string.

Step 5: Now, open the Package Manager Console by selecting the project and then go to Tools->NuGet Package Manager->Package Manager Console.

Step 6: Execute the following commands in the Package Manager Console with the copied connection string:

>Scaffold-DbContext “{Connection String}” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Model -Context “{Db context class name}” -DataAnnotations

Step 7: Now, Model and DbContext classes are created in the application. Build the project.

How to use Syncfusion scaffolding

Follow these steps to use Syncfusion scaffolding:

Step 1: Open an existing ASP.NET Core web application project or create a new one with the Entity Framework Data Model. Ensure that the application has been compiled once.

Step 2: Right-click the Controllersfolder in the Solution Explorer and select Add > New Scaffolded Item

Adding New Scaffolded Item
Adding New Scaffolded Item

Step 3: You will see the Add Scaffolddialog. Select Syncfusion ASP.NET Core UIScaffolder and click Add. This will display the Syncfusion UI Scaffolding dialog.

Adding Syncfusion ASP.NET Core UI Scaffolder
Adding Syncfusion ASP.NET Core UI Scaffolder

Step 4: Select the desired control—DataGridin our example—on which scaffolding should be performed and click Next.

Syncfusion UI Scaffolding control selection dialog
Syncfusion UI Scaffolding control selection dialog

The Syncfusion UI scaffolding for the selected control dialog will open.

Since we selected the DataGrid control, the model configuration dialog will open as shown in the following figure. Enter the Controller Name and View Name as per the application requirements. Select the required Model Class of the active project and its relevant Data Context Class and then click Next.

DataGrid model configuration dialog
DataGrid model configuration dialog

Step 5: In the wizard, select the features of your choice to be included and click Add.

DataGrid feature selection dialog
DataGrid feature selection dialog

The Controller and the corresponding View files will now be generated with the code snippets of the selected features.

Controller and view files added
Controller and view files added

Step 6: Then, add navigation to the created view file based on your requirement to open it in the webpage.

Step 7: Refer to the following UG documentation link to render the Syncfusion control after performing scaffolding.

Configure ASP.NET Core controls using the Syncfusion.EJ2.AspNet.Core package

Conclusion

Use Syncfusion scaffolding in your project to quickly add code that interacts with data models. Using it can reduce the amount of time it takes you to develop standard data operations in your project.

Syncfusion provides 70+ high-performance, lightweight, modular, and responsive ASP.NET Core UI controls such as DataGrid, Charts, and Scheduler. You can use these controls to speed up your application development.

For which control are you anticipating scaffolding support? Let us know in the comment section below. You can also contact us through our support forumDirect-Trac, or feedback portal. We will implement requests based on the number of customers requesting them.

Be the first to get updates

Kannan

Meet the Author

Kannan

Kannan is a Product Manager in Syncfusion. He has been a .NET developer since 2010. He is currently working with Visual Studio extensions and helps skillfully configure Syncfusion components in applications.

Comments (4)

Hi,
When my DataContext and Models are in a different project, they do not show up in the dropdowns. This is a very common setup so I was surprised to not see the Classes of project references.

@ Leslie Farago  

Regret for the inconvenience. We have implemented to get the DataContext and model from other projects which added in the same solution. Please download the Syncfusion ASP.NET Core VSIX from the below link and extract the zip file.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionVSIXInstaller-479394796

To uninstall and install the updated Visual Studio Extension, run the SyncfusionVSIXInstaller.exe.

@ Kannan  

Is there an update for this for VS2022?

@ Kevin Williams  

Hi Kevin,

We have provided ASP.NET Core extension for Visual Studio 2022. Please refer the below documentation and install the Syncfusion ASP.NET Core extension in Visual Studio 2022 then try out the scaffolding.

https://ej2.syncfusion.com/aspnetcore/documentation/visual-studio-integration/download-and-installation

Regards,
Kannan

Comments are closed.