Share on twitter
Share on facebook
Share on linkedin
Scaffolding Syncfusion Controls in Blazor Applications

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:

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….

Adding New Scaffolded Item from ServerSide project
Adding New Scaffolded Item from ServerSide project

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….

Adding New Scaffolded Item from Hosted project
Adding New Scaffolded Item from Hosted project

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

Adding Syncfusion Blazor Scaffolder
Adding Syncfusion Blazor Scaffolder

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

Syncfusion UI Scaffolder control selection dialog
Syncfusion UI Scaffolder control selection dialog

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.

DataGrid model configuration dialog
DataGrid model configuration dialog

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.

DataGrid feature selection dialog for ServerSide applications
DataGrid feature selection dialog for ServerSide applications

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

DataGrid feature selection dialog for hosted application
DataGrid feature selection dialog for hosted application

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.

Service and Razor file added
Service and Razor file added

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

Controller and Razor file added
Controller and Razor file added

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

WebAssembly AppConfigure 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.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

Does scaffolding support grouped data when using the datagrid?

Hi Alan,

Yes, you can enable the grouping in DataGrid by checking the Grouping checkbox from the feature selection dialog.

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top