diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/code-snippet.md b/Extension/Blazor-Extension/Visual-Studio-Code/code-snippet.md index 133bec05..18e57765 100644 --- a/Extension/Blazor-Extension/Visual-Studio-Code/code-snippet.md +++ b/Extension/Blazor-Extension/Visual-Studio-Code/code-snippet.md @@ -34,11 +34,11 @@ 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 @@ -46,20 +46,20 @@ The Syncfusion Blazor snippet simply inserts the code into the razor file. You m 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 `` 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 `` 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. \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/convert-project.md b/Extension/Blazor-Extension/Visual-Studio-Code/convert-project.md index f1a83d83..1fd2588b 100644 --- a/Extension/Blazor-Extension/Visual-Studio-Code/convert-project.md +++ b/Extension/Blazor-Extension/Visual-Studio-Code/convert-project.md @@ -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. @@ -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 @@ -57,4 +57,4 @@ While converting the application, the selected Syncfusion Blazor theme is added | Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
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) \ No newline at end of file +![CDNLink in Syncfusion Blazor Extension for Visual Studio Code in Project Conversion ](convert-project_images/blazor-extension-theme-links.png) \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md b/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md index cda670e7..ae9025d5 100644 --- a/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md +++ b/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md @@ -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. @@ -33,11 +33,11 @@ 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. @@ -45,7 +45,7 @@ The instructions below assist you in creating **Syncfusion Blazor Applications** 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. @@ -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 @@ -69,13 +69,13 @@ The selected theme is added from Syncfusion NuGet and its reference at these app | Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
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 @@ -83,6 +83,6 @@ The Syncfusion Blazor Calendar, Button, and DataGrid component render code is in | 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) | \ No newline at end of file +| `~/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) | \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/upgrade-project.md b/Extension/Blazor-Extension/Visual-Studio-Code/upgrade-project.md index b3d0104c..84431408 100644 --- a/Extension/Blazor-Extension/Visual-Studio-Code/upgrade-project.md +++ b/Extension/Blazor-Extension/Visual-Studio-Code/upgrade-project.md @@ -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. \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator.md b/Extension/Blazor-Extension/Visual-Studio/code-generator.md index 61ac2815..4ce97b11 100644 --- a/Extension/Blazor-Extension/Visual-Studio/code-generator.md +++ b/Extension/Blazor-Extension/Visual-Studio/code-generator.md @@ -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. @@ -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. @@ -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. @@ -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 @@ -74,16 +74,16 @@ The selected Syncfusion Blazor theme is added from Syncfusion NuGet and this the | Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) | {Client Project location}\wwwroot\index.html | | Syncfusion Blazor WebAssembly App
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) \ No newline at end of file +![Services code in Blazor Extension](code-generator_images/blazor-extension-code-generator-services-code.PNG) \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio/convert-project.md b/Extension/Blazor-Extension/Visual-Studio/convert-project.md index e477a252..05cd20a8 100644 --- a/Extension/Blazor-Extension/Visual-Studio/convert-project.md +++ b/Extension/Blazor-Extension/Visual-Studio/convert-project.md @@ -13,7 +13,7 @@ Syncfusion Blazor conversion is a Visual Studio add-in that converts an existing The steps below help you to convert the **Blazor application** to the **Syncfusion Blazor application** via the **Visual Studio 2019**: -> Before use the Syncfusion Blazor Project Conversion, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation/) help topic. +> Before use the Syncfusion Blazor Project Conversion, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation) help topic. 1. Open your existing Blazor application or create a new Blazor application @@ -23,17 +23,17 @@ The steps below help you to convert the **Blazor application** to the **Syncfusi Choose **Extensions -> Syncfusion -> Essential Studio for Blazor -> Convert Project...** in the Visual Studio 2019 menu. - ![ConversionMenu](images/ConversionMenu.png) + ![Conversion Menu in Blazor Extension](convert-project_images/blazor-extension-convert-project-conversion-menu.png) **Option 2:** Right-click the application from the **Solution Explorer** and select the **Syncfusion Blazor** and choose the **Convert to Syncfusion Blazor application...** - ![ConversionAddin](images/ConversionAddin.png) + ![Conversion Addin in Blazor Extension](convert-project_images/blazor-extension-convert-project-add-in.png) 3. The Syncfusion Blazor Project Conversion window will appear. You can choose the required version of Syncfusion Blazor and Themes to convert the application. - ![ConversionWizard](images/Conversion.png) + ![Conversion Wizard in Blazor-Extension](convert-project_images/blazor-extension-convert-project-wizard-conversion.png) > The versions are loaded from the Syncfusion Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. @@ -41,11 +41,11 @@ The steps below help you to convert the **Blazor application** to the **Syncfusi 5. Once the conversion process has been completed, you will get a successful message window. - ![ConversionSuccessMessage](images/ConversionSuccess.png) + ![Conversion Success Message in Blazor Extension](convert-project_images/blazor-extension-convert-project-conversion-success-message.png) If you enabled project backup before converting, the old application was saved in the specified backup path location, as shown below once the conversion process completed. - ![ConversionBackupLocation](images/Backuplocation.png) + ![Conversion Backup Location in Blazor Extension](convert-project_images/blazor-extension-convert-project-backup-location.png) 6. 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. @@ -61,7 +61,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 in Blazor Extension](convert-project_images/blazor-extension-convert-project-nuget-package.png) ## Theme link @@ -73,4 +73,4 @@ While converting the application, the Syncfusion Blazor theme is added in the fo | Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) | {Client Project location}\wwwroot\index.html | | Syncfusion Blazor WebAssembly App
Syncfusion Blazor WebAssembly App (Progressive Web Application) | {Project location}\wwwroot\index.html| -![CDNLink](images/CDNLink.png) \ No newline at end of file +![CDN Link in Blazor Extension](convert-project_images/blazor-extension-convert-project-cdn-link.png) \ No newline at end of file diff --git a/Extension/Blazor-Extension/Visual-Studio/template-studio.md b/Extension/Blazor-Extension/Visual-Studio/template-studio.md index bcc018c6..7cc3e30c 100644 --- a/Extension/Blazor-Extension/Visual-Studio/template-studio.md +++ b/Extension/Blazor-Extension/Visual-Studio/template-studio.md @@ -13,7 +13,7 @@ Syncfusion provides the Blazor Template Studio, which allows you to create a Syn The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2019**: -> 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, 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 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, 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 Visual Studio 2022. @@ -23,21 +23,21 @@ The steps below will assist you to create your **Syncfusion Blazor Application** Choose **Extension -> Syncfusion -> Essential Studio for Blazor -> Create New Syncfusion Project...** from the **Visual Studio menu**. - ![CreateMenu](images/CreateMenu.png) + ![Create Menu in Blazor Extension](template-studio_images/blazor-extension-template-studio-create-menu.png) **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. - ![CreateNewWindow](images/CreateNewWindow.png) + ![Create New Window in Blazor Extension](template-studio_images/blazor-extension-template-studio-create-new-window.png) 3. Select the **Syncfusion Blazor Template Studio** and click **Next**. - ![CreateNewWizard](images/CreateNewWizard.png) + ![Create New Wizard in Blazor Extension](template-studio_images/blazor-extension-template-studio-create-new-wizard.png) 4. The Template Studio wizard for configuring the Syncfusion Blazor app will be launched. Choose the Syncfusion Blazor application type. - ![ProjectWizard](images/TemplateStudio.png) + ![Project Wizard in Blazor Extension](template-studio_images/blazor-extension-template-studio-template-studio.png) > .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022. @@ -51,13 +51,13 @@ The steps below will assist you to create your **Syncfusion Blazor Application** In the Syncfusion Blazor WebAssembly App application type, we can choose **ASP.NET Core hosted**, **Progressive Web Application**, or both. - ![ProjectTypeWizard](images/ProjectTypeWizard.png) + ![ProjectTypeWizard in Blazor Extension](template-studio_images/blazor-extension-template-studio-project-type-wizard.png) > **Note:** The Progressive Web Application will be enabled if .NET 6.0 version or higher is installed. 5. Click either **Next** or the **Controls** tab. The Syncfusion Blazor components you can add to the application are listed. - ![Controls Section](images/ControlsSection1.png) + ![Controls Section in Blazor extension](template-studio_images/blazor-extension-template-studio-controls-section-application.png) Choose the required control(s) by clicking **Add**. @@ -75,7 +75,7 @@ The steps below will assist you to create your **Syncfusion Blazor Application** > **Note:** ASP.NET Core hosted and Progressive Web Application options are only visible for the Blazor Web Assembly App application type. - ![Choose required Project Configuration](images/Configuration.png) + ![Choose required Project Configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-configuration.png) **Project details section** @@ -97,7 +97,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/NuGetPackage.png) +![NuGet Package in Blazor Extension](template-studio_images/blazor-extension-template-studio-nuget-package.png) ### Style @@ -109,19 +109,19 @@ The selected Syncfusion Blazor theme is added from Syncfusion NuGet and this the | Syncfusion Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) | {Client Project location}\wwwroot\index.html | | Syncfusion Blazor WebAssembly App
Syncfusion Blazor WebAssembly App (Progressive Web Application) | {Project location}\wwwroot\index.html| -![CDNLink](images/CDNLink.png) +![CDN Link in Blazor Extension](template-studio_images/blazor-extension-template-studio-cdn-link.png) ### Namespaces The Syncfusion.Blazor namespaces are added in the **`_imports.razor`** file. -![NameSpace](images/NameSpace.png) +![NameSpace in Blazor Extension](template-studio_images/blazor-extension-template-studio-namespace.png) ### Component render code The selected Syncfusion Blazor components and features render code added as .razor files in the pages folder. -![Selected control pagess added in project with selected features](images/ControlPages.png) +![Selected control pagess added in project with selected featuresin Blazor extension](template-studio_images/blazor-extension-template-studio-control-pages.png) ### Authentication Configuration @@ -137,29 +137,29 @@ We need to register the created application in Google Platform API Console for I 2. Click Create Credentials and OAuth Client Id. - ![Google API console credentials page](images/GoogelAPIConsoleCredentials.png) + ![Google API Console Credentials Page in Blazor extension](template-studio_images/blazor-extension-template-studio-googel-api-console-credentials.png) - ![Google API Oauth client Id](images/OauthclientId.png) + ![Google API Oauth Client Id in Blazor Extension](template-studio_images/blazor-extension-template-studio-oauth-client-id.png) 3. Select Application type as Web Application in client Id creation. - ![ApplicationType](images/ClientIdApplicationtype.PNG) + ![Application Type in Blazor extension](template-studio_images/blazor-extension-template-studio-client-id-application-type.PNG) 4. Add your publish URL link as an Authorized URI and login URL as Redirected URI. - ![RedirectedURI](images/RedirectedURI.png) + ![Redirected URI in Blazor Extension](template-studio_images/blazor-extension-template-studio-redirected-uri.png) 5. Click save then OAuth client id will be created and copy that credentials. - ![ClientIdCreation](images/ClientIdCreation.PNG) + ![Client Id Creation in Blazor Extension](template-studio_images/blazor-extension-template-studio-client-id-creation.PNG) 6. Add that Client Id, and RedirectUri in appsettings.json file of your application. - ![ClinetIdConfiguration](images/ClinetIdConfiguration.PNG) + ![Clinet Id Configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-clinet-id-configuration.PNG) 7. Change the build configuration bind as google from Local in program.cs file. - ![buildconfigurationbind](images/buildconfigurationbind.PNG) + ![Build Configuration Bind in Blazor extension](template-studio_images/blazor-extension-template-studio-build-configuration-bind.PNG) ### Microsoft Identity Platform Authentication @@ -171,27 +171,27 @@ We need to register the created application in Google Platform API Console for I 2. Click New Registration in App Registration page. - ![AppRegistration](images/AppRegistration.PNG) + ![App Registration in Blazor Extension](template-studio_images/blazor-extension-template-studio-app-registration.PNG) 3. Give name of the application and selected supported type as single tenant. - ![Name and supported Account type](images/NameSupportedAccountType.PNG) + ![Name and supported Account type in Blazor Extension](template-studio_images/blazor-extension-template-studio-name-supported-account-type.PNG) 4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. - ![Platform and Redirect URI](images/AADRedirectedURI.png) + ![Platform and Redirect URI in Blazor Extension](template-studio_images/blazor-extension-template-studio-redirect-uri.png) 5. App will be registered, go to the Authentication page and tick Id token check box. - ![Access token and Id token](images/AuthenticationCheckBox1.PNG) + ![Access token and Id token](template-studio_images/blazor-extension-template-studio-authentication-checkbox-page.PNG) 6. Get client tenant id and application id form overview page. - ![Clinet tenat id](images/ClinetTenantId.PNG) + ![Clinet tenant id in Blazor extension](template-studio_images/blazor-extension-template-studio-clinet-tenant-Id.PNG) 7. Configure those client tenant id, application id, and domain in your application appsettings.json file. - ![Project configuration](images/Configuration1.png) + ![Project Configuration in Blazor Extension](template-studio_images/bkazor-extension-template-studio-configuration-file.png) #### Web Application and Progressive Web Application @@ -201,33 +201,33 @@ We need to register the created application in Google Platform API Console for I 2. Click New Registration in App Registration page. - ![AppRegistration](images/AppRegistration.PNG) + ![App Registration in Blazor Extension](template-studio_images/blazor-extension-template-studio-app-registration.PNG) 3. Give name of the application and selected supported type as single tenant. - ![Name and supported Account type](images/NameSupportedAccountType.PNG) + ![Name and supported Account type in Blazor Extension](template-studio_images/blazor-extension-template-studio-name-supported-account-type.PNG) 4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. - ![Platform and Redirect URI](images/AADRedirectedURI.png) + ![Platform and Redirect URI in Blazor Extension](template-studio_images/blazor-extension-template-studio-redirect-uri.png) 5. App will be registered, go to the Authentication page and tick Access token an Id token check box. - ![Access token and Id token](images/AuthenticationCheckBox.PNG) + ![Access token and Id token in Blazor extension](template-studio_images/blazor-extension-template-studio-authentication-checkbox.PNG) 6. Migrate the API by clicking the highlighted arrow like in below image. - ![API Migration](images/Migration1.PNG) + ![API Migration in Blazor Extension](template-studio_images/blazor-extension-template-studio-api-migration.PNG) - ![Migration configuration](images/Migration2.PNG) + ![Migration configuration](template-studio_images/blazor-extension-template-studio-migration-configuration.PNG) 7. Get client tenant id and application id form overview page. - ![Clinet tenat id](images/ClinetTenantId.PNG) + ![Clinet tenant id in Blazor Extension](template-studio_images/blazor-extension-template-studio-clinet-tenant-Id.PNG) 8. Configure those client tenant id and application id in your application appsettings.json file. - ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.PNG) + ![Clinet ID and Tenant ID configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-clinet-tenant-id-configuration.PNG) #### ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application @@ -239,33 +239,33 @@ We need to register the created application in Google Platform API Console for I 2. Click New Registration in App Registration page. - ![AppRegistration](images/AppRegistration.PNG) + ![App Registration in Blazor extension](template-studio_images/blazor-extension-template-studio-app-registration.PNG) 3. Give name of the application and selected supported type as single tenant. - ![Name and supported Account type](images/NameSupportedAccountType.PNG) + ![Name and supported Account type in Blazor Extension](template-studio_images/blazor-extension-template-studio-name-supported-account-type.PNG) 4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. - ![Platform and Redirect URI](images/AADRedirectedURI.png) + ![Platform and Redirect URI in Blazor extension](template-studio_images/blazor-extension-template-studio-redirect-uri.png) 5. App will be registered, go to the Authentication page and tick Access token an Id token check box. - ![Access token and Id token](images/AuthenticationCheckBox.PNG) + ![Access token and Id token in Blazor extension](template-studio_images/blazor-extension-template-studio-authentication-checkbox.PNG) 6. Migrate the API by clicking the highlighted arrow like in below image. - ![API Migration](images/Migration1.PNG) + ![API Migration in Blazor Extension](template-studio_images/blazor-extension-template-studio-api-migration.PNG) - ![Migration configuration](images/Migration2.PNG) + ![Migration configuration](template-studio_images/blazor-extension-template-studio-migration-configuration.PNG) 7. Get client tenant id and application id form overview page. - ![Clinet tenat id](images/ClinetTenantId.PNG) + ![Clinet tenant id] in Blazor Extension(template-studio_images/bkazor-extension-template-studio-clinet-tenant-Id.PNG) 8. Configure those client tenant id and application id in your application appsettings.json file. - ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.PNG) + ![Clinet ID and Tenant ID configuration in Blazor Extension](template-studio_images/bkazor-extension-template-studio-clinet-tenant-id-configuration.PNG) ##### Server project Registration and configuration @@ -275,55 +275,55 @@ We need to register the created application in Google Platform API Console for I 2. Click New Registration in App Registration page. - ![Server App Registration](images/AppRegistration.PNG) + ![Server App Registration in Blazor extension](template-studio_images/blazor-extension-template-studio-app-registration.PNG) 3. Give name of the application and selected supported type as single tenant. - ![Name and supported Account type](images/NameSupportedAccountType.PNG) + ![Name and supported Account type in Blazor Extension](template-studio_images/blazor-extension-template-studio-name-supported-account-type.PNG) 4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. - ![Server Platform and Redirect URI](images/AADRedirectedURI.png) + ![Server Platform and Redirect URI in Blazor Extension](template-studio_images/blazor-extension-template-studio-redirect-uri.png) 5. App will be registered, go to the Authentication page and tick Access token an Id token check box. - ![Access token and Id token](images/AuthenticationCheckBox.PNG) + ![Access token and Id token in Blazor extension](template-studio_images/blazor-extension-template-studio-authentication-checkbox.PNG) 6. Migrate the API by clicking the highlighted arrow like in below image. - ![API Migration](images/Migration1.PNG) + ![API Migration in Blazor Extension](template-studio_images/blazor-extension-template-studio-api-migration.PNG) - ![Migration configuration](images/Migration2.PNG) + ![Migration configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-migration-configuration.PNG) 7. Add a scope API in Expose an API page. - ![Add scope API](images/AddScopeAPI.png) + ![Add Scope API in Blazor Extension](template-studio_images/blazor-extension-template-studio-add-scope-api.png) 8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value. - ![Add scope API configuration](images/AddScopeAPI1.png) + ![Add Scope API configuration in Blazor extension](template-studio_images/blazor-extension-template-studio-add-scope-api-configuration.png) 9. Get client tenant id and application id form overview page. - ![Clinet tenat id](images/ClinetTenantId.PNG) + ![Clinet tenant id in Blazor Extension](template-studio_images/blazor-extension-template-studio-clinet-tenant-Id.PNG) 10. Configure those client tenant id, application id, and domain in your application appsettings.json file. - ![Project configuration](images/Configuration1.png) + ![Project Configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-configuration-file.png) 11. Configure the scope API in client application program.cs file below highlighted place. - ![Scope API configuration](images/ScopeAPIConfiguration.PNG) + ![Scope API configuration in Blazor Extension](template-studio_images/blazor-extension-template-studio-scope-api-configuration.PNG) ### Run application You can run the application and see the Syncfusion components you selected. Select a component to see component output. -![Blazor Template output page](images/HomePage.png) +![Blazor Extension in Template output page](template-studio_images/blazor-extension-template-studio-home-page.png) You can select a culture language in combobox at top right on the output page to apply the culture in the application. -![Blazor Template output page](images/Localization.png) +![Blazor Extension in Template output page](template-studio_images/blazor-extension-template-studio-localization.png) > **Note:** Above culture combobox will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard. @@ -335,21 +335,21 @@ You can select a culture language in combobox at top right on the output page to 1. For register the application, submit your email address and create a password. - ![Register the application](images/RegisterApplication.png) + ![Register the application in Blazor Extension](template-studio_images/blazor-extension-template-studio-register-application.png) 2. Confirming registration by clicking **Click here to confirm your account.** - ![Register the confirmation](images/RegisterConfirmation.png) + ![Register the confirmation in Blazor Extension](template-studio_images/blazor-extension-template-studio-register-confirmation.png) 3. Submit your registered email address and password to login the application. - ![login to the application](images/Login.png) + ![login to the application in Blazor Extansion](template-studio_images/blazor-extension-template-studio-login.png) #### Web Application and Progressive Web Application 1. Login to the application using Gmail accounts. - ![Google login](images/GoogleLogin.PNG) + ![Google login in Blazor Extension](template-studio_images/blazor-extension-template-studio-google-login.PNG) ### Microsoft Identity Platform @@ -359,4 +359,4 @@ You can select a culture language in combobox at top right on the output page to 2. Accept permission request of your application. - ![Accept permission](images/MicrosoftAuthentication.PNG) + ![Accept Permission in Blazor Extension](template-studio_images/blazor-extension-template-studio-microsoft-authentication.PNG) diff --git a/Extension/Blazor-Extension/Visual-Studio/upgrade-project.md b/Extension/Blazor-Extension/Visual-Studio/upgrade-project.md index ac1982a3..7dae8d3d 100644 --- a/Extension/Blazor-Extension/Visual-Studio/upgrade-project.md +++ b/Extension/Blazor-Extension/Visual-Studio/upgrade-project.md @@ -13,7 +13,7 @@ The Syncfusion Blazor migration add-in for Visual Studio allows you to migrate a The steps below will assist you to upgrade the Syncfusion version in the Syncfusion Blazor application via Visual Studio 2019: -> Before use the Syncfusion Blazor Project Migration, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation/) help topic. +> Before use the Syncfusion Blazor Project Migration, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation) help topic. 1. Open the Syncfusion Blazor application that uses the Syncfusion component. @@ -23,29 +23,29 @@ The steps below will assist you to upgrade the Syncfusion version in the Syncfus Choose **Extensions -> Syncfusion -> Essential Studio for Blazor -> Migrate Project…** from Visual Studio 2019 menu. - ![MigrationMenu](images/MigrationMenu.PNG) + ![Migration Menu in Blazor Extension](upgrade-project_images/blazor-extension-migration-menu.PNG) **Option 2** Right-click the application from the **Solution Explorer** and select the **Syncfusion Blazor** and choose the **Migrate Syncfusion Blazor project from another version...** - ![MigrationAddin](images/MigrationAddin.png) + ![Migration Addin in Blazor Extension](upgrade-project_images/blazor-extension-migration-add-in.png) 3. The Syncfusion Project Migration window will appear. You can choose the required version of Syncfusion Blazor to migrate. > The versions are loaded from the Syncfusion Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. - ![MigrationWizard](images/Migration.png) + ![Migration Wizard in Blazor Extension](upgrade-project_images/blazor-extension-migration.png) 4. Check the **“Enable a backup before migrating”** checkbox if you want to take the project backup and choose the location. 5. Once the migration process is completed, you will get a successful message window - ![MigrationSuccessMessage](images/MigrationSuccess.png) + ![Migration Success Message in Blazor Extension](upgrade-project_images/blazor-extension-migration-success-message.png) If you enabled project backup before migrating, the old application was saved in the specified backup path location, as shown below once the migration process completed. - ![MigrationBackupLocation](images/Backuplocation.png) + ![Migration Backup Location in Blazor Extension](upgrade-project_images/blazor-extension-backup-location.png) 6. The Syncfusion Blazor NuGet packages are updated to the respective version in the application. diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorCommand.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-command.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorCommand.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-command.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorMenu.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-menu.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorMenu.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-menu.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorWizard.png b/extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-wizard.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/CodeGeneratorWizard.png rename to extension/blazor-extension/Visual-Studio/code-generator-images/code-generator-wizard.png diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/ComponentRenderCode.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/component-render-code.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/ComponentRenderCode.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/component-render-code.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/OutputWindow.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/output-window.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/OutputWindow.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/output-window.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/ServicesCode.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/services-code.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/ServicesCode.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/services-code.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/code-generator-images/CDNLink.PNG b/extension/blazor-extension/Visual-Studio/code-generator-images/style-refrence.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/code-generator-images/CDNLink.PNG rename to extension/blazor-extension/Visual-Studio/code-generator-images/style-refrence.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ConversionAddin.png b/extension/blazor-extension/Visual-Studio/images/add-in.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ConversionAddin.png rename to extension/blazor-extension/Visual-Studio/images/add-in.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AddScopeAPI1.png b/extension/blazor-extension/Visual-Studio/images/add-scope-api-configuration.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AddScopeAPI1.png rename to extension/blazor-extension/Visual-Studio/images/add-scope-api-configuration.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AddScopeAPI.png b/extension/blazor-extension/Visual-Studio/images/add-scope-api.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AddScopeAPI.png rename to extension/blazor-extension/Visual-Studio/images/add-scope-api.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Migration.png b/extension/blazor-extension/Visual-Studio/images/api-migration.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Migration.png rename to extension/blazor-extension/Visual-Studio/images/api-migration.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AppRegistration.PNG b/extension/blazor-extension/Visual-Studio/images/app-registration.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AppRegistration.PNG rename to extension/blazor-extension/Visual-Studio/images/app-registration.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AuthenticationCheckBox1.PNG b/extension/blazor-extension/Visual-Studio/images/authentication-checkbox-page.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AuthenticationCheckBox1.PNG rename to extension/blazor-extension/Visual-Studio/images/authentication-checkbox-page.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AuthenticationCheckBox.PNG b/extension/blazor-extension/Visual-Studio/images/authentication-checkbox.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AuthenticationCheckBox.PNG rename to extension/blazor-extension/Visual-Studio/images/authentication-checkbox.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Backuplocation.png b/extension/blazor-extension/Visual-Studio/images/backup-location.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Backuplocation.png rename to extension/blazor-extension/Visual-Studio/images/backup-location.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/buildconfigurationbind.PNG b/extension/blazor-extension/Visual-Studio/images/build-configuration-bind.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/buildconfigurationbind.PNG rename to extension/blazor-extension/Visual-Studio/images/build-configuration-bind.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/CDNLink.png b/extension/blazor-extension/Visual-Studio/images/cdn-link.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/CDNLink.png rename to extension/blazor-extension/Visual-Studio/images/cdn-link.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ClientIdApplicationtype.PNG b/extension/blazor-extension/Visual-Studio/images/client-id-application-type.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ClientIdApplicationtype.PNG rename to extension/blazor-extension/Visual-Studio/images/client-id-application-type.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ClientIdCreation.PNG b/extension/blazor-extension/Visual-Studio/images/client-id-creation.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ClientIdCreation.PNG rename to extension/blazor-extension/Visual-Studio/images/client-id-creation.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ClinetIdConfiguration.PNG b/extension/blazor-extension/Visual-Studio/images/clinet-id-configuration.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ClinetIdConfiguration.PNG rename to extension/blazor-extension/Visual-Studio/images/clinet-id-configuration.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ClinetTenantId.PNG b/extension/blazor-extension/Visual-Studio/images/clinet-tenant-Id.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ClinetTenantId.PNG rename to extension/blazor-extension/Visual-Studio/images/clinet-tenant-Id.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Configuration1.png b/extension/blazor-extension/Visual-Studio/images/configuration-file.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Configuration1.png rename to extension/blazor-extension/Visual-Studio/images/configuration-file.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ControlPages.png b/extension/blazor-extension/Visual-Studio/images/control-pages.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ControlPages.png rename to extension/blazor-extension/Visual-Studio/images/control-pages.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png b/extension/blazor-extension/Visual-Studio/images/controls-section-application.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png rename to extension/blazor-extension/Visual-Studio/images/controls-section-application.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ConversionMenu.png b/extension/blazor-extension/Visual-Studio/images/conversion-menu.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ConversionMenu.png rename to extension/blazor-extension/Visual-Studio/images/conversion-menu.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ConversionSuccess.png b/extension/blazor-extension/Visual-Studio/images/conversion-success-message.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ConversionSuccess.png rename to extension/blazor-extension/Visual-Studio/images/conversion-success-message.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/CreateMenu.png b/extension/blazor-extension/Visual-Studio/images/create-menu.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/CreateMenu.png rename to extension/blazor-extension/Visual-Studio/images/create-menu.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/CreateNewWindow.png b/extension/blazor-extension/Visual-Studio/images/create-new-window.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/CreateNewWindow.png rename to extension/blazor-extension/Visual-Studio/images/create-new-window.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/CreateNewWizard.png b/extension/blazor-extension/Visual-Studio/images/create-new-wizard.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/CreateNewWizard.png rename to extension/blazor-extension/Visual-Studio/images/create-new-wizard.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png b/extension/blazor-extension/Visual-Studio/images/googel-api-console-credentials.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png rename to extension/blazor-extension/Visual-Studio/images/googel-api-console-credentials.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/GoogleLogin.PNG b/extension/blazor-extension/Visual-Studio/images/google-login.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/GoogleLogin.PNG rename to extension/blazor-extension/Visual-Studio/images/google-login.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/MicrosoftAuthentication.PNG b/extension/blazor-extension/Visual-Studio/images/microsoft-authentication.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/MicrosoftAuthentication.PNG rename to extension/blazor-extension/Visual-Studio/images/microsoft-authentication.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/MigrationAddin.png b/extension/blazor-extension/Visual-Studio/images/migration-add-in.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/MigrationAddin.png rename to extension/blazor-extension/Visual-Studio/images/migration-add-in.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Migration1.PNG b/extension/blazor-extension/Visual-Studio/images/migration-api.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Migration1.PNG rename to extension/blazor-extension/Visual-Studio/images/migration-api.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Migration2.PNG b/extension/blazor-extension/Visual-Studio/images/migration-configuration.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Migration2.PNG rename to extension/blazor-extension/Visual-Studio/images/migration-configuration.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/MigrationMenu.PNG b/extension/blazor-extension/Visual-Studio/images/migration-menu.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/MigrationMenu.PNG rename to extension/blazor-extension/Visual-Studio/images/migration-menu.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/MigrationSuccess.png b/extension/blazor-extension/Visual-Studio/images/migration-success-message.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/MigrationSuccess.png rename to extension/blazor-extension/Visual-Studio/images/migration-success-message.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/NameSupportedAccountType.PNG b/extension/blazor-extension/Visual-Studio/images/name-supported-account-type.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/NameSupportedAccountType.PNG rename to extension/blazor-extension/Visual-Studio/images/name-supported-account-type.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/NuGetPackage.png b/extension/blazor-extension/Visual-Studio/images/nuget-package.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/NuGetPackage.png rename to extension/blazor-extension/Visual-Studio/images/nuget-package.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/OauthclientId.png b/extension/blazor-extension/Visual-Studio/images/oauth-client-id.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/OauthclientId.png rename to extension/blazor-extension/Visual-Studio/images/oauth-client-id.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ProjectTypeWizard.png b/extension/blazor-extension/Visual-Studio/images/project-type-wizard.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ProjectTypeWizard.png rename to extension/blazor-extension/Visual-Studio/images/project-type-wizard.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/AADRedirectedURI.png b/extension/blazor-extension/Visual-Studio/images/redirect-uri.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/AADRedirectedURI.png rename to extension/blazor-extension/Visual-Studio/images/redirect-uri.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/RedirectedURI.png b/extension/blazor-extension/Visual-Studio/images/redirected-uri.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/RedirectedURI.png rename to extension/blazor-extension/Visual-Studio/images/redirected-uri.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/RegisterApplication.png b/extension/blazor-extension/Visual-Studio/images/register-application.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/RegisterApplication.png rename to extension/blazor-extension/Visual-Studio/images/register-application.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/RegisterConfirmation.png b/extension/blazor-extension/Visual-Studio/images/register-confirmation.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/RegisterConfirmation.png rename to extension/blazor-extension/Visual-Studio/images/register-confirmation.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ScopeAPIConfiguration.PNG b/extension/blazor-extension/Visual-Studio/images/scope-api-configuration.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/ScopeAPIConfiguration.PNG rename to extension/blazor-extension/Visual-Studio/images/scope-api-configuration.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio/images/TemplateStudio.png b/extension/blazor-extension/Visual-Studio/images/template-studio.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/TemplateStudio.png rename to extension/blazor-extension/Visual-Studio/images/template-studio.png diff --git a/Extension/Blazor-Extension/Visual-Studio/images/Conversion.png b/extension/blazor-extension/Visual-Studio/images/wizard-conversion.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio/images/Conversion.png rename to extension/blazor-extension/Visual-Studio/images/wizard-conversion.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/NuGetPackage.png b/extension/blazor-extension/visual-studio-code/images/added-nuget-package.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/NuGetPackage.png rename to extension/blazor-extension/visual-studio-code/images/added-nuget-package.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Comment.png b/extension/blazor-extension/visual-studio-code/images/comment-section.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Comment.png rename to extension/blazor-extension/visual-studio-code/images/comment-section.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/CounterPageChange.png b/extension/blazor-extension/visual-studio-code/images/counter-page-change.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/CounterPageChange.png rename to extension/blazor-extension/visual-studio-code/images/counter-page-change.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png b/extension/blazor-extension/visual-studio-code/images/created-project-configuration.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png rename to extension/blazor-extension/visual-studio-code/images/created-project-configuration.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/FetchDataPageChange.png b/extension/blazor-extension/visual-studio-code/images/fetch-data-page-change.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/FetchDataPageChange.png rename to extension/blazor-extension/visual-studio-code/images/fetch-data-page-change.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Help.png b/extension/blazor-extension/visual-studio-code/images/help-link.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Help.png rename to extension/blazor-extension/visual-studio-code/images/help-link.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/IndexFileChange.png b/extension/blazor-extension/visual-studio-code/images/index-file-change.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/IndexFileChange.png rename to extension/blazor-extension/visual-studio-code/images/index-file-change.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/NuGet-Snippet.png b/extension/blazor-extension/visual-studio-code/images/nuget-packages.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/NuGet-Snippet.png rename to extension/blazor-extension/visual-studio-code/images/nuget-packages.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Conversion.PNG b/extension/blazor-extension/visual-studio-code/images/project-conversion-application.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Conversion.PNG rename to extension/blazor-extension/visual-studio-code/images/project-conversion-application.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/ChooseThemes.PNG b/extension/blazor-extension/visual-studio-code/images/project-conversion-theme-selected.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/ChooseThemes.PNG rename to extension/blazor-extension/visual-studio-code/images/project-conversion-theme-selected.PNG diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png b/extension/blazor-extension/visual-studio-code/images/project-location-name.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png rename to extension/blazor-extension/visual-studio-code/images/project-location-name.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/CreateBlazorProjectPalette.png b/extension/blazor-extension/visual-studio-code/images/project-palette.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/CreateBlazorProjectPalette.png rename to extension/blazor-extension/visual-studio-code/images/project-palette.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png b/extension/blazor-extension/visual-studio-code/images/project-type-details.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png rename to extension/blazor-extension/visual-studio-code/images/project-type-details.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration-Snippet.png b/extension/blazor-extension/visual-studio-code/images/snippet-configuration.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration-Snippet.png rename to extension/blazor-extension/visual-studio-code/images/snippet-configuration.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Namespace-Snippet.png b/extension/blazor-extension/visual-studio-code/images/snippet-namespace.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/Namespace-Snippet.png rename to extension/blazor-extension/visual-studio-code/images/snippet-namespace.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/CDNLink.png b/extension/blazor-extension/visual-studio-code/images/theme-links.png similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/CDNLink.png rename to extension/blazor-extension/visual-studio-code/images/theme-links.png diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/VersionSelection.PNG b/extension/blazor-extension/visual-studio-code/images/version-selection.PNG similarity index 100% rename from Extension/Blazor-Extension/Visual-Studio-Code/images/VersionSelection.PNG rename to extension/blazor-extension/visual-studio-code/images/version-selection.PNG