Skip to content

Commit 4505b58

Browse files
authored
Merge branch 'development' into EJ2-973221-Dev
2 parents 92ae385 + 7fc80fe commit 4505b58

File tree

6 files changed

+117
-117
lines changed

6 files changed

+117
-117
lines changed

blazor/visual-studio-integration/code-generator.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
---
22
layout: post
3-
title: Code Generator in Blazor | Syncfusion
4-
description: Learn here about adding the Blazor Component using Code Generator of Syncfusion Blazor Extension for Visual Studio.
3+
title: Code generator for the Blazor extension | Syncfusion
4+
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.
55
platform: Blazor
6-
component: Common
6+
control: Common
77
documentation: ug
88
---
99

1010
# Add Syncfusion® Blazor component code
1111

12-
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.
12+
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.
1313

14-
The steps below will assist you to add the Syncfusion® components code in your Blazor application through **Visual Studio 2022**:
14+
Use the following steps to add Syncfusion<sup style="font-size:70%">&reg;</sup> components to a Blazor application in **Visual Studio 2022**:
1515

16-
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.
16+
N> Before using the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Code Generator, verify that the Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
1717

18-
1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2022 or Visual Studio 2022.
18+
1. Open an existing Blazor application or create a new one in Visual Studio 2022.
1919

20-
2. To open the Syncfusion® Blazor Code Generator Wizard, select one of the options below in the Razor file, and then add Syncfusion® components:
20+
2. To open the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Code Generator wizard from a Razor file, use one of the following options:
2121

2222
**Option 1:**
2323

24-
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...**
24+
To generate a specific component code, right-click in the Razor editor at the desired line and select **Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Code Generator...**
2525

2626
![CodeGeneratorCommand](images/Code-Generator-Command.PNG)
2727

2828
**Option 2:**
2929

30-
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.
30+
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.
3131

3232
![CodeGeneratorMenu](images/Code-Generator-Menu.PNG)
3333

34-
3. The wizard for the Syncfusion® Blazor Code Generator will appear. Choose a required control.
34+
3. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Code Generator wizard opens. Choose the required component.
3535

3636
![CodeGeneratorWizard](images/Code-Generator-MainWizard.png)
3737

3838
**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.
3939

40-
**Feature:** Selected component features are listed. You can select the required features.
40+
**Features:** Lists available features for the selected component. Choose the required options.
4141

42-
**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.
42+
**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.
4343

44-
Click **Insert**. It generates the selected component render code and inserts it wherever the cursor is positioned.
44+
Click **Insert** to generate the selected component render mode and insert it at the cursor location.
4545

4646
![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.PNG)
4747

48-
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.
48+
4. In the Output window, select **Syncfusion Blazor Code Generator** from the **Show output from** list to review the changes applied to the application.
4949

5050
![OutputWindow](images/Code-Generator-OutputWindow.PNG)
5151

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
11
---
22
layout: post
3-
title: Download and Installation of Blazor Extension | Syncfusion
4-
description: Check out the documentation for download and installation of Syncfusion Blazor Extension for Visual Studio.
3+
title: Download and installation of the Blazor extension | Syncfusion
4+
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.
55
platform: Blazor
6-
component: Common
6+
control: Common
77
documentation: ug
88
---
99

10-
# Download and Installation
10+
# Download and installation
1111

12-
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.
12+
Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
1313

14-
[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
14+
[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
1515

1616

1717
## Prerequisites
1818

19-
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.
19+
The following software is required to install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension and to create projects, add snippets, convert, and upgrade Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor applications.
2020

2121
* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/).
2222

23-
* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet).
23+
* [.NET 9.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet).
2424

25-
* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet).
25+
* [.NET 8.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet).
2626

27-
## Install through the Visual Studio Manage Extensions
27+
## Install through Visual Studio Manage Extensions
2828

29-
The steps below assist you to how to install the Syncfusion® Blazor extensions from **Visual Studio Manage Extensions**.
29+
The following steps describe how to install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension from **Manage Extensions** in Visual Studio.
3030

31-
1. Open the Visual Studio 2022.
31+
1. Open Visual Studio 2022.
3232

33-
2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions.
33+
2. Navigate to **Extensions -> Manage Extensions** to open the Manage Extensions window.
3434

35-
3. On the left, click the **Online** tab and type **"Syncfusion® Blazor"** in the **search box**.
35+
3. In the **Online** tab, search for **Syncfusion Blazor**.
3636

