Skip to content

SEO-172121-blazor-Extension-weblinks #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: hotfix/hotfix-v21.2.3
Choose a base branch
from
Open

SEO-172121-blazor-Extension-weblinks #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8bbbba0
SEO-172121-blazor-Extension-weblinks
Edithabich May 30, 2023
4051434
confirmed and updated the comment
Edithabich Jun 5, 2023
4838dc0
comment resolved
Edithabich Jun 6, 2023
589b893
Updated changes
Edithabich Jun 12, 2023
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
16 changes: 8 additions & 8 deletions Extension/Blazor-Extension/Visual-Studio-Code/code-snippet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,32 +34,32 @@ The instructions below guide you the process of using the Syncfusion Blazor code

5. After adding the Syncfusion Blazor component to the razor file, use the tab key to fill in the required values to render the component with data. You can find the comment section in the code snippet to see what values are required.

![Comment](images/Comment.png)
![Comment section in Blazor Extension visual Studio Code Snippet](images/blazor-extension-snippet-comment-section.png)

6. You can also find the Syncfusion help link at the top of the added snippet to learn more about the new Syncfusion Blazor component feature.

![Help](images/Help.png)
![Get Help link from Syncfusion Blazor Extension for Visual Studio Code with Snippet](images/blazor-extension-snippet-help-link.png)

## Configure Blazor application with Syncfusion

The Syncfusion Blazor snippet simply inserts the code into the razor file. You must configure the Blazor application with Syncfusion by installing the Syncfusion Blazor NuGet package, namespace, themes, and registering the Syncfusion Blazor Service. To configure, follow the steps below:

1. Open the Blazor application file and manually add the required Syncfusion Blazor individual NuGet package(s) for the Syncfusion Blazor components as a package reference. Refer to [this section](https://blazor.syncfusion.com/documentation/nuget-packages/#benefits-of-using-individual-nuget-packages) to learn about the advantages of the individual NuGet packages. This NuGet package will be automatically restored when building the application.

![NuGet Package](images/NuGet-Snippet.png)
![syncfusion Blazor Extension NuGet Package in visual Studio Code for Snippet](images/blazor-extension-nuget-packages.png)

> Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/) for our Syncfusion Blazor components. We highly recommend this new standard for your Blazor production applications.
> Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for our Syncfusion Blazor components. We highly recommend this new standard for your Blazor production applications.

2. To render the Syncfusion components in your application, open the **~/_Imports.razor** file and add the required Syncfusion Blazor namespace entries.

![Namespace](images/Namespace-Snippet.png)
![Syncfusion Blazor Extension Namespace with Visual Studio Code Snippet](images/blazor-extension-snippet-namespace.png)

3. Add the Syncfusion Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes/) in the `<head>` element of the **~/Pages/_Host.html** page for server application and **~/wwwroot/index.html** page for a client application.
3. Add the Syncfusion Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes) in the `<head>` element of the **~/Pages/_Host.html** page for server application and **~/wwwroot/index.html** page for a client application.

![Themes](images/Themes-Snippet.png)
![Syncfusion Blazor-Extension Themes with visual studio code with snippet](images/blazor-extension-themes-snippet.png)

4. Open the **~/Startup.cs** file for server application and the **~/Program.cs** file for client application then register the Syncfusion Blazor Service.

![Syncfusion Configuration](images/Configuration-Snippet.png)
![Syncfusion Configuration for Blazor Extension with Visual Studio Code for Snippet](images/blazor-extension-snippet-configuration.png)

5. 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.
10 changes: 5 additions & 5 deletions Extension/Blazor-Extension/Visual-Studio-Code/convert-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ The steps below assist you to using the Syncfusion Project conversion in your ex

2. Select **Convert to Syncfusion Blazor Application...** from the context menu when you right-click on the **Project file** from Explorer (Workspace). Refer the screenshot below.

![Conversion Add-in](images/Conversion.PNG)
![Syncfusion Blazor Extension with Visual Studio Code for Project Conversion Add-in](convert-project_images/blazor-extension-project-conversion-application.PNG)

3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears.

![Select Blazor Version](images/VersionSelection.PNG)
![Select Blazor Extension Version in Visual Studio Code for Project Conversion](convert-project_images/blazor-extension-version-selection.PNG)

4. Choose the **Theme** from the palette appears.

![Select Themes](images/ChooseThemes.PNG)
![Select Themes in Blazor Extension for Visual Studio Code in Project Conversion](convert-project_images/blazor-extension-theme-selected.PNG)

5. The application configured with Syncfusion Blazor required NuGet packages and themes.

Expand All @@ -45,7 +45,7 @@ Based on the application type, the following NuGet packages are added as NuGet r

The NuGet packages added to the application file as follows.

![NuGetPackage](images/NuGetPackage.png)
![NuGet Package for Blazor Extension visual studio code in Project Conversion](convert-project_images/blazor-extension-project-conversion-added-nuget-package.png)

