Scaffolding Syncfusion Controls in ASP.NET Core Applications

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:

• DataGrid
• Charts
• Scheduler
• Diagram
• TreeGrid
• Rich Text Editor
• Document Editor
• PDF Viewer

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…

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.

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

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.

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

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

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 forum, Direct-Trac, or feedback portal. We will implement requests based on the number of customers requesting them.