37-
![Online-Manage-Extension-window](images/OnlineExtension.png)
37+
![Manage Extensions window showing Syncfusion Blazor search results](images/OnlineExtension.png)
3838

39-
4. Click the **Download** button in the **Syncfusion® Blazor Template Studio** extensions.
39+
4. Click **Download** for the **Syncfusion Blazor Template Studio** extension.
4040

41-
5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt.
41+
5. Close all Visual Studio instances to begin the installation process. A VSIX installation prompt appears.
4242

43-
![VSIX-Installation-Window](images/VSIXinstallation.png)
43+
![VSIX Installer prompting to modify Visual Studio](images/VSIXinstallation.png)
4444

45-
6. Click the **Modify** button.
45+
6. Click **Modify**.
4646

4747
7. After the installation is complete, open Visual Studio.
4848

49-
8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio.
49+
8. In the **Extensions** menu, access the Syncfusion<sup style="font-size:70%">&reg;</sup> extensions in Visual Studio.
5050

5151
![SyncfusionMenu](images/SyncfusionMenu.png)
5252

5353
## Install from the Visual Studio Marketplace
5454

55-
The steps below illustrate how to download and install the Syncfusion® Blazor extension from the Visual Studio Marketplace.
55+
The following steps illustrate how to download and install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension from the Visual Studio Marketplace.
5656

57-
1. Download the Syncfusion® Blazor Extensions from the below Visual Studio Marketplace.
57+
1. Download the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension from the Visual Studio Marketplace.
5858

59-
[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
59+
[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
6060

6161
2. Close all Visual Studio instances running, if any.
6262

63-
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.
63+
3. Double-click the downloaded VSIX file to install. In the VSIX Installer, select the Visual Studio instance(s) to install the extension.
6464

65-
![VSIX-Installation-Window](images/VSIXinstallation1.png)
65+
![VSIX Installer showing Visual Studio instance selection](images/VSIXinstallation1.png)
6666

6767
4. Click the **Modify** button.
6868

69-
5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu.
69+
5. After installation completes, open Visual Studio. The Syncfusion<sup style="font-size:70%">&reg;</sup> extensions are available under the **Extensions** menu.
7070

7171
![SyncfusionMenu](images/SyncfusionMenu.png)
-75.2 KB
Loading
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
---
22
layout: post
3-
title: Overview of Syncfusion Blazor Extension for Visual Studio | Syncfusion
4-
description: Learn here all about introduction on Syncfusion Blazor extension for Visual Studio which made integration ease.
3+
title: Overview of Blazor extension for Visual Studio | Syncfusion
4+
description: Learn here about the Syncfusion Blazor extension for Visual Studio and how it streamlines integration with Syncfusion components. Explore to more details.
55
platform: Blazor
6-
component: Common
6+
control: Common
77
documentation: ug
88
---
99

10-
# Overview of Blazor Extension for Visual Studio
10+
# Overview of Blazor extension for Visual Studio
1111

12-
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.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension for Visual Studio streamlines working with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components by configuring the required Syncfusion<sup style="font-size:70%">&reg;</sup> NuGet packages and themes. Separate extensions are available for Visual Studio 2022 and Visual Studio 2019.
1313

14-
[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
14+
[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension)
1515

16-
[Visual Studio 2019](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension)
16+
[Download the Visual Studio 2019 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension)
1717

18-
The Syncfusion® Blazor extensions provides the following add-ins in Visual Studio:
18+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension provides the following add-ins in Visual Studio:
1919

20-
[Project-Template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion® Blazor component.
20+
[Project template](template-studio): Creates Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor applications with required configuration for development with Syncfusion<sup style="font-size:70%">&reg;</sup>Visual Blazor component.
2121

22-
[Code Generator](code-generator): Adds Syncfusion® Blazor component code in razor file at required place.
22+
[Code generator](code-generator): Adds Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component code in razor file at required place.
2323

24-
[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by importing the necessary Syncfusion® NuGet packages.
24+
[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Application by adding the required Syncfusion<sup style="font-size:70%">&reg;</sup> NuGet packages and theme.
2525

26-
[Upgrade project](upgrade-project): Upgrades the existing Syncfusion® Blazor Web Application from one Essential Studio® version to another version.
26+
[Upgrade project](upgrade-project): Upgrades an existing Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Application from one Essential Studio version to another.

0 commit comments

Comments
 (0)