diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ProjectDetails.png b/Extension/Blazor-Extension/Visual-Studio/images/ProjectDetails.png index fa522a28..4887c0e6 100644 Binary files a/Extension/Blazor-Extension/Visual-Studio/images/ProjectDetails.png and b/Extension/Blazor-Extension/Visual-Studio/images/ProjectDetails.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WASMConfig.png b/Extension/Blazor-Extension/Visual-Studio/images/WASMConfig.png new file mode 100644 index 00000000..04e98703 Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WASMConfig.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WASMTemplate.png b/Extension/Blazor-Extension/Visual-Studio/images/WASMTemplate.png new file mode 100644 index 00000000..e74f04e1 Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WASMTemplate.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WebAppConfig.png b/Extension/Blazor-Extension/Visual-Studio/images/WebAppConfig.png new file mode 100644 index 00000000..d9170b04 Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WebAppConfig.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WebAppTemplate.png b/Extension/Blazor-Extension/Visual-Studio/images/WebAppTemplate.png new file mode 100644 index 00000000..cbbdfd2f Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WebAppTemplate.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/template-studio.md b/Extension/Blazor-Extension/Visual-Studio/template-studio.md index 78d2aa39..1ddbc220 100644 --- a/Extension/Blazor-Extension/Visual-Studio/template-studio.md +++ b/Extension/Blazor-Extension/Visual-Studio/template-studio.md @@ -11,7 +11,9 @@ documentation: ug Syncfusion provides the Blazor Template Studio, which allows you to create a Syncfusion Blazor application with Syncfusion components. The Syncfusion Blazor app is created with the required component Syncfusion NuGet references, namespaces, styles, and component render code. The Template Studio provides an easy-to-use project wizard that walks you through the process of creating an application with Syncfusion components. -The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2019**: +The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2022**: + +> **Note:** The Syncfusion Blazor Extensions for Visual Studio 2019 are available on Essential Studio release "20.3.0.56" and below. > 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. @@ -35,25 +37,48 @@ The steps below will assist you to create your **Syncfusion Blazor Application** ![CreateNewWizard](images/CreateNewWizard.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) - - > .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022. +4. The Syncfusion Blazor Template Studio wizard will be launched to configure the Syncfusion Blazor app. - > .NET 7.0 is available from v20.4.0.38 and support from Visual Studio 2022. - - > .NET 8.0 is available from v23.2.4 and support from Visual Studio 2022. + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). **Project type section** - Choose one of the Syncfusion Blazor application types: - * Syncfusion Blazor Server App - * Syncfusion Blazor WebAssembly App - - In the Syncfusion Blazor WebAssembly App application type, we can choose **ASP.NET Core hosted**, **Progressive Web Application**, or both. - - ![ProjectTypeWizard](images/ProjectTypeWizard.png) + Choose one of the Syncfusion Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ------------- | ------------- | + | [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App | + | [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0), [.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) | Syncfusion Blazor WebAssembly App | + | [.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) | Syncfusion Blazor Server App | + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/WebAppTemplate.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose ASP.NET Core hosted, Progressive Web Application, or both. + + ![WASMTemplate](images/WASMTemplate.png) > **Note:** The Progressive Web Application will be enabled if .NET 6.0 version or higher is installed. @@ -73,16 +98,30 @@ The steps below will assist you to create your **Syncfusion Blazor Application** 6. Click either **Next** or the **Features** tab, and you will see the features listed for the selected controls. You can choose the required features. -7. Click either **Next** or the **Configuration** tab, and the Configuration section will be loaded. You can choose the required (.NET 6.0, .NET 7.0, and .NET 8.0), themes, https configuration, authentication type (None, Individual Accounts, Microsoft Identity Platform, and Windows), and Blazor Web Assembly application types (ASP.NET Core hosted and Progressive Web Application). +7. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 8.0, .NET 7.0, and .NET 6.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. - > **Note:** ASP.NET Core hosted and Progressive Web Application options are only visible for the Blazor Web Assembly App application type. + Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types. - ![Choose required Project Configuration](images/Configuration.png) + | Syncfusion Blazor Application Type | Supported Authentication Types | + | ------------- | ------------- | + | Syncfusion Blazor Web App | None and Individual Accounts | + | Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + | Syncfusion Blazor Server App | None, Individual Accounts, Microsoft Identity Platform, and Windows | + + If you choose the **Blazor Web App** application type, you can customize the Interactivity type and Interactivity location options. + + ![WebAppConfiguration](images/WebAppConfig.png) + + If you choose the **Blazor Web Assembly App** application type, you can customize the ASP.NET Core hosted and Progressive Web Application options. + + ![WASMConfiguration](images/WASMConfig.png) **Project details section** You can change the configuration details below in the Project Details section to change the application type, remove control(s) from the selected controls, or change the configurations. + ![ProjectDetails](images/ProjectDetails.png) + 8. Click **Create** button. The Syncfusion Blazor application has been created. The created Syncfusion Blazor app has the Syncfusion NuGet packages, styles, and the render code for the Syncfusion component. ![Readme](images/readme.png)