## Theme links

Expand All @@ -57,4 +57,4 @@ While converting the application, the selected Syncfusion Blazor theme is added
| Syncfusion Blazor WebAssembly App (ASPNET Core hosted) <br/> Syncfusion Blazor WebAssembly App (Progressive Web Application)| {Client Project location}\wwwroot\index.html |
| Syncfusion Blazor WebAssembly App | {Project location}\wwwroot\index.html|

![CDNLink](images/CDNLink.png)
![CDNLink in Syncfusion Blazor Extension for Visual Studio Code in Project Conversion ](convert-project_images/blazor-extension-theme-links.png)
22 changes: 11 additions & 11 deletions Extension/Blazor-Extension/Visual-Studio-Code/create-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ The instructions below assist you in creating **Syncfusion Blazor Applications**

1. To create a Syncfusion Blazor application in Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. Search for the word **Syncfusion** in the Visual Studio Code palette to get the templates provided by Syncfusion.

![CreateProjectPalette](images/CreateBlazorProjectPalette.png)
![Create Project Palette in Blazor Extension](images/blazor-extension-project-palette.png)

2. Select **Syncfusion Blazor Template Studio: Launch**, then press **Enter** key. The Template Studio wizard for configuring the Syncfusion Blazor app will be launched. Provide the Project Name and Project Path.

![TemplateStudioWizard](images/ProjectLocationName.png)
![Template Studio Wizard in Blazor Extension](images/blazor-extension-project-location-name.png)

> .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022.

Expand All @@ -33,19 +33,19 @@ The instructions below assist you in creating **Syncfusion Blazor Applications**

You can select ASP.NET Core hosted, Progressive Web Application, or both in the Syncfusion Blazor Web Assembly App project type.

![ProjectType](images/ProjectTypeDetails.png)
![Project Type in Blazor Extension](images/blazor-extension-project-type-details.png)

4. The Configuration section will be displayed when you click either **Next** or the **Configuration** tab. Here, you have the option for selecting the required .NET Core version, themes, https configuration, and Blazor Web Assembly project types (ASP.NET Core hosted and Progressive Web Application).

![Configuration](images/Configuration.png)
![Configuration in Blazor Extension](images/blazor-extension-created-project-configuration.png)

> ASP.NET Core hosted and Progressive Web Application options are only visible if Blazor Web Assembly App project type is selected.

5. Click the **Create** button. The Syncfusion Blazor application has been created. The created Syncfusion Blazor app has the Syncfusion NuGet packages, styles, and the component render code for the Syncfusion component added to the Index, Counter, and FetchData pages.

6. You can run the application to see the Syncfusion components. Click **F5** or go to **Run>Start Debugging**.

![Debug](images/Debug.png)
![Debug in Blazor Extension](images/blazor-extension-debug.png)

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

Expand All @@ -57,7 +57,7 @@ The Syncfusion Blazor application configures with latest Syncfusion Blazor NuGet

The `Syncfusion.Blazor` NuGet package will be added as NuGet references for all application types.

![NuGetPackage](images/NuGetPackage.png)
![NuGet Package in Blazor Extension](images/blazor-extension-nuget-package.png)

### Style

Expand All @@ -69,20 +69,20 @@ The selected theme is added from Syncfusion NuGet and its reference at these app
| Syncfusion Blazor WebAssembly App (ASPNET Core hosted) <br/> Syncfusion Blazor WebAssembly App (Progressive Web Application) | {Client Project location}\wwwroot\index.html |
| Syncfusion Blazor WebAssembly App | {Project location}\wwwroot\index.html|

![CDNLink](images/CDNLink.png)
![CDNLink for Blazor-Extension in visual studio code created project](images/blazor-extension-in-visual-studio-code-created-project-cdn-link.png)

### Namespaces

The Syncfusion Blazor namespaces are added in the **`_imports.razor`** file.

![NameSpace](images/NameSpace.png)
![NameSpace in Blazor Extension](images/blazor-extension-namespace.png)

### Component render code

The Syncfusion Blazor Calendar, Button, and DataGrid component render code is in the Razor files in the pages folder. The render code is updated in these Razor files.

| File name | Code snippet added |
|---|---|
| `~/Pages/Index.razor` | ![IndexFileChange](images/IndexFileChange.png) |
| `~/Pages/Counter.razor` | ![CounterPageChange](images/CounterPageChange.png) |
| `~/Pages/FetchData.razor` | ![FetchDataPageChange](images/FetchDataPageChange.png) |
| `~/Pages/Index.razor` | ![Index File Change in Blazor Extension](images/blazor-extension-index-file-change.png) |
| `~/Pages/Counter.razor` | ![Counter Page Change Blazor Extension](images/blazor-extension-counter-page-change.png) |
| `~/Pages/FetchData.razor` | ![Fetch Data Page Change in Blazor Extension](images/blazor-extension-fetch-data-page-change.png) |
8 changes: 4 additions & 4 deletions Extension/Blazor-Extension/Visual-Studio-Code/upgrade-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@ The steps below assist you to migrating existing Syncfusion Blazor Web Applicati

