Skip to content

Commit 4885a68

Browse files
Update Blazor scaffolding UG content
1 parent aff8cc9 commit 4885a68

10 files changed

+47
-17
lines changed
-8.94 KB
Loading
-14.5 KB
Loading
-15.8 KB
Loading
38.8 KB
Loading
-16.8 KB
Loading
-22 KB
Loading
26.3 KB
Loading
35.7 KB
Loading
34 KB
Loading

Extension/Blazor-Extension/Visual-Studio/scaffolding.md

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
---
22
layout: post
3-
title: Scaffolding | Blazor | Syncfusion
4-
description: Code-generation Framework for Syncfusion Blazor platform to quickly create the Controller and Razor in a short time.
5-
platform: extension
6-
control: Syncfusion Extensions
3+
title: Scaffolding in Blazor Application | Syncfusion
4+
description: Learn here about scaffolding using Syncfusion Blazor Extension for Visual Studio to quickly add code to reduce the amount of development time.
5+
platform: Blazor
6+
component: Common
77
documentation: ug
88
---
99

1010
# Syncfusion Blazor Scaffolding
1111

1212
Syncfusion provides **Visual Studio Scaffolding** for the Syncfusion Blazor platform, that allowing you to quickly add code that interacts with data models and reduce the time it takes to develop with data operations in your application. Scaffolding simplifies the creation of Razor and Controller action methods for Syncfusion Blazor DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, and Document Editor, and PDF Viewer controls.
1313

14-
> Check that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exists in your application, refer to this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) to generate the Entity Framework model. After the model file has been added, check that the required DBContext and properties are added. Now, build the application, and try scaffolding. If any changes made in the model properties, rebuild the application once before perform scaffolding.
14+
N> Check that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exists in your application, refer to this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) to generate the Entity Framework model. After the model file has been added, check that the required DBContext and properties are added. Now, build the application, and try scaffolding. If any changes made in the model properties, rebuild the application once before perform scaffolding.
1515

1616
<!-- markdownlint-disable MD026 -->
1717

18-
> The Syncfusion Blazor Scaffolder is available from `v17.4.0.39` for Blazor server-side application and provided the Scaffolding support to Blazor client-side application from `v18.4.0.39`.
18+
N> The Syncfusion Blazor Scaffolder is available from `v17.4.0.39` for Blazor server-side application and provided the Scaffolding support to Blazor client-side application from `v18.4.0.39`.
1919

2020
## Add a scaffolded item
2121

2222
The steps below assist you to how to add a scaffolded item to your Blazor application.
2323

24-
> Before use the Syncfusion Blazor Scaffolding, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation/) help topic.
24+
N> Before use the Syncfusion Blazor Scaffolding, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic.
2525

2626
1. If the application type is **Blazor ServerSide**, right-click the **Pages** folder in the Solution Explorer, click **Add**, and then select **New Scaffolded Item..**
2727

@@ -31,7 +31,7 @@ The steps below assist you to how to add a scaffolded item to your Blazor applic
3131

3232
![Scaffolded add-in from the hosted project](images/Add_scaffold_hosted.png)
3333

34-
> Scheduler control is not applicable for Blazor Hosted application.
34+
N> Scheduler control is not applicable for Blazor Hosted application.
3535

3636
2. In the **Add New Scaffolded item** dialog, select **Syncfusion Blazor Scaffolder** and then click **‘Add’**.
3737

@@ -41,11 +41,33 @@ The steps below assist you to how to add a scaffolded item to your Blazor applic
4141

4242
![Choose required control](images/Control_Window.png)
4343

44-
4. The Syncfusion UI Scaffolder dialog for the selected control will be displayed. As application requirements, enter the **Controller/Service Name** and **Razor Name**, then select the active application's required **Model Class** and its relevant **Data Context Class**, and then click **Next**.
44+
4. The Syncfusion UI Scaffolder dialog for the selected control will be displayed. As per the application requirements, follow these steps to set up your application.
4545

46-
![Choose required Model](images/Model_Window.png)
46+
### Select Data Source Type
47+
48+
1. **Local Data (default selection)**
4749

