diff --git a/blazor/visual-studio-integration/code-generator.md b/blazor/visual-studio-integration/code-generator.md index 799d930208..c7c4b2935c 100644 --- a/blazor/visual-studio-integration/code-generator.md +++ b/blazor/visual-studio-integration/code-generator.md @@ -1,51 +1,51 @@ --- layout: post -title: Code Generator in Blazor | Syncfusion -description: Learn here about adding the Blazor Component using Code Generator of Syncfusion Blazor Extension for Visual Studio. +title: Code generator for the Blazor extension | Syncfusion +description: Learn how to add Syncfusion Blazor component markup using the Code Generator in the Syncfusion Blazor extension for Visual Studio. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- # Add Syncfusion® Blazor component code -Syncfusion® provides a Code Generator component for the Blazor platform, allowing you to quickly insert component code into the desired location within a Razor file. The Syncfusion® extension automatically adds the necessary Syncfusion® components along with the required namespaces, styles, and NuGet references. The Code Generator is a simple wizard that interacts with data models and integrates Syncfusion® components with the required features into your application. +Syncfusion® provides a Code Generator component for the Blazor platform, allowing you to quickly insert component code into the desired location within a Razor file. The Syncfusion® extension automatically adds the necessary Syncfusion® components along with the required namespaces, styles, and NuGet references. The Code Generator is a simple wizard that interacts with data models and integrates Syncfusion® components with the required features into your application. -The steps below will assist you to add the Syncfusion® components code in your Blazor application through **Visual Studio 2022**: +Use the following steps to add Syncfusion® components to a Blazor application in **Visual Studio 2022**: -N> Before using the Syncfusion® Blazor Code Generator, check whether the Syncfusion® Blazor Extension is 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. +N> Before using the Syncfusion® Blazor Code Generator, verify that the Syncfusion® Blazor extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If it is not installed, follow the steps in the [download and installation](download-and-installation) topic. -1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2022 or Visual Studio 2022. +1. Open an existing Blazor application or create a new one in Visual Studio 2022. -2. To open the Syncfusion® Blazor Code Generator Wizard, select one of the options below in the Razor file, and then add Syncfusion® components: +2. To open the Syncfusion® Blazor Code Generator wizard from a Razor file, use one of the following options: **Option 1:** - To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor Code Generator...** + To generate a specific component code, right-click in the Razor editor at the desired line and select **Syncfusion® Blazor Code Generator...** ![CodeGeneratorCommand](images/Code-Generator-Command.PNG) **Option 2:** - Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for Blazor -> Syncfusion® Blazor Code Generator…** from the Visual Studio menu. + Place the cursor at the required line in the .razor file, then choose **Extensions -> Syncfusion -> Essential Studio for Blazor -> Syncfusion Blazor Code Generator…** from the Visual Studio menu. ![CodeGeneratorMenu](images/Code-Generator-Menu.PNG) -3. The wizard for the Syncfusion® Blazor Code Generator will appear. Choose a required control. +3. The Syncfusion® Blazor Code Generator wizard opens. Choose the required component. ![CodeGeneratorWizard](images/Code-Generator-MainWizard.png) **Data Binding:** Data operation fields will be visible if the selected component has data. The data will be listed from your application. It interacts with data models and reduces the amount of time spent developing your application. You can choose the required Data Model Class, Data Source, Id, and more from your application. - **Feature:** Selected component features are listed. You can select the required features. + **Features:** Lists available features for the selected component. Choose the required options. - **Control requirements:** Contains the required user input fields for the selected component. You can provide the required value for those fields to add the component code. + **Component requirements:** Contains the required inputs for the selected component. Provide values to complete the generated markup. You can provide the required value for those fields to add the component code. - Click **Insert**. It generates the selected component render code and inserts it wherever the cursor is positioned. + Click **Insert** to generate the selected component render mode and insert it at the cursor location. ![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.PNG) -4. In the Output window, select the **Syncfusion® Blazor Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. +4. In the Output window, select **Syncfusion Blazor Code Generator** from the **Show output from** list to review the changes applied to the application. ![OutputWindow](images/Code-Generator-OutputWindow.PNG) diff --git a/blazor/visual-studio-integration/download-and-installation.md b/blazor/visual-studio-integration/download-and-installation.md index c892322f01..7a93d30099 100644 --- a/blazor/visual-studio-integration/download-and-installation.md +++ b/blazor/visual-studio-integration/download-and-installation.md @@ -1,71 +1,71 @@ --- layout: post -title: Download and Installation of Blazor Extension | Syncfusion -description: Check out the documentation for download and installation of Syncfusion Blazor Extension for Visual Studio. +title: Download and installation of the Blazor extension | Syncfusion +description: Learn here about how to download and install the Syncfusion Blazor extension for Visual Studio and manage the Blazor applications. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Download and Installation +# Download and installation -Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. +Syncfusion® publishes the Visual Studio extension in the Visual Studio Marketplace. Install it directly from Visual Studio or download and install it from the Visual Studio Marketplace. -[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) +[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) ## Prerequisites -The following software prerequisites must be installed to install the Syncfusion® Blazor extension, as well as to creating, adding snippet, converting, and upgrading Syncfusion® Blazor applications. +The following software is required to install the Syncfusion® Blazor extension and to create projects, add snippets, convert, and upgrade Syncfusion® Blazor applications. * [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). -* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). +* [.NET 9.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet). -* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). +* [.NET 8.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet). -## Install through the Visual Studio Manage Extensions +## Install through Visual Studio Manage Extensions -The steps below assist you to how to install the Syncfusion® Blazor extensions from **Visual Studio Manage Extensions**. +The following steps describe how to install the Syncfusion® Blazor extension from **Manage Extensions** in Visual Studio. -1. Open the Visual Studio 2022. +1. Open Visual Studio 2022. -2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. +2. Navigate to **Extensions -> Manage Extensions** to open the Manage Extensions window. -3. On the left, click the **Online** tab and type **"Syncfusion® Blazor"** in the **search box**. +3. In the **Online** tab, search for **Syncfusion Blazor**. - ![Online-Manage-Extension-window](images/OnlineExtension.png) + ![Manage Extensions window showing Syncfusion Blazor search results](images/OnlineExtension.png) -4. Click the **Download** button in the **“Syncfusion® Blazor Template Studio”** extensions. +4. Click **Download** for the **Syncfusion Blazor Template Studio** extension. -5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. +5. Close all Visual Studio instances to begin the installation process. A VSIX installation prompt appears. - ![VSIX-Installation-Window](images/VSIXinstallation.png) + ![VSIX Installer prompting to modify Visual Studio](images/VSIXinstallation.png) -6. Click the **Modify** button. +6. Click **Modify**. 7. After the installation is complete, open Visual Studio. -8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. +8. In the **Extensions** menu, access the Syncfusion® extensions in Visual Studio. ![SyncfusionMenu](images/SyncfusionMenu.png) ## Install from the Visual Studio Marketplace -The steps below illustrate how to download and install the Syncfusion® Blazor extension from the Visual Studio Marketplace. +The following steps illustrate how to download and install the Syncfusion® Blazor extension from the Visual Studio Marketplace. -1. Download the Syncfusion® Blazor Extensions from the below Visual Studio Marketplace. +1. Download the Syncfusion® Blazor extension from the Visual Studio Marketplace. - [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + [Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) 2. Close all Visual Studio instances running, if any. -3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. +3. Double-click the downloaded VSIX file to install. In the VSIX Installer, select the Visual Studio instance(s) to install the extension. - ![VSIX-Installation-Window](images/VSIXinstallation1.png) + ![VSIX Installer showing Visual Studio instance selection](images/VSIXinstallation1.png) 4. Click the **Modify** button. -5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. +5. After installation completes, open Visual Studio. The Syncfusion® extensions are available under the **Extensions** menu. ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/blazor/visual-studio-integration/images/controlssection1.png b/blazor/visual-studio-integration/images/controlssection1.png index 6957cddf51..15c2918205 100644 Binary files a/blazor/visual-studio-integration/images/controlssection1.png and b/blazor/visual-studio-integration/images/controlssection1.png differ diff --git a/blazor/visual-studio-integration/overview.md b/blazor/visual-studio-integration/overview.md index d80ffcef44..82b645d3f2 100644 --- a/blazor/visual-studio-integration/overview.md +++ b/blazor/visual-studio-integration/overview.md @@ -1,26 +1,26 @@ --- layout: post -title: Overview of Syncfusion Blazor Extension for Visual Studio | Syncfusion -description: Learn here all about introduction on Syncfusion Blazor extension for Visual Studio which made integration ease. +title: Overview of Blazor extension for Visual Studio | Syncfusion +description: Learn here about the Syncfusion Blazor extension for Visual Studio and how it streamlines integration with Syncfusion components. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Overview of Blazor Extension for Visual Studio +# Overview of Blazor extension for Visual Studio -The Syncfusion® Blazor Extension for Visual Studio simplifies the use of the Syncfusion® Blazor components by configuring the Syncfusion® Blazor NuGet packages and themes. We provide separate Blazor extension for both Visual Studio 2022 and Visual Studio 2019. +The Syncfusion® Blazor extension for Visual Studio streamlines working with Syncfusion® Blazor components by configuring the required Syncfusion® NuGet packages and themes. Separate extensions are available for Visual Studio 2022 and Visual Studio 2019. -[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) +[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) -[Visual Studio 2019](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) +[Download the Visual Studio 2019 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) -The Syncfusion® Blazor extensions provides the following add-ins in Visual Studio: +The Syncfusion® Blazor extension provides the following add-ins in Visual Studio: -[Project-Template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion® Blazor component. +[Project template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion®Visual Blazor component. -[Code Generator](code-generator): Adds Syncfusion® Blazor component code in razor file at required place. +[Code generator](code-generator): Adds Syncfusion® Blazor component code in razor file at required place. -[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by importing the necessary Syncfusion® NuGet packages. +[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by adding the required Syncfusion® NuGet packages and theme. -[Upgrade project](upgrade-project): Upgrades the existing Syncfusion® Blazor Web Application from one Essential Studio® version to another version. \ No newline at end of file +[Upgrade project](upgrade-project): Upgrades an existing Syncfusion® Blazor Web Application from one Essential Studio version to another. diff --git a/blazor/visual-studio-integration/scaffolding.md b/blazor/visual-studio-integration/scaffolding.md index d4cf8b7872..4f9db8d2eb 100644 --- a/blazor/visual-studio-integration/scaffolding.md +++ b/blazor/visual-studio-integration/scaffolding.md @@ -1,59 +1,59 @@ --- layout: post -title: Scaffolding in Blazor Application | Syncfusion -description: Learn here about scaffolding using Syncfusion Blazor Extension for Visual Studio to quickly add code to reduce the amount of development time. +title: Scaffolding in Blazor Applications | Syncfusion +description: Learn how to use the Syncfusion Blazor extension for Visual Studio to scaffold pages and code, accelerating data-driven development. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Syncfusion® Blazor Scaffolding +# Syncfusion® Blazor scaffolding -Syncfusion® provides **Visual Studio Scaffolding** for the Syncfusion® Blazor platform, allowing you to quickly add code that interacts with data models, reducing the time required for developing data operations in your application. Scaffolding simplifies the creation of Razor pages and Controller action methods for Syncfusion® Blazor controls such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. +Syncfusion® provides Visual Studio scaffolding for the Syncfusion® Blazor platform to quickly add code that interacts with data models, reducing development time for data operations. Scaffolding simplifies creating Razor pages and controller action methods for Syncfusion® Blazor components such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. -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. +N> Ensure that at least one Entity Framework Core model exists and that the application has been built once. If a model does not exist, see the Microsoft documentation for creating an [Entity Framework Core model](https://learn.microsoft.com/en-us/ef/core/modeling/). After adding the model, verify that the required DbContext and properties are present. Build the application before running scaffolding. If model properties change, rebuild the application before scaffolding again. -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`. +N> The Syncfusion® Blazor Scaffolder is available from `v17.4.0.39` for Blazor Server applications and includes support for Blazor WebAssembly (client) applications starting with `v18.4.0.39`. ## Add a scaffolded item -The steps below assist you to how to add a scaffolded item to your Blazor application. +The following steps describe how to add a scaffolded item to a Blazor application. -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. +N> Before using the Syncfusion® Blazor scaffolding, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If it is not installed, follow the steps in the [download and installation](download-and-installation) topic. -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..** +1. For a **Blazor Server** application, right-click the **Pages** folder in Solution Explorer, select **Add**, and then choose **New Scaffolded Item...** ![Scaffolded add-in from server project](images/Add_scaffold_Serverside.png) - If the application type is **Blazor Hosted**, right-click the **Controllers** folder from **{Project Name}.Server** application in the Solution Explorer, click **Add**, and then select **New Scaffolded Item**. + If the application type is **Blazor Hosted**, right-click the **Controllers** folder from **{Project Name}.Server** application in the Solution Explorer, click **Add**, and then select **New Scaffolded Item...**. ![Scaffolded add-in from the hosted project](images/Add_scaffold_hosted.png) -2. In the **Add New Scaffolded item** dialog, select **Syncfusion® Blazor Scaffolder** and then click **‘Add’**. +2. In the **Add New Scaffolded Item** dialog, select **Syncfusion Blazor Scaffolder** and then click **Add**. ![Choose Syncfusion Scaffolding from Visual Studio Add scaffold dialog](images/Syncfusion_scaffolder.png) -3. In the Syncfusion® UI Scaffolder dialog, select the desired control to perform scaffolding, and then click **Next**. +3. In the Syncfusion® UI Scaffolder dialog, select the desired component to scaffold, and then click **Next**. ![Choose required control](images/Control_Window.png) -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. +4. The Syncfusion® UI Scaffolder dialog for the selected component appears. Follow these steps to configure the application. **Select Data Source Type** - 1. Local Data (default selection) + 1. Local data (default) - 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. + To use local data, enter the **Controller/Service name** and the **Razor page name**. Then select the required **Model class** and the corresponding **Data context class**. Click **Next** to continue. ![Choose required Model](images/Model_Window_Local.png) - N> We are introducing Adaptor types in Blazor scaffolding for remote data. + N> Adaptor types are available in Blazor scaffolding for remote data. - 2. Remote Data + 2. Remote data - 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. + To use remote data, enter the **Razor page name**, choose an **Adaptor type**, and provide a valid **URL**. Then specify the **TValue**. Click **Next** to continue. 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**. 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. If you select the **API URL**, enter the valid **URL**. Next, enter the **TValue**. Finally, click **Next** to continue. @@ -65,67 +65,67 @@ N> Before use the Syncfusion® Blazor Scaffolding, check whether the Syncfusion 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 service capable of managing the database operations required by your application. By providing this link, you ensure that your application can effectively interact with the back-end service to perform CRUD operations. - For **ServerSide Application**, both Local data and Remote data types will be available. + For a **Blazor Server** application, both local data and remote data types are available. ![Choose required selected control features for the serverside project](images/Feature_Window_serverside.png) - For **Hosted Application**, Remote data type only available. + For a **Hosted Application**, only the remote data type is available. ![Choose required selected control features for the hosted project](images/Fetaure_window_hosted.png) -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**. +5. In the Syncfusion® UI Scaffolder, the dialog for the selected component features opens. Choose the required features, update the necessary data fields, and then click **Add**. ![Choose required selected control features for the hosted project](images/Fetaure_window_hosted_feature.png) -6. With the selected features of the Syncfusion® control code snippet, the **Controller/Service** file and the corresponding **Razor** files are generated. +6. Based on the selected features, the **Controller/Service** file and the corresponding **Razor** files are generated. - If you select **Local Data**, the service file and razor file will be added to the application. + If **Local data** is selected, the service file and Razor file are added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_local_data.png) - If you select **Remote Data with Localhost URL**, the controller file and razor file will be added to the application. + If **Remote data with Localhost URL** is selected, the controller file and Razor file are added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data.png) - If you choose **Remote Data with Web API adaptor types**, the razor file will be added to the application. + If **Remote data with Web API adaptor** is selected, the Razor file is added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data_adaptor.png) 7. Then, add navigation to the created razor file based on your requirement to open on the webpage. -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®. +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) post for understanding the licensing changes introduced in Essential Studio®. -## Syncfusion® Blazor Command-line Scaffolding +## Syncfusion® Blazor command-line scaffolding -The **Scaffolding command-line** for Syncfusion® Blazor allows you to quickly add code that interacts with data models, reducing the time required to develop data operations in your application. Scaffolding simplifies the creation of view files and Controller action methods for Syncfusion® Blazor controls such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. +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. 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. -## Install Command-line Scaffolding +## Install command-line scaffolding -Install **syncfusion.scaffolding** tool globally by using below command. +Install the **syncfusion.scaffolding** tool globally using the following command. ```dotnet tool install -g syncfusion.scaffolding``` -## Update Command-line scaffolding +## Update command-line scaffolding -Update **syncfusion.scaffolding** tool globally by using below command. +Update the **syncfusion.scaffolding** tool globally using the following command. ```dotnet tool update -g syncfusion.scaffolding``` -## Add a scaffolded item from command-line +## Add a scaffolded item from the command line -The steps below will assist you to how to add a scaffolded item from command-line to your Blazor application. +The following steps describe how to add a scaffolded item from the command line to a Blazor application. -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**. +N> 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`. -1. After installed syncfusion.scaffolding tool, we can invoke syncfusion_scaffold command and it shows the available controls +1. After installing the syncfusion.scaffolding tool, run the `syncfusion_scaffold` command to view available components. **syncfusion_scaffold** ![CommandLine Scaffold Available Controls](images/AvailableControl.png) -2. To add a scaffolded item from command-line you must invoke syncfusion_scaffold application like below syntax +2. To add a scaffolded item from the command line, use the following syntax. **syncfusion_scaffold [control][arguments]** @@ -147,17 +147,17 @@ N> Before adding the scaffolded item from command-line, check whether the **dotn | --is-all-day | Set IsALLDay for Scheduler Event. | Scheduler | | -did|--diagram-id | Id of Diagram layout. | Diagram | -3. If you run the syncfusion_scaffold [control] command, the parameters of control shown like below image. +3. Running `syncfusion_scaffold [control]` displays the available parameters for the specified component. ![control parameter details](images/controlparameter.png) -4. Run the following command to generate controller and view files through command-line by passing required arguments of the given control. +4. 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]``` ![CommandLine Scaffold](images/commandline.png) -5. As we can see controller and view files generated successfully and also added the Syncfusion® NuGet packages and styles which is required to render Syncfusion® control. +5. After generation, the controller and view files are created successfully, and the required Syncfusion® NuGet packages and styles are added to render the component. ![Blazor added Files](images/blazorfile.png) @@ -165,10 +165,10 @@ N> Before adding the scaffolded item from command-line, check whether the **dotn -## How to render Syncfusion® control? +## How to render a Syncfusion® component -Refer to the following UG links to render Syncfusion® control after performing scaffolding: +Refer to the following user guide links to render a Syncfusion® component after scaffolding: -WebAssembly App: [Configure Blazor components using Syncfusion® Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +Blazor WebAssembly App: [Configure Blazor components using the Syncfusion® Blazor component NuGet package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -Blazor Server App: [Configure Blazor components using Syncfusion® Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file +Blazor Server App: [Configure Blazor components using the Syncfusion® Blazor component NuGet package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/blazor/visual-studio-integration/template-studio.md b/blazor/visual-studio-integration/template-studio.md index f3b8977dd7..9d2016e64c 100644 --- a/blazor/visual-studio-integration/template-studio.md +++ b/blazor/visual-studio-integration/template-studio.md @@ -1,21 +1,21 @@ --- layout: post -title: Template Studio in Blazor - Syncfusion -description: Learn here about how to create the Blazor application using Syncusion® Blazor Components with the help of template studio. +title: Template Studio for Blazor | Syncfusion +description: Learn here about how to create a Blazor application using Syncfusion Blazor components with the Template Studio in Visual Studio 2022. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- # Syncfusion® Blazor Template Studio -Syncfusion® provides the Blazor Template Studio, which allows you to create a Syncfusion® Blazor application using Syncfusion® components. The Syncfusion® Blazor app is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® components. +Syncfusion® provides the Blazor Template Studio, which creates a Syncfusion® Blazor application preconfigured with the required Syncfusion® NuGet packages, namespaces, styles, and component render mode. The Template Studio offers an intuitive project wizard to guide creation of an application with Syncfusion® components. -The steps below will assist you to create your **Syncfusion® Blazor Application** through **Visual Studio 2022**: +The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2022**: -> **Note:** The Syncfusion® Blazor Extensions for Visual Studio 2019 are available on Essential Studio® release "20.3.0.56" and below. +> **Note:** The Syncfusion® Blazor extensions for Visual Studio 2019 are available only for Essential Studio® versions 20.3.0.56 and earlier. -N> Before use the Syncfusion® Blazor Project Template, 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](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) help topic. +N> Before use the Syncfusion® Blazor Project Template, 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 it is not installed, follow the steps in the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) topic. 1. Open Visual Studio 2022. @@ -29,7 +29,7 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu **Option 2** - Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates for Blazor can be found by filtering the application type for **Syncfusion®** or by entering **Syncfusion®** as a keyword in the search option. + Choose **File -> New -> Project** from the menu. This opens the new project dialog. Find Syncfusion® templates for Blazor by selecting the **Syncfusion** project type filter or by entering **Syncfusion** in the search box. ![CreateNewWindow](images/createnewwindow.png) @@ -45,7 +45,7 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. - | .NET SDK version | Supported Syncfusion® Blazor Application Type | + | .NET SDK version | Supported Syncfusion® Blazor application type | | ---------------- | -------------------------------------------- | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor Web App | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor WebAssembly App | @@ -76,11 +76,11 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu ![WebAppTemplate](images/webapptemplate.png) - In the **Syncfusion® Blazor WebAssembly App** application type, you can choose Progressive Web Application. + In the **Syncfusion Blazor WebAssembly App** project type, choose Progressive Web Application (PWA). ![WASMTemplate](images/wasmtemplate.png) - > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + > **Note:** The Progressive Web Application option is available when .NET 8.0 or later is installed. 5. Click either **Next** or the **Controls** tab. The Syncfusion® Blazor components you can add to the application are listed. @@ -96,22 +96,22 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu N> **Note:** Choose at least one control to enable the Features and Configuration tab. -6. Click either **Next** or the **Features** tab, and you will see the features listed for the selected controls. You can choose the required features. +6. Click **Next** or select the **Features** tab to review and choose features for the selected controls. -7. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. +7. Click **Next** or select the **Configuration** tab. Configure the target .NET version (.NET 9.0 or .NET 8.0), theme, HTTPS configuration, localization, authentication type, and options specific to Blazor Web App or Blazor WebAssembly Application types. Depending on your Syncfusion® Blazor Application Type, refer to the table below for supported authentication types. - | Syncfusion® Blazor Application Type | Supported Authentication Types | + | Syncfusion® Blazor application type | Supported authentication types | | ------------- | ------------- | - | Syncfusion® Blazor Web App | None and Individual Accounts | - | Syncfusion® Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + | Syncfusion® Blazor Web App | None, Individual Accounts | + | Syncfusion® Blazor WebAssembly App | None, Individual Accounts, Microsoft Identity Platform | If you choose the **Blazor Web App** application type, you can customize the Interactivity type and Interactivity location options. ![WebAppConfiguration](images/webappconfig.png) - If you choose the **Blazor Web Assembly App** application type, you can customize the Progressive Web Application option. + If you choose the **Blazor WebAssembly App** application type, you can enable or disable the Progressive Web Application option. ![WASMConfiguration](images/wasmconfig.png) @@ -121,11 +121,11 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu ![ProjectDetails](images/rightsideprojectdetails.png) -8. Click **Create** button. The Syncfusion® Blazor application has been created. The created Syncfusion® Blazor app has the Syncfusion® NuGet packages, styles, and the render code for the selected Syncfusion® component. +8. Click **Create**. The Syncfusion® Blazor application is created with the required Syncfusion® NuGet packages, styles, and the render code for the selected Syncfusion® components. ![Readme](images/readme.png) -9. The Syncfusion® Blazor application configures with most recent Syncfusion® Blazor NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® components. +9. The generated project is configured with the latest Syncfusion® Blazor NuGet package version, selected theme, namespaces, chosen authentication, and component render code for the selected components. 10. 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) post for understanding the licensing changes introduced in Essential Studio®.