2. Select **Migrate Syncfusion Blazor Application to another version...** from the context menu when you right-click on the **Project file** from Explorer (Workspace). Refer to the screenshot below.

![Migration add-in](images/Migration.PNG)
![Migration add-in for Blazor Extension](upgrade-project_images/blazor-extension-migration.PNG)

> If you have a Syncfusion Blazor reference in your application, the Migration option will be enabled.

3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears.

![Select Blazor Version](images/VersionSelection.PNG)
![Select Blazor Version in Extension](upgrade-project_images/blazor-extension-version-selection.PNG)

4. The Syncfusion NuGet packages references and themes are updated to the selected version in the application.

![NuGetPackage](images/NuGetPackage.png)
![NuGet Package in Blazor Extension](upgrade-project_images/blazor-extension-nuget-package.png)

![CDNLink](images/CDNLink.png)
![CDN Link in Blazor Extension](upgrade-project_images/blazor-extension-cdn-link.png)

5. 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://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio.
20 changes: 10 additions & 10 deletions Extension/Blazor-Extension/Visual-Studio/code-generator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Syncfusion provides the component Code Generator for the Blazor platform, which

The steps below will assist you to add the Syncfusion components code in your Blazor application through **Visual Studio 2019**:

> 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, 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.
> 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, please 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.

1. Open your existing Blazor application or create a new Blazor application.

Expand All @@ -24,17 +24,17 @@ The steps below will assist you to add the Syncfusion components code in your Bl

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

![CodeGeneratorCommand](images/Code-Generator-Command.PNG)
![Code Generator Command in Blazor Extension](code-generator_images/blazor-extension-code-generator-command.PNG)

**Option 2:**

Open the .razor file and choose **Extension -> Syncfusion -> Essential Studio for Blazor -> Syncfusion Blazor Code Generator...** from the **Visual Studio 2019 menu**.

![CodeGeneratorMenu](images/Code-Generator-Menu.PNG)
![Code Generator Menu in Blazor Extension](code-generator_images/blazor-extension-code-generator-menu.PNG)

3. The wizard for the Syncfusion Blazor Code Generator will appear. Choose a required control.

![CodeGeneratorWizard](images/Code-Generator-MainWizard.png)
![Code Generator Wizard in Blazor Extension](code-generator_images/blazor-extension-code-generator-wizard.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.

Expand All @@ -44,11 +44,11 @@ The steps below will assist you to add the Syncfusion components code in your Bl

Click **Insert**. It generates the selected component render code and inserts it wherever the cursor is positioned.

![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.PNG)
![Component Render Code in Blazor Extension](code-generator_images/blazor-extension-code-generator-component-render-code.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.

![OutputWindow](images/Code-Generator-OutputWindow.PNG)
![Output Window] in Blazor Extension(code-generator_images/blazor-extension-code-generator-output-window.PNG)

5. If you have installed the trial setup or NuGet packages from nuget.org, you must register the Syncfusion license key to your application as Syncfusion has 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 to know more about the licensing changes introduced in Essential Studio.

Expand All @@ -62,7 +62,7 @@ Based on the selected Syncfusion Blazor controls, the individual NuGet packages

> The latest Syncfusion Essential Studio version of a NuGet package will be added as reference entry from nuget.org if there is no internet connection. You should restore the NuGet packages when internet becomes available.

![NuGetPackage](images/Code-Generator-NuGetPackage.PNG)
![NuGet Package in Blazor extension](code-generator_images/blazor-extension-code-generator-nuget-package.PNG)

### Style

Expand All @@ -74,16 +74,16 @@ The selected Syncfusion Blazor theme is added from Syncfusion NuGet and this the
| Syncfusion Blazor WebAssembly App (ASPNET Core hosted) <br/> Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) | {Client Project location}\wwwroot\index.html |
| Syncfusion Blazor WebAssembly App <br/> Syncfusion Blazor WebAssembly App (Progressive Web Application) | {Project location}\wwwroot\index.html|

![StyleReference](images/Code-Generator-CDNLink.PNG)
![Style Reference in Blazor extension](code-generator_images/blazor-extension-code-generator-style-refrence.PNG)

### Namespaces

The required namespaces are added to the **`_imports.razor`** file based on the selected component, if it is not already available.

![NameSpace](images/Code-Generator-NameSpace.PNG)
![NameSpace in Blazor extension](code-generator_images/blazor-extension-code-generator-namespace.PNG)

### Services

The required service code added to the **`Startup.cs/Program.cs`** file to render the component based on the selected component if it is not already added.

![Services code](images/Code-Generator-ServicesCode.PNG)
![Services code in Blazor Extension](code-generator_images/blazor-extension-code-generator-services-code.PNG)
Loading