48-
5. The dialog for the selected control feature will be opened in the Syncfusion UI Scaffolder. Select the required features, update the necessary data fields, and then click **Add**.
50+
To set up your application with local data, first enter the **Controller/Service name** and then enter the **Razor page name**. Next, select the required **Model class** for the active application and choose the relevant **Data context class**. Finally, click **Next** to continue.
51+
52+
![Choose required Model](images/Model_Window_Local.png)
53+
54+
N> We are introducing Adaptor types in Blazor scaffolding for remote data.
55+
56+
2. **Remote Data**
57+
58+
To set up your application with remote data, first enter the **Razor page name**, choose the **Adaptor type**, and then enter the valid **URL**. Next, enter the **TValue**. Finally, click **Next** to continue.
59+
60+
N> In the DataGrid and TreeGrid controls, when selecting the **URL adaptor** in the **Adaptor type**, an additional **Remote service** option will appear. You need to select either the **Localhost URL** or **API URL**.
61+
If you select the **Localhost URL**, enter the **Controller/Service name**. Then, select the required **Model class** for the active application and choose the relevant **Data context class**. Finally, click **Next** to continue.
62+
If you select the **API URL**, enter the valid **URL**. Next, enter the **TValue**. Finally, click **Next** to continue.
63+
64+
![Choose required Model](images/Model_Window_Remote.png)
65+
66+
When using adaptor types in Blazor scaffolding, it's important to note that we provide default adaptor links for sample purposes only. These default links are designed to help you understand how the adaptors work, but they do not perform CRUD (Add, Edit, Update, Delete) operations. Instead, these default links are placeholders to demonstrate the integration process.
67+
68+
To help you implement CRUD operations, we will provide sample code that you can use as a reference. This code will guide you through the necessary steps to enable CRUD functionality in your application. You can modify and integrate this sample code to suit your specific requirements.
69+
70+
However, if you wish to perform CRUD operations, you need to provide a valid link that handles these operations. This link should point to an endpoint or a service that is capable of managing the database operations required by your application. By providing this link, you ensure that your application can interact with the back end service to perform CRUD operations effectively.
4971

5072
For **ServerSide Application**, both Local data and Remote data types will be available.
5173

@@ -55,25 +77,33 @@ The steps below assist you to how to add a scaffolded item to your Blazor applic
5577

5678
![Choose required selected control features for the hosted project](images/Fetaure_window_hosted.png)
5779

80+
5. In the Syncfusion UI Scaffolder, the dialog for the selected control feature will open. Choose the required features, update the necessary data fields, and then click **Add**.
81+
82+
![Choose required selected control features for the hosted project](images/Fetaure_window_hosted_feature.png)
83+
5884
6. With the selected features of the Syncfusion control code snippet, the **Controller/Service** file and the corresponding **Razor** files are generated.
5985

6086
If you select **Local Data**, the service file and razor file will be added to the application.
6187

6288
![Required Controller and Razor files added in the project for the selected control](images/Files_for_local_data.png)
6389

64-
If you select **Remote Data**, the controller file and razor file will be added to the application.
90+
If you select **Remote Data with Localhost URL**, the controller file and razor file will be added to the application.
6591

6692
![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data.png)
6793

94+
If you choose **Remote Data with Web API adaptor types**, the razor file will be added to the application.
95+
96+
![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data_adaptor.png)
97+
6898
7. Then, add navigation to the created razor file based on your requirement to open on the webpage.
6999

70-
8. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion license key to your application. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx?_ga=2.11237684.1233358434.1587355730-230058891.1567654773) post for understanding the licensing changes introduced in Essential Studio.
100+
8. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx?_ga=2.11237684.1233358434.1587355730-230058891.1567654773) post for understanding the licensing changes introduced in Essential Studio.
71101

72102
## Syncfusion Blazor Command-line Scaffolding
73103

74104
**Scaffolding command-line** for Syncfusion Blazor allows you to quickly add code that interacts with data models and reduce the amount of time it takes to develop with data operations in your application. Scaffolding simplifies the creation of view file and Controller action methods for Syncfusion Blazor DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer controls.
75105

76-
> Verify that at least one Entity Framework model exists. If your application lacks an Entity Framework model, use this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) 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.
106+
N> Verify that at least one Entity Framework model exists. If your application lacks an Entity Framework model, use this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) 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.
77107

78108
## Install Command-line Scaffolding
79109

@@ -91,7 +121,7 @@ Update **syncfusion.scaffolding** tool globally by using below command.
91121

92122
The steps below will assist you to how to add a scaffolded item from command-line to your Blazor application.
93123

94-
> Before adding the scaffolded item from command-line, check whether the **dotnet-aspnet-codegenerator** tool is installed or not by **dotnet tool list -g** command in command prompt. if it is not installed, then install **dotnet-aspnet-codegenerator** tool globally by using this command **dotnet tool install -g dotnet-aspnet-codegenerator**.
124+
N> Before adding the scaffolded item from command-line, check whether the **dotnet-aspnet-codegenerator** tool is installed or not by **dotnet tool list -g** command in command prompt. if it is not installed, then install **dotnet-aspnet-codegenerator** tool globally by using this command **dotnet tool install -g dotnet-aspnet-codegenerator**.
95125

96126
1. After installed syncfusion.scaffolding tool, we can invoke syncfusion_scaffold command and it shows the available controls
97127

@@ -143,6 +173,6 @@ The steps below will assist you to how to add a scaffolded item from command-lin
143173

144174
Refer to the following UG links to render Syncfusion control after performing scaffolding:
145175

146-
WebAssembly App: [Configure Blazor components using Syncfusion.Blazor NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio-2019/)
176+
WebAssembly App: [Configure Blazor components using Syncfusion Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
147177

148-
Blazor Server App: [Configure Blazor components using Syncfusion.Blazor NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/)
178+
Blazor Server App: [Configure Blazor components using Syncfusion Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)

0 commit comments

Comments
 (0)