--- title: "Scaffolding Syncfusion Controls in Blazor Applications" published_at: "2020-01-21T12:00:43+00:00" modified_at: "2025-04-23T07:55:55+00:00" url: "https://www.syncfusion.com/blogs/post/scaffolding-syncfusion-controls-in-blazor-applications" excerpt: "We are glad to announce that scaffolding support for Syncfusion Blazor components is now available with our Essential Studio® 2024 Vol 4 release. In this blog, we will explain how to use scaffolding in a Blazor application with the Syncfusion..." taxonomy_category: - "Blazor" taxonomy_post_tag: - "Blazor" - "productivity" - "Scaffolding" - "Web Development" --- # Scaffolding Syncfusion Controls in Blazor Applications [Kannan](https://www.syncfusion.com/blogs/author/skannan) ![Scaffolding Syncfusion Controls in Blazor Applications](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Scaffolding-Syncfusion-Controls-in-Blazor-Applications.jpg) We are glad to announce that scaffolding support for [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components) is now available with our [Essential Studio® 2024 Vol 4 release](https://www.syncfusion.com/forums/190121/essential-studio-2024-volume-2-service-pack-release-v26-2-4-is-available-for-download) . In this blog, we will explain how to use scaffolding in a Blazor application with the Syncfusion [DataGrid](https://www.syncfusion.com/blazor-components/blazor-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](https://www.syncfusion.com/blazor-components/blazor-datagrid) - [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) - [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) - [TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) - [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) - [Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) - [PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer) - [PDF Viewer2](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer) ## Install the Syncfusion Blazor extensions The Blazor scaffolding is part of the [Syncfusion Blazor extensions](https://blazor.syncfusion.com/documentation/visual-studio-integration/scaffolding) . To use it, you must install the Syncfusion Blazor extensions in Visual Studio. ## Install from the Visual Studio Manage Extensions dialog box Follow these steps to install the Syncfusion Blazor extensions through the Visual Studio Manage Extensions dialog box: 1. Open [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) . 2. Navigate to **Extension ->Manage Extensions.** 3. Select the **online** tab on the left side and search for ** Syncfusion Blazor** using the search box. 4. Select the **Blazor**** Extensions – Syncfusion** option from the list and click the ** Download**button. 5. Close all Visual Studio instances and click **Modify** in the VSIX installer to install the extension. ## Install from the Visual Studio Marketplace Follow these steps to install the Syncfusion Blazor extensions from the Visual Studio Marketplace: 1. Download the [Syncfusion Blazor Extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) from the Visual Studio Marketplace. 2. Close all running Visual Studio instances, if any. 3. Double-click on the downloaded extension. The VSIX Installer window will open. In it, click the **Install** button. In Syncfusion Blazor scaffolding, data binding to the selected component can be achieved using **two** types of data sources: 1. Local Data 2. Remote Data When binding data to a selected component using **local data**, it is essential to create both a ** model** and ** db context** class. **Note:** For **DataGrid** and ** TreeGrid** components specifically, a model and db context class are required to bind data when selecting ** remote data** from the ** data source type**, ** URL adaptor** from the ** adaptor type**, and ** localhost URL** from the ** remote service.** ## How to 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: - Mvc.NewtonsoftJson - SqlServer - Tools - Logging.Debug - 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 the Syncfusion Blazor 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 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 **Step 3:** In the ** Add Scaffold**dialog, select ** Syncfusion Blazor Scaffolder**and then click ** Add**. 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 **Step 5:** The Syncfusion UI Scaffolder dialog will be opened for the selected control. **Note:** For DataGrid and TreeGrid components, both local data and remote data types are available in a **Server-Side** application. In a ** Hosted** application, only the remote data type is available. **1. To bind the data using Local Data.** 1. Choose the **local data** from the data source type. 2. Enter the **Controller/Service** name and **Razor** name as application requirements, and then select the required **Model Class** of the active project and its relevant **Data Context Class**. Click ** Next**.[https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Enter-service-Razor-and-model-details-1.png](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Enter-service-Razor-and-model-details-1.png) **2. To bind the data using Remote Data.** 1. Choose the **Remote data** from the data source type. 2. Enter the **Razor page** name, select the appropriate ** Adaptor type**, provide the valid ** remote service URL**, and specify the ** TValue**. Then, click “** Next**.”[https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Enter-details-select-adaptor-and-click-Next-1.png](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Enter-details-select-adaptor-and-click-Next-1.png) When using adaptor types in Blazor scaffolding, remember that the default adaptor links are for sample purposes only. They show you how adaptors work but do not support CRUD operations **(Add, Edit, Update, Delete)**. These links are just placeholders to help you see how the integration works. If you want to perform CRUD operations, you need to provide a valid link that can handle these actions. This link should point to a service or endpoint that manages database operations for your application. By providing this link, you ensure that your application can interact with the backend service to perform CRUD operations effectively. **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**.[https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Syncfusion-UI-Scaffolder-dialog-open.png](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Syncfusion-UI-Scaffolder-dialog-open.png) **Step 7:** The ** Controller/Service**file and the corresponding ** Razor**file 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 If you select **Remote Data** with ** Localhost URL**, the controller file and razor file will be added to the application. Controller and Razor file added If you choose **Remote Data** with ** Web API adaptor types**, the razor file will be added to the application. Razor file added **Step 8:** Then, add navigation to the created razor file based on your requirement to open on the webpage. ## 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](https://www.syncfusion.com/blazor-components) such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) , and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-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](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or our [feedback portal](https://www.syncfusion.com/feedback/blazor-components) . We will implement requests based on the number of customers requesting them. ## Related blogs - [Mastering Localized Data Annotation Validation with Blazor Data Form](https://www.syncfusion.com/blogs/post/localized-annotation-validation-blazor-data-form) - [Boosting Blazor DataGrid Performance with Virtualization Techniques](https://www.syncfusion.com/blogs/post/blazor-datagrid-virtualization-types) - [Easily Create Multi-Parent Hierarchical Trees with Blazor Diagram Component](https://www.syncfusion.com/blogs/post/multi-parent-hierarchical-tree-blazor) - [Seamlessly Switch Between Project and Resource Views in the Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/switch-views-in-blazor-gantt-chart)