Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions blazor/visual-studio-integration/code-generator.md
Original file line number Diff line number Diff line change
@@ -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<sup style="font-size:70%">&reg;</sup> 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<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.

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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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)

Expand Down
52 changes: 26 additions & 26 deletions blazor/visual-studio-integration/download-and-installation.md
Original file line number Diff line number Diff line change
@@ -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<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.

[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<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.

* [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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> Blazor extension from the Visual Studio Marketplace.

1. Download the Syncfusion® Blazor Extensions from the below Visual Studio Marketplace.
1. Download the Syncfusion<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> extensions are available under the **Extensions** menu.

![SyncfusionMenu](images/SyncfusionMenu.png)
Binary file modified blazor/visual-studio-integration/images/controlssection1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 12 additions & 12 deletions blazor/visual-studio-integration/overview.md
Original file line number Diff line number Diff line change
@@ -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<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.

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

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

[Upgrade project](upgrade-project): Upgrades the existing Syncfusion® Blazor Web Application from one Essential Studio® version to another version.
[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.
Loading