Scaffolding Syncfusion Controls in Blazor Applications

We are glad to announce that scaffolding support for Syncfusion Blazor components is now available with our Essential Studio 2019 Vol 4 release.

In this blog, we will explain how to use scaffolding in a Blazor application with the Syncfusion DataGrid control 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 any application. It allows application developers to create the controller/service and Razor view quickly with respect to the existing models in the application.

Scaffolding support for Syncfusion Blazor controls

Developers can be more productive with Syncfusion scaffolding because it will add the necessary data to the controller/service and Razor view using Syncfusion code snippets automatically. The following are the Syncfusion Blazor controls that currently support scaffolding:

• DataGrid
• Charts
• Scheduler
• 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 do the following steps to create the Model and DB context classes in your Blazor application:

Step 1: Create a new database and table using SQL Server application, if it does not exist.

Step 2: Open an existing Blazor application project or create a new Blazor application using Visual Studio.

Step 3: Install 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: Open the Package Manager Console by selecting the project and then go to Tools->NuGet Package Manager->Package Manager Console.

Step 6: Execute 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 will be created in the application. Then build the project.

How to use Syncfusion scaffolding

Follow these steps to use Syncfusion scaffolding in a Blazor application:

Step 1: Open an existing Blazor (ServerSide or Hosted) application project or create a new one with the Entity Framework Data Model. Ensure that the application has been compiled once.

Step 2: If the project type is Blazor ServerSide, right-click the Pages folder in the Solution Explorer, click Add, and then select New Scaffolded Item….

If the project type is Blazor Hosted, right-click the Controllers folder from the {Project Name}.Server project in the Solution Explorer, click Add, and then select New Scaffolded Item….

Step 3: In the Add Scaffolddialog, select Syncfusion Blazor Scaffolderand then click Add.

Step 4: In the Syncfusion UI Scaffolder dialog, select the desired control (DataGrid in our example) to perform scaffolding, and then click Next.

Note: The Scheduler control is not available for Blazor Hosted applications.

Step 5: The Syncfusion UI Scaffolder dialog will be opened for the selected control. Enter the Controller/Servicename and Razorname as application requirements, and then select the required Model Class of the active project and its relevant Data Context Class. Click Next.

Step 6: The Syncfusion UI Scaffolder dialog for the selected control feature will open. Select the required features, update the required data field, and then click Add.

For a ServerSide Application, both local data and remote data types will be available.

For a Hosted Application, the remote data type alone will be available.

Step 7: The Controller/Servicefile and the corresponding Razorfiles are generated with the selected features of the Syncfusion control code snippet.

If you select Local Data, the service file and Razor files will be added to the project.

If you select Remote Data, the controller file and Razor file will be added to the project.

Step 8: Refer to the following UG links to render the Syncfusion control after performing scaffolding.

WebAssembly App: Configure Blazor controls using Sycnfusion.EJ2.Blazor NuGet Package

Blazor Server App: Configure Blazor controls using Sycnfusion.EJ2.Blazor NuGet Package

Conclusion

Use Syncfusion scaffolding in your project to 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 more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGrid, Charts, and Scheduler to ease the work of developers.

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 our feedback portal. We will implement requests based on the number of customers requesting them.