Syncfusion® Blazor scaffolding

18 Apr 202611 minutes to read

Use the Syncfusion^® Scaffolder to quickly create data-driven pages and services for Blazor. The Scaffolder generates controller/service classes and Razor pages wired to your project’s data model and Syncfusion^® Blazor components saving time on routine tasks like data binding, CRUD wiring, and component configuration.

NOTE

Ensure your project includes at least one Entity Framework Core model and that the solution builds successfully. If you do not have a model, see Microsoft’s EF Core documentation for creating models. After adding or modifying model properties, rebuild the project before running scaffolding.

NOTE

The Syncfusion^® Blazor Scaffolder is available from v17.4.0.39 for Blazor Server projects and supports Blazor WebAssembly (client) starting in v18.4.0.39.

Add a scaffolded item

Follow these steps to add a scaffolded item to a Blazor application using the Visual Studio extension.

NOTE

Verify that the Syncfusion^® Blazor Template Studio extension is installed in Visual Studio (Extensions → Manage Extensions → Installed). See the download and installation topic if it is not installed.

For a Blazor Server app: in Solution Explorer, right-click the Pages folder → Add → New Scaffolded Item….

For a Blazor Hosted app: right-click the Controllers folder under {Project Name}.Server → Add → New Scaffolded Item….
In the Add New Scaffolded Item dialog, choose Syncfusion Blazor Scaffolder and click Add.
In the Syncfusion^® UI Scaffolder dialog, pick the control you want to scaffold and click Next.
Configure the data source and code generation options.

Select Data Source Type:
- Local data (default)
  
  Enter Controller/Service name and Razor page name, then select the Model class and DbContext. Click Next to continue.
  
  NOTE
  
  Adaptor types are available in Blazor scaffolding for remote data.
- Remote data
  
  Enter the Razor page name, choose an Adaptor type, provide a valid URL, and specify the TValue. Click Next to continue.
  
  When you choose the URL adaptor for DataGrid or TreeGrid, a Remote service option appears. Select either Localhost URL (provide a Controller/Service name and Model/DbContext) or API URL (enter a valid endpoint and TValue). The Scaffolder provides sample adaptor links for demonstration only—these placeholders do not perform CRUD operations. To enable real CRUD, supply a working backend endpoint that implements the required operations.
In the feature dialog for the selected control, choose the fields and options you want, then click Add.
The Scaffolder generates the Controller/Service and corresponding Razor files based on your selections.
- For Local data, both service and Razor files are added:
- For Remote data using Localhost URL, the controller and Razor files are added:
- For Remote data with a Web API adaptor, the Razor page is added (the API must be present to enable full CRUD):
Add navigation to the generated Razor page so it is reachable from your app’s UI.
Licensing: If you used trial installers or NuGet packages from nuget.org, register your Syncfusion® license key. Licensing was introduced in Essential Studio® 2018 Volume 2 (v16.2.0.41). See the help topic to generate and register the key. For background on the licensing change, see this blog post.

Syncfusion^® Blazor command-line scaffolding

The Syncfusion^® Blazor command-line scaffolding helps quickly add code that interacts with data models, reducing the time required to develop data operations. It simplifies creating view files and controller action methods for Syncfusion^® Blazor components such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer.

NOTE

Verify that at least one Entity Framework model exists. If your application lacks an Entity Framework model, use this documentation to create one. After you’ve added the model file, double-check that the necessary DBContext and properties have been added. Now, build the application and experiment with scaffolding. If any changes made in the model properties, rebuild the application once before perform scaffolding.

Install command-line scaffolding

Install the syncfusion.scaffolding tool globally using the following command.

dotnet tool install -g syncfusion.scaffolding

Update command-line scaffolding

Update the syncfusion.scaffolding tool globally using the following command.

dotnet tool update -g syncfusion.scaffolding

Add a scaffolded item from the command line

The following steps describe how to add a scaffolded item from the command line to a Blazor application.

NOTE

Before adding a scaffolded item from the command line, verify that the dotnet-aspnet-codegenerator tool is installed by running dotnet tool list -g. If it is not installed, install it globally with dotnet tool install -g dotnet-aspnet-codegenerator.

After installing the syncfusion.scaffolding tool, run the syncfusion_scaffold command to view available components.

syncfusion_scaffold

To add a scaffolded item from the command line, use the following syntax.

syncfusion_scaffold [control][arguments]

Parameter	Description	Control
-p\|–project	Path to .csproj file in the project.	All Controls
-cname\|–controller-filename	Name of controller file to be added in project.	All controls
-vname\|–view-filename	Name of view file to be added in project.	All Controls
-m\|–model	Database model name with namespace (example: WebApplication1.Models.Tasks).	All Controls
-dc\|–db-context	DbContext name with namespace (example: WebApplication1.Models.TasksContext).	All Controls
-pkey\|–primary-key	Set Feature name/column name as primary key.	Data Grid/Tree Grid
-tid\|–treegrid-id	Id of Tasks.	Tree Grid
-pid\|–parent-id	Parent Id value	Tree Grid/Diagram
-x\|–x-axis	X-axis of Chart	Charts
-Y\|–Y-axis	Y-axis of Chart	Charts
-sid\|–scheduler-id	Id of Scheduler Event.	Scheduler
-stime\|–start-time	Start Time of Scheduler Event.	Scheduler
-etime\|–end-time	End Time of Scheduler Event.	Scheduler
–is-all-day	Set IsALLDay for Scheduler Event.	Scheduler
-did\|–diagram-id	Id of Diagram layout.	Diagram

Running syncfusion_scaffold [control] displays the available parameters for the specified component.
Run the following command to generate controller and view files from the command line by passing the required arguments for the specified component.

syncfusion_scaffold {controlName} --project "{projectFileNamewithPath}" --model {model} -dc {dbContext} -cname {controllerName} -vname {viewName} [controlMantoryParameter] [controlMantatoryParameterValue]
After generation, the controller and view files are created successfully, and the required Syncfusion^® NuGet packages and styles are added to render the component.