diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md b/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md index 36ed3347..112c6761 100644 --- a/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md +++ b/Extension/Blazor-Extension/Visual-Studio-Code/create-project.md @@ -23,19 +23,44 @@ The instructions below assist you in creating **Syncfusion Blazor Applications** ![TemplateStudioWizard](images/ProjectLocationName.png) - > .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022. - - > .NET 7.0 is available from v20.4.0.38 and support from Visual Studio 2022. - - > .NET 8.0 is available from v23.3.4 and support from Visual Studio 2022. - -3. Select either **Next** or the **Project Type** tab. Syncfusion Blazor Project Types will be displayed. Select one of the following Syncfusion Blazor project types: - * Syncfusion Blazor Server App - * Syncfusion Blazor WebAssembly App - - 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) +N> Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + +3. Select either **Next** or the **Project Type** tab. Syncfusion Blazor project types will be displayed. Choose one of the following Syncfusion Blazor project 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/WebAppType.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose ASP.NET Core hosted, Progressive Web Application, or both. + + ![ProjectType](images/ProjectTypeDetails.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). diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png b/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png index b3f6366e..f3403a0e 100644 Binary files a/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png and b/Extension/Blazor-Extension/Visual-Studio-Code/images/Configuration.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png b/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png index 0c55aac4..338e1a32 100644 Binary files a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png and b/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectLocationName.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png b/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png index 0ebd1fe8..655a145e 100644 Binary files a/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png and b/Extension/Blazor-Extension/Visual-Studio-Code/images/ProjectTypeDetails.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio-Code/images/WebAppType.png b/Extension/Blazor-Extension/Visual-Studio-Code/images/WebAppType.png new file mode 100644 index 00000000..e967da10 Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio-Code/images/WebAppType.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png b/Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png index 1f1b7160..a341f724 100644 Binary files a/Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png and b/Extension/Blazor-Extension/Visual-Studio/images/ControlsSection1.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegister.png b/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegister.png new file mode 100644 index 00000000..29de53d7 Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegister.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png b/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png new file mode 100644 index 00000000..bdd9c69d Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/images/WebApplogIn.png b/Extension/Blazor-Extension/Visual-Studio/images/WebApplogIn.png new file mode 100644 index 00000000..1317eefe Binary files /dev/null and b/Extension/Blazor-Extension/Visual-Studio/images/WebApplogIn.png differ diff --git a/Extension/Blazor-Extension/Visual-Studio/template-studio.md b/Extension/Blazor-Extension/Visual-Studio/template-studio.md index 1ddbc220..e2153270 100644 --- a/Extension/Blazor-Extension/Visual-Studio/template-studio.md +++ b/Extension/Blazor-Extension/Visual-Studio/template-studio.md @@ -372,6 +372,42 @@ You can select a culture language in combobox at top right on the output page to ### Individual Authentication +#### Blazor Web App + +##### Applying Database Migrations and User Registration in the .NET 8.0 Blazor Web App + +##### Applying Database Migrations: + +In the Blazor Web App, it's essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options: + +**Option 1: Using Visual Studio Package Manager Console** + +Navigate to **View -> Other Windows -> Package Manager Console** in Visual Studio. + +Run the following command in the Package Manager Console: + + ```Update-Database``` + +**Option 2: Using Command Prompt** + +Open a command prompt in your project directory and execute the following command: + + ```dotnet ef database update``` + +##### User Registration: + +1. Launch the application and register by submitting your email address and creating a password. + + ![Register the WebApp](images/WebAppRegister.png) + +2. Confirm your registration by clicking **Click here to confirm your account.** + + ![Confirming the WebApp registration](images/WebAppRegisterConfirmation.png) + +3. Submit your registered email address and password to log in to the application. + + ![LogIn to the WebApp](images/WebApplogIn.png) + #### Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted 1. For register the application, submit your email address and create a password.