diff --git a/blazor/installation/common-installation-errors.md b/blazor/installation/common-installation-errors.md index 10c52a8911..c7664465ff 100644 --- a/blazor/installation/common-installation-errors.md +++ b/blazor/installation/common-installation-errors.md @@ -1,13 +1,13 @@ --- layout: post -title: Installation Errors in Blazor - Syncfusion -description: Learn here about the common installation errors and solution to those errors in Syncfusion Blazor Components installation. +title: Common installation errors in Blazor | Syncfusion +description: Understand common Syncfusion Blazor installer errors, their causes, and solutions including unlock key issues, license expiration, concurrent installers. platform: Blazor -component: Common +control: Common documentation: ug --- -# Common Installation Errors +# Common installation errors This article describes the most common installation errors, as well as the causes and solutions to those errors. @@ -21,28 +21,28 @@ This article describes the most common installation errors, as well as the cause **Error Message:** Sorry, the provided unlock key is a trial unlock key and cannot be used to unlock the licensed version of our Essential Studio® for Blazor installer. -![Installation Unlock Error](images/installation-error-1.png) +![Unlock key error when using a trial key with the licensed installer](images/installation-error-1.png) -**Reason**
You are attempting to use a Trial unlock key to unlock the licensed installer. +**Reason:**
A trial unlock key is being used with the licensed installer. -**Suggested solution**
Only a licensed unlock key can unlock a licensed installer. So, to unlock the Licensed installer, use the Licensed unlock key. To generate the licensed unlock key, refer to [this](https://support.syncfusion.com/kb/article/2757/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. +**Suggested solution:** Only a licensed unlock key can unlock a licensed installer. So, to unlock the Licensed installer, use the Licensed unlock key. To generate the licensed unlock key, refer to [this](https://support.syncfusion.com/kb/article/2757/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. ## License has expired **Error Message:** Your license for Syncfusion® Essential Studio® for Blazor has been expired since {date}. Renew your subscription and try again. -***Online Installer*** +***Online installer*** -![Installation License Expired Error](images/installation-error-2.png) +![License expired message in the web installer](images/installation-error-2.png) -**Reason**
This error message will appear if your license has expired. +**Reason:** This error message will appear if your license has expired. -**Suggested solution**
You can choose from the options listed below. +**Suggested solution:** Choose one of the following options. -1. You can renew your subscription [here](https://www.syncfusion.com/account/my-renewals). -2. You can get a new license [here](https://www.syncfusion.com/sales/products). -3. You can reach out to our sales team by emailing [sales@syncfusion.com](mailto:sales@syncfusion.com). -4. You can also extend the 30-day trial period after your trial license has expired. +1. Renew the subscription [here](https://www.syncfusion.com/account/my-renewals) +2. Purchase a new license [here](https://www.syncfusion.com/sales/products) +3. Contact sales: sales@syncfusion.com +4. If applicable, extend the 30‑day trial period. ## Unable to find a valid license or trial @@ -50,60 +50,61 @@ This article describes the most common installation errors, as well as the cause ***Offline installer*** -![Installation Offline Installer Error](images/installation-error-3.png) +![Account has no valid license or trial in the offline installer](images/installation-error-3.png) ***Online installer*** -![Installation Online Installer Error](images/installation-error-4.png) +![Account has no valid license or trial in the web installer](images/installation-error-4.png) -**Reason**
The following are possible causes of this error: +**Reason:** One of the following is true: -* When your trial period expired -* When you don’t have a license or an active trial -* You are not the license holder of your license -* Your account administrator has not yet assigned you a license. +* The 30‑day trial has expired +* The account has no license or active trial +* The user is not the license holder for the product +* The account administrator has not assigned a license to the user -**Suggested solution**
-1. You can get a new license [here](https://www.syncfusion.com/sales/products). -2. Contact your account administrator. -3. Send an email to [clientrelations@syncfusion.com](mailto:clientrelations@syncfusion.com) to request a license. -4. You can reach out to our sales team by emailing [sales@syncfusion.com](mailto:sales@syncfusion.com). +**Suggested solution:** +1. Purchase a license: https://www.syncfusion.com/sales/products +2. Ask the account administrator to assign a license in Syncfusion account portal +3. Request assistance: clientrelations@syncfusion.com +4. Contact sales: sales@syncfusion.com ## Unable to install because of another installation **Error Message:** Another installation is in progress. You cannot start this installation without completing all other currently active installations. Click cancel to end this installer or retry to attempt after currently active installation completed to install again. -![Installation Error Another MSI Running](images/installation-error-5.png) +![Another installation in progress error dialog](images/installation-error-5.png) + +**Reason:** You are trying to install when another installation is already running in your machine. -**Reason**
You are trying to install when another installation is already running in your machine. +**Suggested solution:** Open and kill the msiexec process in the task manager and then continue to install Syncfusion. If the problem is still present, restart the computer and try Syncfusion® installer. -**Suggested solution**
Open and kill the msiexec process in the task manager and then continue to install Syncfusion. If the problem is still present, restart the computer and try Syncfusion® installer. -1. Open the Windows Task Manager. +1. Open Windows Task Manager. 2. Browse the Details tab. 3. Select the msiexec.exe and click **End task**. -![Installation Error MSIEXEC Kill](images/installation-error-6.png) +![Windows Task Manager showing msiexec.exe to end task](images/installation-error-6.png) ## Unable to install due to controlled folder access ***Offline*** -**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install or samples location (e.g., Public Documents) is protected by the controlled folder access settings. +**Error Message:** Controlled folder access seems to be enabled on this machine. The provided install or samples location (for example, Public Documents) is protected by controlled folder access settings. -![Installation Offline Installer Error Controlled Folder Access](images/installation-error-7.png) +![Offline installer controlled folder access warning](images/installation-error-7.png) ***Online*** -**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install, samples, or download location (e.g., Public Documents) is protected by the controlled folder access settings. +**Error Message:** Controlled folder access seems to be enabled on this machine. The provided install, samples, or download location (for example, Public Documents) is protected by controlled folder access settings. -![Installation Online Installer Error Controlled Folder Access](images/installation-error-8.png) +![Web installer controlled folder access warning](images/installation-error-8.png) -**Reason**
You have enabled controlled folder access settings on your computer. +**Reason:** You have enabled controlled folder access settings on your computer. -***Suggested solution*** +**Suggested solution:** **Suggestion 1:** -* We will ship our demos in the public documents folder by default. +* Syncfusion demos are installed to the Public Documents folder by default. * You have controlled folder access enabled on your machine, so our demos cannot be installed in the documents folder. If you need to install our demos in the Documents folder, follow the steps in this [link](https://support.microsoft.com/en-us/windows/allow-an-app-to-access-controlled-folders-b5b6627a-b008-2ca2-7931-7e51e912b034) and disable the controlled folder access. * You can enable this option after the installing our Syncfusion® setup. diff --git a/blazor/installation/install-nuget-packages.md b/blazor/installation/install-nuget-packages.md index e321323387..5adbf2b4b5 100644 --- a/blazor/installation/install-nuget-packages.md +++ b/blazor/installation/install-nuget-packages.md @@ -1,13 +1,13 @@ --- layout: post -title: Install Syncfusion Blazor NuGet packages - Syncfusion -description: Learn here about the how to install Syncfusion Blazor NuGet packages from Package manager and NuGet manager. +title: Install Syncfusion Blazor NuGet packages | Syncfusion +description: Learn here about how to install Syncfusion Blazor NuGet packages using the Package Manager UI, .NET CLI, and Package Manager Console. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Install Syncfusion® Blazor NuGet packages +# Install Syncfusion® Blazor NuGet packages ## Overview @@ -22,27 +22,27 @@ The NuGet **Package Manager UI** allows you to search, install, uninstall, and u 1. Right-click on the Blazor application or solution in the Solution Explorer, and choose **Manage NuGet Packages...** - ![Manage NuGet Packages add-in](images/ManageNuGet.png) + ![Open Manage NuGet Packages from Solution Explorer](images/ManageNuGet.png) As an alternative, after opening the Blazor application in Visual Studio, go to the **Tools** menu and after hovering **NuGet Package Manager**, select **Manage NuGet Packages for Solution...** 2. The Manage NuGet Packages window will open. Navigate to the **Browse** tab, then search for the Syncfusion® Blazor NuGet packages using a term like **"Syncfusion® Blazor"** and select the appropriate Syncfusion® Blazor NuGet package for your development. - N> The [nuget.org](https://api.nuget.org/v3/index.json) package source is selected by default in the Package source drop-down. If your Visual Studio does not have nuget.org configured, follow the instructions in the [Microsoft documents](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio#package-sources) to set up the nuget.org feed URL. + N> The [nuget.org](https://api.nuget.org/v3/index.json) package source is selected by default. If Visual Studio does not have nuget.org configured, follow the instructions in the [Microsoft documents](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-visual-studio#package-sources) to set up the nuget.org feed URL. - ![Blazor NuGet Packages Search](images/NuGetsearch.png) + ![Search for Syncfusion Blazor packages in the Browse tab](images/NuGetsearch.png) 3. When you select a Blazor package, the right side panel will provide more information about it. 4. By default, the package is selected with the latest version. You can choose the required version and click the **Install** button and accept the license terms. The package will be added to your Blazor application. - ![Blazor NuGet Packages Install](images/InstallNuGet.png) + ![Install a Syncfusion Blazor package from the Package Manager UI](images/InstallNuGet.png) 5. At this point, your application has all the required Syncfusion® assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). Also, you can refer to the [Blazor help document](https://blazor.syncfusion.com/documentation/introduction) for development. ## Installation using Dotnet (.NET) CLI -The [dotnet Command Line Interface (CLI)](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli), allows you to add, restore, pack, publish, and manage packages without making any changes to your application files. [Dotnet add package](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-add-package?tabs=netcore2x) adds a package reference to the application file, then runs [dotnet restore](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-restore?tabs=netcore2x) to install the package. +The [dotnet Command Line Interface (CLI)]((https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli)) lets you add, restore, pack, publish, and manage packages without making any changes to your application files. [Dotnet add package](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-add-package?tabs=netcore2x) adds a package reference to the application file, then runs [dotnet restore](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-restore?tabs=netcore2x) to install the package. Follow the below instructions to use the dotnet CLI command to install the Syncfusion® Blazor NuGet packages. @@ -72,7 +72,7 @@ The **Package Manager Console** saves NuGet packages installation time since you 1. To show the Package Manager Console, open your Blazor application in Visual Studio and navigate to **Tools -> NuGet Package Manager -> Package Manager Console**. - ![Package Manager Console ](images/console.png) + ![Package Manager Console in Visual Studio](images/console.png) 2. The **Package Manager Console** will be shown at the bottom of the screen. You can install the Syncfusion® Blazor NuGet packages by entering the following NuGet installation commands. @@ -84,13 +84,13 @@ The **Package Manager Console** saves NuGet packages installation time since you **For example:** Install-Package Syncfusion.Blazor.Grid - N> You can find the list of Syncfusion® Blazor NuGet packages which are published in nuget.org from [here](https://www.nuget.org/packages?q=Tags%3A%22Blazor%22+syncfusion) + N> Browse Syncfusion® Blazor NuGet packages on [NuGet.org](https://www.nuget.org/packages?q=Tags%3A%22Blazor%22+syncfusion). ***Install specified Syncfusion® Blazor NuGet package in specified Blazor application*** The following command will install the Syncfusion® Blazor NuGet package in the given Blazor application. - ```Install-Package - ProjectName ``` + ```Install-Package -ProjectName ``` **For example:** Install-Package Syncfusion.Blazor.Grid -ProjectName SyncfusionBlazorApp @@ -98,7 +98,7 @@ The **Package Manager Console** saves NuGet packages installation time since you ```Install-Package Syncfusion.Blazor.Grid -Version 19.2.0.44``` - ![Package Manager Console Output ](images/ConsoleInstallationOutput.png) + ![Package Manager Console output showing installed package](images/ConsoleInstallationOutput.png) 4. The NuGet package manager console will install the Syncfusion® Blazor NuGet package as well as the dependencies it has. When the installation is complete, the console will show that your Syncfusion® Blazor package has been successfully added to the application. diff --git a/blazor/installation/linux-installer/how-to-download.md b/blazor/installation/linux-installer/how-to-download.md index 811eec14ca..235ae9f53e 100644 --- a/blazor/installation/linux-installer/how-to-download.md +++ b/blazor/installation/linux-installer/how-to-download.md @@ -1,22 +1,22 @@ --- layout: post -title: Downloading Syncfusion Blazor Linux installer - Syncfusion -description: Learn here about the how to download Syncfusion Blazor linux installer packages from syncfusion website. +title: Download the Syncfusion Blazor Linux installer | Syncfusion +description: Learn how to download Blazor Linux installer for trial or licensed use from your Syncfusion account, including Start trials and License and Downloads options. platform: Blazor -component: Common +control: Common documentation: ug --- -# Download Syncfusion® Blazor Linux Installer +# Download the Syncfusion® Blazor Linux installer -The Syncfusion® installer can be downloaded from the [Syncfusion](https://www.syncfusion.com/) website. You can either download the licensed installer or try our trial installer depending on your license. +Download the Syncfusion Blazor Linux installer from the Syncfusion website. Download options depend on the account status: trial or licensed. - - Trial Installer - - Licensed Installer +- Trial installer +- Licensed installer -You can download the Syncfusion® installer from [Syncfusion.com](https://www.syncfusion.com/) website +You can download the Syncfusion® installer from [Syncfusion.com](https://www.syncfusion.com/) website. -## Download the Trial Version +## Download the trial version Our 30-day trial can be downloaded in two ways. @@ -24,56 +24,56 @@ Our 30-day trial can be downloaded in two ways. * Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -### Download Free Trial Setup +### Download the free trial setup -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product -2. After completing the required form or logging in with your registered Syncfusion® account, you can download the trial installer from the confirmation page. (as shown in below screenshot.) +1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor product. +2. Complete the form or sign in with a registered Syncfusion® account to download the Blazor trial installer from the confirmation page (as shown in below screenshot). - ![Trial and downloads of Syncfusion Blazor](images/trial-confirmation.png) + ![Trial confirmation page showing Blazor Linux installer download](images/trial-confirmation.png) 3. With a trial license, only the latest version’s trial installer can be downloaded. -4. Unlock key is not required to install the Syncfusion® Blazor Linux trial installer. -5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) +4. An unlock key is not required to install the Syncfusion® Blazor Linux trial installer. +5. Before the trial expires, download the trial installer at any time from the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot). - ![Trial and downloads of Syncfusion Blazor](images/trial-download.png) + ![Trials and Downloads page with Download button for the Blazor Linux installer](images/trial-download.png) -6. Click the More Download Options (element 2 in the above screenshot) button to get the Blazor Product Offline trial installer which is available in ZIP format. +6. Select More download options (element 2 in the above screenshot) to get the Essential Studio® Blazor offline trial installer (ZIP format). - ![License and downloads of Syncfusion Blazor](images/start-trial-download-offline-installer.png) + ![Trials and Downloads page showing offline installer download options](images/start-trial-download-offline-installer.png) -### Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +### Start trials if using components through NuGet.org -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +Start an evaluation if components were obtained through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). -1. You can start your 30-day free trial from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. +1. Start a 30‑day Blazor trial from the [Start trial](https://www.syncfusion.com/account/manage-trials/start-trials) page. N> You can generate the license key for your active trial products from [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. This license key will be mandatory to use our trial products in your application. To know more about License key, refer this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview). - - ![Trial and downloads of Syncfusion Blazor](images/start-trial-download.png) + + ![Start trials page for Blazor](images/start-trial-download.png) -2. To access this page, you must sign up\log in with your Syncfusion® account. -3. Begin your trial by selecting the Syncfusion® product. +2. To access this page, sign up or log in with a Syncfusion® account. +3. Begin the trial by selecting the Syncfusion® product. - N> If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. + N> If an existing Blazor trial is still active, a new trial for the same product cannot be started. -4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://help.syncfusion.com/common/essential-studio/licensing/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot.) +4. After starting the trial, go to [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) to get the latest trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://help.syncfusion.com/common/essential-studio/licensing/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot.) - ![License and downloads of Syncfusion Blazor](images/start-trial-download-installer.png) + ![Trials and Downloads page showing trial installer and key generation options](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. - -## Download the License Version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +## Download the licensed version + +1. Licensed products are available from the [License & Downloads](https://www.syncfusion.com/account/downloads) page in the Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. You can download Blazor Linux licensed installer by going to More Downloads Options (element 3 in the screenshot below). +3. Select More download options (element 3 in the screenshot below) to download the Blazor Linux licensed offline installer. - ![License and downloads of Syncfusion Blazor](images/license-download.png) + ![License and Downloads page showing More download options for the Blazor Linux installer](images/license-download.png) -4. Unlock key is not required to install the Syncfusion® Blazor Linux trial installer. -5. For Linux OS, ZIP formats is available for download. +4. An unlock key is not required to install the Syncfusion® Blazor Linux licensed installer. +5. For Linux, the installer is available in ZIP format (offline installer). - ![License and downloads of Syncfusion Blazor](images/Linux_Download.PNG) + ![License and Downloads page listing Blazor Linux ZIP download](images/Linux_Download.PNG) -You can also refer to the [**Blazor Linux installer**](https://blazor.syncfusion.com/documentation/installation/linux-installer/how-to-install) links for step-by-step installation guidelines. +For step-by-step installation, see [Blazor Linux installer](https://blazor.syncfusion.com/documentation/installation/linux-installer/how-to-install). \ No newline at end of file diff --git a/blazor/installation/linux-installer/how-to-install.md b/blazor/installation/linux-installer/how-to-install.md index 8ed5674daa..316f7b5994 100644 --- a/blazor/installation/linux-installer/how-to-install.md +++ b/blazor/installation/linux-installer/how-to-install.md @@ -1,42 +1,40 @@ --- layout: post -title: Installing Syncfusion Blazor Linux installer - Syncfusion -description: Learn here about how to install Syncfusion Blazor linux installer after downloading from our Syncfusion website. +title: Install the Syncfusion Blazor Linux installer | Syncfusion +description: Learn here about how to install the Syncfusion Blazor Linux offline installer (ZIP), review included content, and register license keys in sample projects. platform: Blazor -component: Common +control: Common documentation: ug --- -# Installing Syncfusion® Blazor Linux installer +# Install the Syncfusion® Blazor Linux installer -## Step-by-Step Installation +## Install on Linux -The steps below show how to install Blazor Linux installer. +The steps below show how to install and use the Syncfusion Blazor Linux offline installer (ZIP). -1. Extract the Syncfusion® Blazor Linux installer(.zip) file. The files are extracted in your machine. +N> Prerequisites: Supported Linux distribution, .NET SDK installed, unzip tool, and sufficient disk space. - ![Welcome wizard](images/Linux_Installer1.png) - +1. Extract the Syncfusion® Blazor Linux installer ZIP to a folder. -2. The Linux zip file contains the following folders. + ![Extract the Syncfusion Blazor Linux installer ZIP to a folder](images/Linux_Installer1.png) - ![License Agreement](images/Linux_Installer2.png) - - N> The Unlock key is not required to install the Linux installer. +2. Review the extracted contents. The package includes demo source, offline NuGet packages, and supporting files. + ![Extracted contents of the Blazor Linux offline installer](images/Linux_Installer2.png) -4. You can launch the demo source and use the NuGet packages included in the Linux installer. - +N> An unlock key is not required to install or use the Blazor Linux offline installer. +3. Launch the demo projects from the extracted folder and reference the included NuGet packages as needed. ## License key registration in samples After the installation, the license key is required to register the demo source that is included in the Linux installer. To learn about the steps for license registration for the Blazor Linux installer, please refer to this. -* For server side application register the license key in Configure method of [Startup.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-server-app) -* For client side application register the license key in main method of [Program.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-webassembly-app) +* **Blazor Server App**: Register the license key in Configure method of [Startup.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-server-app) +* **Blazor WASM App**: Register the license key in main method of [Program.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-webassembly-app) You can also find the steps for getting started with Syncfusion® Blazor components in Linux, -* Getting started with Syncfusion® Blazor Components in [Blazor Server Side App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-mac/#getting-started-with-syncfusion-blazor-components-in-blazor-server-side-app-using-visual-studio-for-mac) using Visual Studio for Linux. -* Getting started with Syncfusion® Blazor Components in [Web Assembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio-mac/) using Visual Studio for Linux. \ No newline at end of file +* Getting started with Syncfusion® Blazor Components in [Blazor Server Side App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-mac#getting-started-with-syncfusion-blazor-components-in-blazor-server-side-app-using-visual-studio-for-mac) using Visual Studio for Linux. +* Getting started with Syncfusion® Blazor Components in [Web Assembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio-mac) using Visual Studio for Linux. \ No newline at end of file diff --git a/blazor/installation/mac-installer/how-to-download.md b/blazor/installation/mac-installer/how-to-download.md index 51286dc7c9..b762c954e0 100644 --- a/blazor/installation/mac-installer/how-to-download.md +++ b/blazor/installation/mac-installer/how-to-download.md @@ -1,73 +1,73 @@ --- layout: post -title: Downloading Syncfusion Blazor Mac installer - Syncfusion -description: Learn here about the how to download Syncfusion Blazor mac installer packages from syncfusion website. +title: Download the Syncfusion Blazor Mac installer - Syncfusion +description: Learn here about how to download the Syncfusion Blazor Mac installer for trial or licensed use, including Start trials and License & Downloads options. platform: Blazor -component: Common +control: Common documentation: ug --- -# Downloading Syncfusion® Blazor Mac installer +# Download the Syncfusion® Blazor Mac installer -Syncfusion® provides Blazor Mac installer for both evaluation and paid customers. You can either download the licensed installer or try our trial installer depending on your license. +Syncfusion® provides a Blazor Mac installer for both evaluation and paid customers. Download options depend on the account status: trial or licensed. * Trial Installer * Licensed Installer -## Download the Trial Version +## Download the trial version -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. +1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. 2. After completing the required form or logging in with your registered Syncfusion® account, you can download the Blazor trial installer from the confirmation page. (as shown in below screenshot.) - ![Trial Confirmation](images/blazor_mac_trial.PNG) + ![Trial confirmation page showing Blazor Mac installer download](images/blazor_mac_trial.PNG) 3. With a trial license, only the latest version’s trial installer can be downloaded. -4. Unlock key is not required to install the Syncfusion® Blazor Mac trial installer. +4. An unlock key is not required to install the Blazor Mac trial installer. -5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) +5. Before the trial expires, download the trial installer at any time from the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. - ![Start Trial download](images/start-trial-download-installer.png) + ![Trials and Downloads page with Download button for the Blazor Mac installer](images/start-trial-download-installer.png) 6. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio® Blazor Offline trial installer which is available in DMG format. ![Trial Downlaod Offline Installer](images/blazor_mac.png) -### Start Trials if using components through NuGet.org +### Start trials if using components through NuGet.org -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +Start an evaluation if components were obtained through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). -1. You can start your 30-day free trial for Blazor from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. +1. Start a 30‑day Blazor trial from the [Start trials](https://www.syncfusion.com/account/manage-trials/start-trials) page. - ![Trial Download](images/start-trial-download.PNG) + ![Start trials page for Blazor](images/start-trial-download.PNG) 2. To access this page, you must sign up/log in with your Syncfusion® account. -3. Begin your trial by selecting the Blazor product. +3. Begin the trial by selecting the Blazor product. - N> If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + N> If an existing Blazor trial is still active, a new trial for the same product cannot be started. -4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://support.syncfusion.com/kb/article/7053/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot.) +4. After starting the trial, go to [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) to get the latest trial installer. You can generate the [unlock key](https://support.syncfusion.com/kb/article/7053/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot) - ![Start Trial download](images/start-trial-download-installer.png) + ![Trials and Downloads page showing trial installer and links to generate license key](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. -## Download the License Version +## Download the licensed version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Licensed products are available from the [License & Downloads](https://www.syncfusion.com/account/downloads) page in the Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. You can download Blazor Mac licensed installer by going to More Downloads Options (element 3 in the screenshot below). +3. Select **More download options** to download the Blazor Mac licensed installer. - ![License Download Installer](images/start-license-download-installer.png) + ![License and Downloads page showing More download options for the Blazor Mac installer](images/start-license-download-installer.png) -4. Unlock key is not required to install the Syncfusion® Blazor Mac trial installer. +4. An unlock key is not required to install the Blazor Mac licensed installer. -5. For Mac OS, DMG formats is available for download. +5. For macOS, the installer is available in DMG format. ![License Download Installer](images/blazor_mac.png) -You can also refer to the [Blazor Mac installation](https://blazor.syncfusion.com/documentation/installation/mac-installer/how-to-install) link for step-by-step installation guidelines. +For step-by-step installation, see [Blazor Mac installation](https://blazor.syncfusion.com/documentation/installation/mac-installer/how-to-install). diff --git a/blazor/installation/mac-installer/how-to-install.md b/blazor/installation/mac-installer/how-to-install.md index 5ab93c587d..bca1381642 100644 --- a/blazor/installation/mac-installer/how-to-install.md +++ b/blazor/installation/mac-installer/how-to-install.md @@ -1,70 +1,71 @@ --- layout: post -title: Installing Syncfusion Blazor Mac installer - Syncfusion -description: Learn here about how to install Syncfusion Blazor mac installer after downloading from our Syncfusion website. +title: Install the Syncfusion Blazor Mac installer - Syncfusion +description: Learn here about how to install the Syncfusion Blazor Mac installer (DMG), handle macOS Gatekeeper prompts, and register license keys in sample projects. platform: Blazor -component: Common +control: Common documentation: ug --- -# Installing Syncfusion® Blazor Mac Installer +# Install the Syncfusion® Blazor Mac installer -The Essential Studio® Blazor Mac installer allows you to create the Blazor application in Visual Studio for Mac with the Syncfusion® Blazor components. +The Essential Studio® Blazor Mac installer installs the Syncfusion Blazor product on macOS (DMG) and integrates with Visual Studio for Mac. The steps below cover Gatekeeper prompts, installation, and license key registration for sample projects. -## Steps to resolve the warning message in Catalina OS or later +## Resolve Gatekeeper warning on macOS Catalina or later - While running Essential Studio® Blazor Mac Installer on Catalina MacOS or later, the below alert will be displayed. + When running the installer on macOS Catalina or later, a Gatekeeper alert may appear. - ![Alert Image](images/Mac_Catalina_MacOS_Alert1.png) + ![macOS Gatekeeper alert for the Syncfusion DMG](images/Mac_Catalina_MacOS_Alert1.png) - If you receive this alert, follow the below steps for the easiest solution. + If this appears, follow these steps: - 1. Right-click the downloaded dmg file. - 2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears. - - ![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png) - - 3. When you click "Open" the installer window will be opened. + 1. Right‑click the downloaded DMG file. + 2. Select Open option and choose **DiskImageMounter (Default)**. The following prompt appears. -## Step-by-Step Installation + ![macOS prompt to open the DMG with DiskImageMounter](images/Mac_Catalina_MacOS_Alert2.png) -The steps below show how to install the Essential Studio® Blazor Mac installer. + 3. Select Open to mount the DMG and continue. -1. Locate the downloaded dmg file and open the file by double click on it. +## Install on macOS - ![Installer Wizard](images/Mac_Installer1.png) +Follow these steps to install the Essential Studio® Blazor Mac installer. -2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar. +1. Locate the downloaded DMG file and double‑click it to open. - ![Software License Agreement Wizard](images/Mac_Installer2.png) + ![Open the downloaded Syncfusion Blazor DMG](images/Mac_Installer1.png) + +2. The disk image mounts and a virtual drive appears on the desktop or in the Finder sidebar. + + ![Mounted DMG drive visible in Finder](images/Mac_Installer2.png) 3. Copy the mounted disk file. - ![License Agreements Confirmation](images/Mac_Installer3.png) + ![Drag the Syncfusion app to Applications](images/Mac_Installer3.png) - N> The Unlock key is not required to install the Essential Studio® Blazor Mac installer. + N> An unlock key is not required to install the Essential Studio® Blazor Mac installer. -4. And paste it in “Applications” folder shortcut. +4. And paste it in “Applications” folder. - ![Destination select wizard](images/Mac_Installer4.png) + ![Copying the app into the Applications folder](images/Mac_Installer4.png) -5. Now you can open the folder to explore the Syncfusion® Essential Studio® Mac installer. +5. Open the Applications folder and launch the Syncfusion installer app. - ![Installation Type wizard](images/Mac_Installer5.png) + ![Launch the Syncfusion Blazor installer app from Applications](images/Mac_Installer5.png) -6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select “Eject.” Also delete the folder from the Applications. +6. To remove the DMG, right‑click the virtual drive (desktop or Finder sidebar) and select Eject. Also delete the folder from the Applications. - ![Authentication window](images/Mac_Installer6.png) + ![Eject the mounted DMG from Finder](images/Mac_Installer6.png) -## License key registration in samples +## Register the license key in sample projects After the installation, the license key is required to register the demo source that is included in the Mac installer. To learn about the steps for license registration for the Blazor Mac installer, please refer to this. -* For server side application register the license key in Configure method of [Startup.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-server-app) -* For client side application register the license key in main method of [Program.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-webassembly-app) +- **Blazor Server App**: Register the license key in [Startup.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-server-app) +- **Blazor WebAssembly App**: Register the license key in [Program.cs](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application#blazor-webassembly-app) +For development on macOS, see: You can also find the steps for getting started with Syncfusion® Blazor components in Mac, -* Getting started with Syncfusion® Blazor Components in [Blazor Server Side App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) using Visual Studio for Mac. -* Getting started with Syncfusion® Blazor Components in [Web Assembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) using Visual Studio for Mac. \ No newline at end of file +- Getting started with Syncfusion Blazor components in a [Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-mac#getting-started-with-syncfusion-blazor-components-in-blazor-server-side-app-using-visual-studio-for-mac) using Visual Studio for Mac. +- Getting started with Syncfusion Blazor components in a [Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio-mac) using Visual Studio for Mac. \ No newline at end of file diff --git a/blazor/installation/offline-installer/how-to-download.md b/blazor/installation/offline-installer/how-to-download.md index f840b7ca2d..69763885cf 100644 --- a/blazor/installation/offline-installer/how-to-download.md +++ b/blazor/installation/offline-installer/how-to-download.md @@ -1,78 +1,78 @@ --- layout: post -title: Downloading Syncfusion Blazor installer - Syncfusion -description: Learn here about the how to download Syncfusion Blazor offline installer from our syncfusion website. +title: Download the Syncfusion Blazor offline installer | Syncfusion +description: Learn here about how to download the Syncfusion Blazor offline installer for trial or licensed use, including Start trials and License & Downloads options. platform: Blazor -component: Common +control: Common documentation: ug --- -# Downloading Syncfusion® Blazor offline installer +# Download the Syncfusion® Blazor offline installer -The Syncfusion® Blazor offline installer can be downloaded from the [Syncfusion](https://www.syncfusion.com/blazor-components) website. You can either download the licensed installer or try our trial installer depending on your license. +Download the offline installer from the Syncfusion® website. Download options depend on the account status: trial or licensed. * Trial Installer * Licensed Installer -## Download the Trial Version +## Download the trial version -Our 30-day trial can be downloaded in two ways. +A 30‑day trial can be downloaded in two ways. * Download Free Trial Setup * Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -### Download Free Trial Setup +### Download the free trial setup -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. +1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. -2. After completing the required form or logging in with your registered Syncfusion® account, you can download the Blazor trial installer from the confirmation page. (as shown in below screenshot.) +2. Complete the form or sign in with a registered Syncfusion® account to download the Blazor trial installer from the confirmation page. - ![Trial Confirmation](images/blazor_windows.PNG) + ![Trial confirmation page showing Blazor offline installer download](images/blazor_windows.PNG) 3. With a trial license, only the latest version’s trial installer can be downloaded. -4. After downloading, the Syncfusion® Blazor trial installer can be unlocked using either the trial unlock key or the Syncfusion® registered login credential. More information on generating an unlock key can be found in [this](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) article. +4. After downloading, unlock the installer by using either the trial unlock key or by signing in with registered Syncfusion credentials. See [How to generate an unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) for more information. -5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) +5. Before the trial expires, download the trial installer at any time from the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. - ![Start Trial download](images/start-trial-download-installer.png) + ![Trials and Downloads page with Download button for the Blazor offline installer](images/start-trial-download-installer.png) -6. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio® Blazor Offline trial installer which is available in EXE and ZIP format. +6. Select **More download options** (element 2 in the above screenshot) to get the Essential Studio® Blazor offline trial installer in EXE or ZIP format. ![Trial Downlaod Offline Installer](images/start-trial-download-offline-installer.PNG) -### Start Trials if using components through NuGet.org +### Start trials if using components through NuGet.org -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +Start an evaluation if components were obtained through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). -1. You can start your 30-day free trial for Blazor from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. +1. Start a 30‑day Blazor trial from the [Start trials](https://www.syncfusion.com/account/manage-trials/start-trials) page. - ![Trial Download](images/start-trial-download.PNG) + ![Start trials page for Blazor](images/start-trial-download.PNG) 2. To access this page, you must sign up/log in with your Syncfusion® account. -3. Begin your trial by selecting the Blazor product. +3. Begin the trial by selecting the Blazor product. - N> If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + N> If an existing Blazor trial is still active, a new trial for the same product cannot be started. -4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot.) +4. After starting the trial, go to [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest trial installer. Generate the installer [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and the project [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) before the trial period expires. - ![Start Trial download](images/start-trial-download-installer.png) + ![Trials and Downloads page showing trial installer and key generation options](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. -## Download the License Version +## Download the licensed version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Licensed products are available from the [License & Downloads](https://www.syncfusion.com/account/downloads) page in the Syncfusion account. 2. You can view all the licenses (both active and expired) associated with your account. -3. You can download Blazor licensed offline installer by going to More Downloads Options (element 3 in the screenshot below). +3. Select **More download options** to download the Blazor licensed offline installer. - ![License Download Installer](images/start-license-download-installer.png) + ![License and Downloads page showing More download options for the Blazor offline installer](images/start-license-download-installer.png) -4. For Windows OS, EXE and Zip formats are available for download. They are both Offline Installers. +4. For Windows, EXE and ZIP formats are available for download. Both are offline installers. ![License Download Installer](images/start-trial-download-offline-installer.png) -You can also refer to the [Offline installer](https://blazor.syncfusion.com/documentation/installation/offline-installer/how-to-install) link for step-by-step installation guidelines. +For step-by-step installation, see [Offline installer](https://blazor.syncfusion.com/documentation/installation/offline-installer/how-to-install). diff --git a/blazor/installation/offline-installer/how-to-install.md b/blazor/installation/offline-installer/how-to-install.md index a601c8983d..cc275f52fa 100644 --- a/blazor/installation/offline-installer/how-to-install.md +++ b/blazor/installation/offline-installer/how-to-install.md @@ -1,92 +1,92 @@ --- layout: post -title: Installing Syncfusion Blazor installer - Syncfusion -description: Learn here about the how to install Syncfusion Blazor offline installer after downloading from our syncfusion website. +title: Install the Syncfusion Blazor offline installer | Syncfusion +description: Learn how to install the Syncfusion Blazor offline installer (EXE or ZIP), unlock with a key or account login, and perform silent installs and uninstalls. platform: Blazor -component: Common +control: Common documentation: ug --- -# Installing Syncfusion® Blazor offline installer +# Install the Syncfusion® Blazor offline installer -## Installing with UI +## Install with the user interface -The steps below show how to install the Essential Studio® Blazor installer. +The steps below show how to install the Essential Studio® Blazor offline installer. -1. Open the Syncfusion® Blazor offline installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package +1. Open the Syncfusion® Blazor offline installer file(.exe) from the download location by double‑clicking it. The installer wizard opens and extracts the package. - ![Web Offline Installer Setup wizard](images/webofflineinstaller-1.png) + ![Offline installer setup extracting package](images/webofflineinstaller-1.png) - N> The Installer wizard extracts the syncfusionessentialblazor_(version).exe dialog, which displays the package’s unzip operation. + N> The installer extracts syncfusionessentialblazor_(version).exe and displays the extraction progress(unzip operation). -2. To unlock the Syncfusion® offline installer, you have two options: +2. To unlock the offline installer, choose one of the following options: * *Login To Install* * *Use Unlock Key* - **Login To Install:** + **Login to install:** - You must enter your Syncfusion® email address and password. If you don’t already have a Syncfusion® account, you can sign up for one by clicking "**Create an account**". If you have forgotten your password, click on "**Forgot Password**" to create a new one. Once you’ve entered your Syncfusion® email and password, click Next. + Enter the Syncfusion® account email address and password. If you don’t already have a Syncfusion® account, you can sign up for one by clicking "**Create an account**". If you have forgotten your password, click on "**Forgot Password**" to create a new one. Once you’ve entered your Syncfusion® email and password, click Next. - ![Web Offline Installer LoginToInstall Wizard](images/webofflineinstaller-2.png) + ![Offline installer Login to install wizard](images/webofflineinstaller-2.png) - **Use Unlock Key:** + **Use unlock key:** - Unlock keys are used to unlock the Syncfusion® offline installer, and they are platform and version specific. You should use either Syncfusion® licensed or trial Unlock key to unlock Syncfusion® Blazor installer. + Unlock keys unlock the Syncfusion® offline installer, and they are platform and version specific. You should use either Syncfusion® licensed or trial Unlock key to unlock Syncfusion® Blazor installer. - The trial unlock key is only valid for 30 days, and the installer will not accept an expired trial key. + The trial unlock key is valid for 30 days; expired keys are not accepted. To learn how to generate an unlock key for both trial and licensed products, see [this](https://www.syncfusion.com/kb/2326) Knowledge Base article. - ![Web Offline Installer UseUnlockKey Wizard](images/webofflineinstaller-3.png) + ![Offline installer Use unlock key wizard](images/webofflineinstaller-3.png) -3. After reading the License Terms and Privacy Policy, check the "**I agree to the License Terms and Privacy Policy**" check box. Click the Next button. +3. Read the License Terms and Privacy Policy, then select **I agree to the License Terms and Privacy Policy**. Select **Next**. -4. Change the install and sample locations here. You can also change the Additional settings. Click Next/Install to install with the default settings. +4. Change the install and sample locations as needed. Adjust additional settings if required. Select **Next** or **Install** to continue with defaults. - ![Web Offline Installer Settings Wizard](images/webofflineinstaller-4.png) + ![Offline installer Settings wizard with install locations and options](images/webofflineinstaller-4.png) - ***Additional Settings*** + ***Additional settings*** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples. + * Select **Install demos** to install Syncfusion® samples, or clear it to skip sample installation. - * Select the **Configure Syncfusion® Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. + * Select **Configure Syncfusion Extensions controls in Visual Studio** to configure extensions, or clear it to skip configuration. - * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel. + * Select **Create Desktop Shortcut** to add a shortcut for Syncfusion® Control Panel. - * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel. + * Select **Create Start menu shortcut** to add a shortcut to the Start menu entry for Syncfusion® Control Panel. -5. If any previous versions of the current product is installed, the Uninstall Previous Version(s) wizard will be opened. Select **Uninstall** checkbox to uninstall the previous versions and then click the Proceed button. +5. If previous versions of the current product is installed, the Uninstall previous versions wizard opens. Select **Uninstall** to remove the previous versions, then select **Proceed**. - ![Web Offline Installer Uninstall Previous Wizard](images/webofflineinstaller-5.png) + ![Offline installer Uninstall previous versions wizard](images/webofflineinstaller-5.png) N> From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 while installing the new version.

If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. - **Confirmation Alert:** + **Confirmation alert:** ![Web Offline Installer Confirmation Alert](images/webofflineinstaller-6.png) - **Uninstall Progress:** + **Uninstall progress:** ![Web Offline Installer Uninstall Progress Wizard](images/webofflineinstaller-7.png) - ***Install Progress*** + ***Install progress*** ![Web Offline Installer Progress Wizard](images/webofflineinstaller-8.png) - N> The Completed screen is displayed once the Blazor product is installed. If any version is selected to uninstall, The completed screen will display both install and uninstall status. + N> The Completed screen appears after installation. If versions were uninstalled, it shows both uninstall and install status. ![Web Offline Installer Summary Wizard](images/webofflineinstaller-9.png) -6. After installing, click the **Launch Control Panel** link to open the Syncfusion® Control Panel. +6. After installation, select **Launch Control Panel** to open the Syncfusion® Control Panel. -7. Click the Finish button. Your system has been installed with the Syncfusion® Essential Studio® Blazor product. +7. Select **Finish**. The Syncfusion® Essential Studio® Blazor product is installed. -## Installing in Silent Mode +## Install in silent mode -The Syncfusion® Essential Studio® Blazor Installer supports installation and uninstallation via the command line. +The Syncfusion® Essential Studio® Blazor installer supports installation and uninstallation via the command line. -***Command Line Installation*** +***Command-line installation*** To install through the Command Line in Silent mode, follow the steps below. @@ -100,7 +100,7 @@ To install through the Command Line in Silent mode, follow the steps below. 5. Exit the Wizard. -6. Run Command Prompt in administrator mode and enter the following arguments. +6. Open Command Prompt as administrator and run the installer with arguments: **Arguments:** "installer file path\SyncfusionEssentialStudio(product)_(version).exe" /Install silent /UNLOCKKEY:"(product unlock key)" [/ log "{Log file path}"] [/InstallPath:{Location to install}] [/InstallSamples:{true/false}] [/CreateShortcut:{true/false}] [/ CreateStartMenuShortcut:{true/false}] @@ -112,7 +112,7 @@ To install through the Command Line in Silent mode, follow the steps below. N> x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. -## Command Line Uninstallation +## Command-line uninstallation Syncfusion® Essential® Blazor can be uninstalled silently using the Command Line. diff --git a/blazor/installation/web-installer/how-to-download.md b/blazor/installation/web-installer/how-to-download.md index 08242ceb04..5141e8f2a1 100644 --- a/blazor/installation/web-installer/how-to-download.md +++ b/blazor/installation/web-installer/how-to-download.md @@ -1,78 +1,78 @@ --- layout: post -title: Downloading Syncfusion Blazor web installer - Syncfusion -description: Learn here about the how to download Syncfusion Blazor web installer from our syncfusion website with license. +title: Download the Syncfusion Blazor web installer - Syncfusion +description: Learn how to download the Blazor web installer for trial or licensed use from your Syncfusion account, including links to Start trials and License & Downloads. platform: Blazor -component: Common +control: Common documentation: ug --- -# Downloading Syncfusion® Blazor web installer +# Download the Syncfusion® Blazor web installer -Syncfusion® Blazor web installer can be downloaded from our [Syncfusion](https://www.syncfusion.com/blazor-components) website. You can either download the licensed installer or try our trial installer depending on your license. +Download the Syncfusion® Blazor web installer from the [Syncfusion® website](https://www.syncfusion.com/blazor-components). Download options depend on the account status: trial or licensed. * Trial Installer * Licensed Installer -## Download Free Trial Version +## Download the free trial version -Our 30-day trial can be downloaded in two ways. +A 30‑day trial can be downloaded in two ways. * Download Free Trial Setup * Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -### Download Free Trial Setup +### Download the free trial setup -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. +1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the Blazor platform. 2. After completing the required form or logging in with your registered Syncfusion® account, you can download the Blazor trial installer from the confirmation page. (as shown in below screenshot.) - ![Trial Confirmation](images/blazor-web-trial.png) + ![Trial confirmation page showing the Blazor trial installer download](images/blazor-web-trial.png) -3. After downloading, the Syncfusion® Blazor web installer can be unlocked using Syncfusion® registered login credential. +3. After downloading, unlock the Blazor web installer by signing in with the registered Syncfusion credentials. 4. Before the trial license expires, you can download the blazor installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) -5. Click the Download (element 1 in the screenshot below) button to download the blazor web installer. +5. Click Download to get the Blazor web installer. - ![Trial Downlaod Online Installer](images/start-trial-download-installer-1.png) + ![Trials and Downloads page with Download button for the Blazor web installer](images/start-trial-download-installer-1.png) -### Start Trials if using components through NuGet.org +### Start trials if using components through NuGet.org -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +Start an evaluation if components were obtained through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). -1. You can start your 30-day free trial for Blazor from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. +1. Start a 30‑day Blazor trial from the [Start trials](https://www.syncfusion.com/account/manage-trials/start-trials) page. - ![Trial Download](images/start-trial-download.png) + ![Start trials page for Blazor](images/start-trial-download.png) 2. To access this page, you must sign up/log in with your Syncfusion® account. -3. Begin your trial by selecting the Blazor product. +3. Begin the trial by selecting the Blazor product. - N> If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + N> If an existing Blazor trial is still active, a new trial for the same product cannot be started. -4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://support.syncfusion.com/kb/article/7053/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) here at any time before the trial period expires. (as shown in below screenshot.) +4. After starting the trial, go to [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) to get the latest trial installer. Generate the installer [unlock key](https://support.syncfusion.com/kb/article/7053/how-to-generate-unlock-key-for-essentials-studio-products) and the project [license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-generate) before the trial period expires. - ![Start Trial download](images/start-trial-download-installer.png) + ![Trials and Downloads page showing trial installer and key generation options](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. -## Download the Licensed Version +## Download the licensed version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Licensed products are available from the [License & Downloads](https://www.syncfusion.com/account/downloads) page in the registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. Click the Download (element 1 in the screenshot below) button to download the blazor web installer. +3. Click Download to get the Blazor web installer. - ![License Download Installer](images/blazor-license-download-installer.png) + ![License and Downloads page with Download button for the Blazor web installer](images/blazor-license-download-installer.png) 4. Before the license expires, you can download the installer at any time from your registered account’s [License & Downloads](https://www.syncfusion.com/account/downloads) page (See the screenshot below.) - ![License Download Installer](images/blazor-web-installer-license.png) + ![License and Downloads page listing available Blazor installer versions](images/blazor-web-installer-license.png) -5. After downloading, the Syncfusion® Blazor web installer can be unlocked using Syncfusion® registered login credential. +5. After downloading, unlock the web installer by signing in with registered Syncfusion® credentials. N> For Syncfusion® trial and licensed products, there is no separate web installer. Based on your account license, Syncfusion® trial or licensed products will be installed via web installer. -You can also refer to the [web installer](https://blazor.syncfusion.com/documentation/installation/web-installer/how-to-install) links for step-by-step installation guidelines. +For step-by-step installation, see Web installer: https://blazor.syncfusion.com/documentation/installation/web-installer/how-to-install diff --git a/blazor/installation/web-installer/how-to-install.md b/blazor/installation/web-installer/how-to-install.md index b243e85ede..cc76283dcc 100644 --- a/blazor/installation/web-installer/how-to-install.md +++ b/blazor/installation/web-installer/how-to-install.md @@ -1,89 +1,89 @@ --- layout: post -title: Installing Syncfusion Blazor web installer - Syncfusion -description: Learn here about how to install Syncfusion Blazor web installer after downloading from our Syncfusion website. +title: Install the Syncfusion Blazor web installer | Syncfusion +description: Learn here about how to install the Syncfusion Blazor web installer, configure products, and manage the uninstall options. Explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Installing Syncfusion® Blazor web installer +# Install the Syncfusion® Blazor web installer ## Installation -The steps below show how to install Essential Studio® Blazor Web Installer. +The steps below show how to install the Essential Studio® Blazor web installer. -1. Open the Syncfusion® Essential Studio® Blazor Web Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. +1. Open the Syncfusion® Essential Studio® Blazor web installer (.exe) from the download location by double‑clicking it. The installer wizard opens and extracts the package. - ![Web Installer Setup](images/webinstaller-1.png) + ![Web installer setup extracting package](images/webinstaller-1.png) - N> The installer wizard extracts the syncfusionessentialblazorwebinstaller_{version}.exe dialog, which displays the package’s unzip operation. + N> The installer extracts syncfusionessentialblazorwebinstaller_{version}.exe and displays the extraction progress. -2. The Syncfusion® Blazor Web Installer’s ***welcome wizard*** will be displayed. Click the Next button. +2. The Syncfusion® Blazor Web Installer’s ***welcome wizard*** will be displayed. Click **Next** button. ![Web Installer welcome wizard](images/webinstaller-2.png) -3. The ***Platform Selection Wizard*** will appear. From the **Available** tab, select the products to be installed. Select the **Install All** checkbox to install all products. +3. The ***Platform selection wizard*** appears. On the **Available** tab, select the products to install. To install all products, click **Install All**. ***Available*** - ![Web Installer Available Tab](images/webinstaller-3.png) + ![Platform selection wizard Available tab](images/webinstaller-3.png) - If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the Next button. + If multiple products are already installed for the same version, they are listed under the **Installed** tab. You can also select products to uninstall from that version. Click **Next**. ***Installed*** - ![Web Installer Installed Tab](images/webinstaller-4.png) + ![Platform selection wizard Installed tab](images/webinstaller-4.png) - I> If the required software for the selected product isn’t already installed, the **Additional Software Required** alert will appear. You can, however, continue the installation and install the necessary software later. + I> If required software for a selected product is missing, an **Additional Software Required** alert appears. You can, however, continue the installation and install the necessary software later. ***Required Software*** ![Web Installer Required Software Alert](images/webinstaller-5.png) -4. If previous version(s) for the selected products are installed, the ***Uninstall previous version wizard*** will be displayed. You can see the list of previously installed versions for the products you’ve chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the Next button. +4. If previous versions of selected products are detected, the Uninstall previous versions wizard is displayed. Review the list and select **Uninstall All** to remove all prior versions. Click **Next**. ![Web Installer Uninstall Previous Wizard](images/webinstaller-6.png) N> From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. -5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. +5. A confirmation dialog is shown to uninstall the selected previous versions. ![Web Installer Uninstall Previous confirmation](images/webinstaller-7.png) -6. The ***Confirmation Wizard*** will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page. +6. The ***Confirmation wizard*** lists products to be installed or uninstalled. Review and modify the list as needed. ![Web Installer Product install/uninstall list](images/webinstaller-8.png) - N> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + N> Click the **Download size** and **Installation size** links to view approximate sizes. -7. The ***Configuration Wizard*** will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. +7. The ***Configuration Wizard*** will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click **Next** to install with the default settings. ![Web Installer Configuration Wizard](images/webinstaller-9.png) ***Additional settings*** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples. + * Select **Install demos** to install Syncfusion samples, or clear it to skip sample installation. - * Select the **Configure Syncfusion® Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. + * Select **Configure Syncfusion extensions in Visual Studio** to configure extensions, or clear it to skip configuration. - * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel. + * Select **Create Desktop Shortcut** to add a shortcut for Syncfusion® Control Panel. - * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel. + * Select **Create Start Menu Shortcut** to add a shortcut to the Start menu entry for Syncfusion® Control Panel. -8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. +8. Read the License Terms and Privacy Policy, then select **I agree to the License Terms and Privacy Policy**. Click **Next**. -9. The login wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. +9. The Login wizard appears. Enter the Syncfusion account email and password. To create an account, select **Create an account**. To reset a password, select **Forgot password**. Click **Install**. ![Web Installer Login Wizard](images/webinstaller-10.png) - I> The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). + I> Products are installed based on your syncfusion® license (trial or licensed). -10. The download and installation/uninstallation progress will be displayed as shown below. - ![Web Installer Installation Wizard](images/webinstaller-11.png) +10. The download, installation, and uninstallation progress is displayed. + ![Installation progress showing download and install status](images/webinstaller-11.png) To open the Syncfusion® Control Panel, click **Launch Control Panel**. -11. When the installation is finished, the ***Summary wizard*** will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click Finish. +11. When the installation is finished, the ***Summary wizard*** will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click **Finish**. ![Web Installer Installation Summary](images/webinstaller-12.png) @@ -93,21 +93,21 @@ The steps below show how to install Essential Studio& ## Uninstallation -Syncfusion® Blazor installer can be uninstalled in two ways. +Syncfusion® Blazor can be uninstalled in two ways. -* Uninstall the Blazor using the Syncfusion® Blazor web installer +* Uninstall using the Syncfusion® Blazor web installer -* Uninstall the Blazor from Windows Control Panel +* Uninstall from Windows Control Panel -Follow either one of the option below to uninstall Syncfusion® Essential Studio® Blazor installer, +Follow one of the options below to uninstall the Syncfusion® Essential Studio® Blazor installer. -**Option 1:** ***Uninstall the Blazor using the Syncfusion® Blazor web installer*** +**Option 1:** Uninstall using the Syncfusion® Blazor web installer Syncfusion® provides the option to uninstall products of the same version directly from the Web Installer application. Open the Syncfusion® Essential Studio® Blazor Online Installer file from downloaded location by double-clicking it. Select the products to be uninstalled from the list, and Web Installer will uninstall them one by one. ![Web Installer Installed Products Uninstall](images/webinstaller-uninstall-2.png) -**Option 2:** ***Uninstall the Blazor from Windows Control Panel*** +**Option 2:** Uninstall from Windows Control Panel You can uninstall all the installed products by selecting the **Syncfusion® Essential Studio® {version}** entry (element 1 in the below screenshot) from the Windows control panel, or you can uninstall Blazor alone by selecting the **Syncfusion® Essential Studio® for Blazor {version}** entry (element 2 in the below screenshot) from the Windows control panel. @@ -115,54 +115,54 @@ You can uninstall all the installed products by selecting the **Syncfusion If the **Syncfusion® Essential Studio® for Blazor {version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® Blazor alone will be removed and the below default MSI uninstallation window will be displayed. -1. The Syncfusion® Blazor Web Installer’s ***welcome wizard*** will be displayed. Click the Next button +1. The Blazor web installer **Welcome wizard** is displayed. Click **Next**. ![Web Installer welcome wizard](images/webinstaller-2.png) -2. The ***Platform Selection Wizard*** will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button. +2. The **Platform selection wizard** appears. On the **Installed** tab, select products to uninstall. To uninstall all, select **Uninstall All**. Click **Next**. ***Installed*** ![Web Installer Installed Products Uninstall](images/webinstaller-uninstall-2.png) - You can also select the products to be installed from the **Available** tab. Click the Next button. + You can also select products to install from the **Available** tab. Click **Next**. ***Available*** ![Web Installer Uninstall Available Tab](images/webinstaller-uninstall-3.png) -3. If any other products are selected for installation, ***Uninstall previous version wizard*** will be displayed with previous version(s) installed for the selected products. Here you can view the list of installed previous versions for the selected products. Select **Uninstall All** checkbox to select all the versions. Click Next. +3. If other products are selected for installation, the ***Uninstall previous versions wizard*** shows any installed previous versions for those products. Select **Uninstall All** to remove all versions. Click **Next**. ![Web Installer Uninstall Previous version Wizard](images/webinstaller-uninstall-4.png) -4. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. +4. A confirmation dialog is shown to uninstall the selected previous versions. ![Web Installer Uninstall Previous confirmation](images/webinstaller-7.png) -5. The ***Confirmation Wizard*** will appear with the list of products to be installed/uninstalled. Here you can view and modify the list of products that will be installed/uninstalled. +5. The **Confirmation Wizard** lists products to be installed or uninstalled. Review and modify as needed. ![Web Installer Product Install/Uninstall Wizard](images/webinstaller-uninstall-5.png) N> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation. -6. The ***Configuration Wizard*** will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. +6. The ***Configuration Wizard*** will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click **Next** to install with the default settings. ![Web Installer Uninstall Configuration Wizard](images/webinstaller-uninstall-6.png) -7. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. +7. Read the License Terms and Privacy Policy, then select **I agree to the License Terms and Privacy Policy**. Select **Next**. -8. The ***login wizard*** will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. +8. The **Login Wizard** appears. Enter the Syncfusion® account email and password, or select **Create an account** or **Forgot password**. Click **Install**. ![Web Installer Login Wizard](images/webinstaller-10.png) I> The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). -9. The download, installation, and uninstallation progresses will be shown. +9. The download, installation, and uninstallation progress is shown. ![Web Installer Uninstallation Wizard](images/webinstaller-uninstall-7.png) -10. When the installation is finished, the ***Summary wizard*** will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click Finish. +10. When the installation is finished, the ***Summary wizard*** will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click **Finish**. ![Web Installer Uninstallation Summary](images/webinstaller-uninstall-8.png) -* To open the Syncfusion® Control Panel, click **Launch Control Panel**. \ No newline at end of file +* To open the Syncfusion® Control Panel, click **Launch Control Panel**. diff --git a/blazor/tutorials/build-a-blazor-stay-reservation-app.md b/blazor/tutorials/build-a-blazor-stay-reservation-app.md index 35af0a6759..6b48fb8645 100644 --- a/blazor/tutorials/build-a-blazor-stay-reservation-app.md +++ b/blazor/tutorials/build-a-blazor-stay-reservation-app.md @@ -1,24 +1,24 @@ --- layout: post -title: Build a Blazor Stay Reservation App - Syncfusion -description: Step by step tutorial to build a Blazor Stay Reservation Application using Syncfusion Blazor components. +title: Build a Blazor stay reservation app - Syncfusion +description: Learn here about step-by-step tutorial to build a Blazor stay reservation application using Syncfusion Blazor components like Scheduler, Sidebar, and Toast. platform: Blazor -component: Tutorials +control: Tutorials documentation: ug --- -# Build a Blazor Stay Reservation App with Syncfusion® Blazor Components +# Build a Blazor stay reservation app with Syncfusion® Blazor components -In this tutorial, we'll walk through the process of building a "Stay Reservation" application. This demonstrates how to use the **Syncfusion® Blazor Scheduler** component as the centerpiece of a booking system, complete with filtering, booking form and a responsive layout. +This tutorial explains how to build a stay reservation application. It demonstrates how to use the **Syncfusion® Blazor Scheduler** component as the centerpiece of a booking system, with filtering, a booking form, and a responsive layout. + +By the end of this tutorial, the reader will be able to: +* Set up a Blazor project with Syncfusion® components. +* Configure the Blazor Scheduler for a reservation system. +* Manage application state using a dependency-injected service. +* Build a filterable sidebar with checkboxes and accordions. +* Combine multiple components to create a polished application. -By the end of this tutorial, you will have learned how to: -* Set up a Blazor project with Syncfusion® components. -* Configure the Blazor Scheduler for a reservation system. -* Manage application state using a dependency-injected service. -* Build a filterable sidebar with Checkboxes and Accordions. -* Combine multiple components to create a polished, final application. -Let's get started! ## Prerequisites @@ -26,18 +26,18 @@ Let's get started! ## Create the Blazor Web App -First, let's create a new Blazor Web App. +Create a new Blazor Web App. ```bash dotnet new blazor -o StayReservation cd StayReservation ``` -Choose the "Blazor Web App" template. For this project, we'll use the **Interactive Server** render mode for simplicity. +Choose the "Blazor Web App" template. For this project, use the **Interactive Server** render mode for simplicity. -## Add and Configure Syncfusion® Blazor Components +## Add and configure Syncfusion® Blazor components -Next, we need to add the Syncfusion® Blazor libraries to our project. We'll need packages for the Scheduler, navigation elements (like the Sidebar and Accordion), and various input components. +Next, add the Syncfusion® Blazor libraries to the project. Packages are required for the Scheduler, navigation elements (such as Sidebar and Accordion), and input components. Install the essential Syncfusion® Blazor NuGet packages: @@ -47,20 +47,20 @@ dotnet add package Syncfusion.Blazor.Notifications dotnet add package Syncfusion.Blazor.Themes ``` -Now, let's configure the app to recognize and style the Syncfusion® components. +Configure the app to recognize and style the Syncfusion® components. -1. **Register Syncfusion® Services** +1. **Register Syncfusion® services** - In your `Program.cs` file, register the Syncfusion® Blazor service. + In `Program.cs`, register the Syncfusion® Blazor service. ```csharp // Add the following line before builder.Build() builder.Services.AddSyncfusionBlazor(); ``` -2. **Add Theme and Script References** +2. **Add theme and script references** - Open `Components/App.razor`. We need to add the Syncfusion® theme stylesheet and the necessary script reference for component interactivity. We'll use the modern `tailwind.css` theme. + Open `Components/App.razor`. Add the Syncfusion® theme stylesheet and the script reference for component interactivity. The example uses the `tailwind.css` theme. ```html @@ -86,9 +86,9 @@ Now, let's configure the app to recognize and style the Syncfusion® namespaces to your `_Imports.razor` file. + To avoid adding `@using` directives in each component, add the commonly used Syncfusion® namespaces to the `_Imports.razor` file. ```csharp @using StayReservation @@ -101,7 +101,9 @@ Now, let's configure the app to recognize and style the Syncfusion`: We define our "Floors" resource. This maps the `FloorId` field in our `AppointmentData` to the `FloorId` in our `floorData` list, automatically assigning colors and text to the resource groups headers. -* ``: We use templates to customize the date header, cell, and resource header. +* ``: Binds the scheduler's events to the list in `AppointmentService`. +* ``: Groups by the resource named "Floors". +* ``: Defines the "Floors" resource. This maps the `FloorId` field in `AppointmentData` to the `FloorId` in the `floorData` list, assigning colors and text to resource group headers. +* ``: Uses templates to customize the date header, cell, and resource header. ## Assemble the Main Page -Now, let's bring it all together in the main `Index.razor` page. This component will host the sidebar and the schedule, along with a header to control the UI. +Bring it together in the main `Index.razor` page. This component hosts the sidebar and the schedule, along with a header to control the UI. Update `Components/Pages/Index.razor` with the following code: @@ -346,11 +347,11 @@ Update `Components/Pages/Index.razor` with the following code: ``` -## Implement the Filtering Logic +## Implement the filtering logic -We need to connect the checkboxes in the sidebar to the data displayed in the scheduler. Since we're using our `AppointmentService` to hold the state, we can detect changes to the checkbox values and re-filter the scheduler's resource data. Can bind the change event to checkbox and sliders to form the filter query and update the resource data. +Connect the checkboxes in the sidebar to the data displayed in the scheduler. Since `AppointmentService` holds the state, detect changes to the checkbox and slider values, form the filter query, and update the resource data. -Refer the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`: +Use the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`: The complete code for `Sidebar.razor` is available in the GitHub repository at the following link: [`Sidebar.razor`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Components/Pages/Sidebar.razor). You may reuse the full code as needed. @@ -425,16 +426,16 @@ The complete code for `Sidebar.razor` is available in the GitHub repository at t } ``` -Now, whenever a user clicks a checkbox, it triggers the `OnChange` event, which calls the `FloorHandler` method. This method updates the `ResourceQuery` property on the `Service` object, which is used to filter the resources in the scheduler. The `StateChanged` method is called to refresh the scheduler with the new resource data. +When a user clicks a checkbox, it triggers the `OnChange` event, which calls the `FloorHandler` method. This method updates the `ResourceQuery` property on the `Service` object to filter resources in the scheduler. The `StateChanged` method refreshes the scheduler with the new resource data. -Build and run the app by executing the `dotnet watch run`command in the command shell from the `StayReservation` folder. +Build and run the app by executing the `dotnet watch run` command in the command shell from the `StayReservation` folder. -## Implement the Appointment Booking form -Bind the Scheduler's Editor Template to a custom form for creating and editing appointments. This form will include fields for the appointment's subject, start and end times, and a dropdown list for selecting the room. The form will be displayed when a user double clicks on an empty cell in the scheduler or on an existing appointment. The form will be displayed in a popup window. +## Implement the appointment booking form +Bind the Scheduler's Editor Template to a custom form for creating and editing appointments. This form includes fields for the appointment subject, start and end times, and a drop-down list for selecting the room. The form is displayed when a user double-clicks an empty cell in the scheduler or an existing appointment, in a popup window. -We can validate the form fields using the `ValidationMessage` component. The `ValidationMessage` component displays an error message when the validation fails. The `ValidationMessage` component is bound to the `Subject` property of the `AppointmentData` object. The `Subject` property is required, so the `ValidationMessage` component displays an error message when the `Subject` property is empty. +Validate the form fields using the `ValidationMessage` component. The `ValidationMessage` component displays an error message when validation fails. It is bound to the `Subject` property of the `AppointmentData` object, which is required, so an error message appears when the `Subject` property is empty. -We can apply the following code to the `Schedule.razor` file to create the custom form. +Apply the following code to the `Schedule.razor` file to create the custom form. ```html @@ -555,11 +556,11 @@ We can apply the following code to the `Schedule.razor` file to create the custo ``` -More details about editor template can be found in the [Editor Template](https://blazor.syncfusion.com/documentation/scheduler/editor-template#customizing-event-editor-using-template) documentation. +More details about the editor template are available in the [Editor Template](https://blazor.syncfusion.com/documentation/scheduler/editor-template#customizing-event-editor-using-template) documentation. -## Adding Toast Notifications +## Add toast notifications -Integrate `SfToast` for user notifications throughout the application. When a user creates or deletes a reservation, a toast notification will appear. +Integrate `SfToast` for user notifications throughout the application. When a user creates or deletes a reservation, a toast notification appears. ```csharp @@ -567,7 +568,7 @@ Integrate `SfToast` for user notifications throughout the application. When a us ``` -The `OnActionBegin` event of the `SfSchedule` component can be bound to a method that will handle the toast notifications. +Bind the `OnActionBegin` event of the `SfSchedule` component to a method that handles toast notifications. ```csharp public async Task OnActionBegin(ActionEventArgs args) @@ -620,12 +621,12 @@ The `OnActionBegin` event of the `SfSchedule` component can be bound to a method ## GitHub and demo references -The complete code for this example is available in the [GitHub repository](https://github.com/syncfusion/blazor-showcase-stay-reservation). +The complete code for this example is available in the GitHub repository: https://github.com/syncfusion/blazor-showcase-stay-reservation -A demo of this example can be tried in [this link](https://blazor.syncfusion.com/showcase/stay-reservation). +Try the live demo: https://blazor.syncfusion.com/showcase/stay-reservation ## Summary -This guide has demonstrated how to build a functional and interactive stay reservation application. It has shown how to compose a complex UI by combining multiple Syncfusion® Blazor components like the **Scheduler**, **Sidebar**, **AppBar**, **Accordion**, **Inputs**, and **Dropdowns**. +This guide demonstrates how to build a functional and interactive stay reservation application. It shows how to compose a complex UI by combining Syncfusion® Blazor components such as **Scheduler**, **Sidebar**, **AppBar**, **Accordion**, **Inputs**, and **DropDowns**. -Most importantly, a clean state management pattern has been implemented using a singleton service, allowing the components to communicate and share data seamlessly. This architecture is scalable and makes the application easy to maintain and extend with new features. +A clean state management pattern is implemented using a singleton service, allowing the components to communicate and share data seamlessly. This architecture is scalable and makes the application easier to maintain and extend with new features. diff --git a/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md b/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md index c61700fc9f..9b4f11e247 100644 --- a/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md +++ b/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md @@ -1,30 +1,30 @@ --- layout: post -title: Build your first Blazor app with our blocks | Syncfusion -description: Learn all about building your first Blazor app using our blocks from the Essential Blazor UI Kit in Syncfusion Essential Studio and more. +title: Build your first Blazor app with UI Kit blocks | Syncfusion +description: Build a Blazor Web App using blocks from the Essential UI Kit. Configure Tailwind or Bootstrap themes and add a Sign in block. Explore to more details. platform: Blazor control: UI Kit documentation: ug --- -# Build your first Blazor App with our blocks +# Build your first Blazor App with UI Kit blocks -This tutorial guides you through building a Blazor Web App using Syncfusion's UI Kit blocks. It demonstrates how to set up a new Blazor Server project, choose between Tailwind CSS or Bootstrap 5.3 themes, and add a sign-in block in your application. The goal is to help developers quickly build responsive, modern web apps using a variety of prebuilt blocks with minimal effort. +This tutorial guides you through building a Blazor Web App using blocks from the Syncfusion Essential UI Kit for Blazor. It demonstrates how to create a new project, choose Tailwind CSS or Bootstrap 5.3 themes, and add a Sign in block. The goal is to help developers quickly build responsive, modern web apps using pre-built blocks with minimal effort. ## Create a new Blazor App -A Blazor Web App is used for this example. To create a new app, follow the official setup guide [here](https://learn.microsoft.com/en-us/training/modules/build-your-first-blazor-web-app/3-exercise-configure-environment?pivots=vscode). This tutorial then walks through the step-by-step process of adding a simple sign-in block to the newly created app, named **MyBlazorApp**. +A Blazor Web App is used for this example. To create a new app, follow the Microsoft setup guide [here](https://learn.microsoft.com/en-us/training/modules/build-your-first-blazor-web-app/3-exercise-configure-environment?pivots=vscode). This tutorial then walks through adding a simple Sign in block to the newly created app named **MyBlazorApp**. > This tutorial focuses on using Blazor Server rendering mode rather than Blazor WebAssembly. ![New Blazor App](images/new-blazor-app.png) -## Setting up Tailwind CSS or Bootstrap 5.3 theme in the app +## Set up Tailwind CSS or Bootstrap 5.3 theme After creating the new Blazor app named **MyBlazorApp**, open it in Visual Studio Code (which will be used throughout this walkthrough). The next step is to choose a theme, either Tailwind CSS or Bootstrap 5.3, in either light or dark mode, and configure the app accordingly. ### Tailwind CSS configuration -If you choose **Tailwind CSS** theme, follow these steps to configure it. +If the **Tailwind CSS** theme is selected, follow these steps to configure it. 1. In **Components -> App.razor** file, add the following code for light mode (`class="light"`) and dark mode (`class="dark"`) in the `` tag. @@ -40,7 +40,7 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it. ``` -2. In **Components -> App.razor** file, add the following scripts in the `` tag. The main purpose of these scripts is to dynamically generate the appropriate Tailwind CSS classes at runtime based on the styles used in the application, and to replace the primary (highlight) color in the CSS with a custom indigo color palette. +2. In the **Components -> App.razor** file, add the following scripts in the `` tag. These scripts generate Tailwind CSS classes at runtime based on the styles used in the application and replace the primary color with a custom indigo palette. This CDN approach is suitable for demos; for production builds, integrate Tailwind via a build pipeline. ```html @@ -70,9 +70,9 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it. } ``` - > The Syncfusion® Blazor components uses **Indigo** for light mode and **Cyan** for dark mode. To maintain a uniform appearance, change the primary color accordingly. + > Syncfusion® Blazor components use **Indigo** for light mode and **Cyan** for dark mode. To maintain a uniform appearance, adjust the primary color accordingly. -3. In **Components -> App.razor** file, add the style oriented CDN link for Syncfusion® Blazor components in the `` tag. +3. In the **Components -> App.razor** file, add the theme stylesheet CDN link for Syncfusion® Blazor components in the `` tag. - For **light mode**: @@ -86,7 +86,7 @@ If you choose **Tailwind CSS** theme, follow these steps to configure it. ``` -4. **OPTIONAL**: If you wish to use our font icons prepared for **Tailwind CSS**, you can include the following CDN link: +4. **Optional**: To use the font icons prepared for **Tailwind CSS**, include the following CDN link: ```html @@ -100,7 +100,7 @@ Now that the **Tailwind CSS** theme is configured for either light or dark mode ### Bootstrap 5.3 configuration -If you choose **Bootstrap 5.3** theme, follow these steps to configure it. +If the **Bootstrap 5.3** theme is selected, follow these steps to configure it. 1. In **Components -> App.razor** file, add the following code for light mode (`data-bs-theme="light"`) and dark mode (`data-bs-theme="dark"`) in the `` tag. @@ -116,13 +116,13 @@ If you choose **Bootstrap 5.3** theme, follow these steps to configure it. ``` -2. In **Components -> App.razor** file, add the style oriented CDN link for **Bootstrap 5.3** theme in the `` tag. +2. In the **Components -> App.razor** file, add the CDN link for the **Bootstrap 5.3** theme stylesheet in the `` tag. ```html ``` -3. In **Components -> App.razor** file, add the style oriented CDN link for Syncfusion® Blazor components in the `` tag. +3. In the **Components -> App.razor** file, add the theme stylesheet CDN link for Syncfusion® Blazor components in the `` tag. - For **light mode**: @@ -136,7 +136,7 @@ If you choose **Bootstrap 5.3** theme, follow these steps to configure it. ``` -4. **OPTIONAL**: If you wish to use our font icons prepared for **Bootstrap 5.3**, you can include the following CDN link: +4. **Optional**: To use the font icons prepared for **Bootstrap 5.3**, include the following CDN link: ```html @@ -154,26 +154,25 @@ Now that **MyBlazorApp** is set up with the desired theme configuration, the nex ### Steps to explore and copy block code snippets from the online demo -1. In the [online demo](https://blazor.syncfusion.com/essential-ui-kit), navigate to the **Authentication** category and select the **Sign In** block. This will direct you to the appropriate demo page. +1. In the [online demo](https://blazor.syncfusion.com/essential-ui-kit), navigate to the **Authentication** category and select the **Sign in** block. This opens the corresponding demo page. ![Navigate to the sign-in block demo](images/navigate-to-the-sign-in-block-demo.png) -2. On the demo page, go to the first demo, which showcases a simple sign-in block. Choose the desired theme, then switch from the **Preview** tab to the **Code** tab. +2. On the demo page, open the first demo, which showcases a simple Sign in block. Choose the desired theme, then switch from the **Preview** tab to the **Code** tab. ![Choose Tailwind CSS or Bootstrap theme](images/choose-tailwind-or-bootstrap-theme.png) -3. In the **Code** tab, copy the Razor (HTML) code using the **Copy to Clipboard** option and paste it into the **Components -> Pages -> Home.razor** file, replacing its content with the provided "Hello, world!" example. +3. In the **Code** tab, copy the Razor (HTML) code using the **Copy to Clipboard** option and paste it into the **Components -> Pages -> Home.razor** file, replacing the default "Hello, world!" content. ![Copy HTML code snippet to clipboard](images/copy-HTML-code-snippet-to-clipboard.png) > Ensure that you do not remove the `@page` directive and `` element while replacing the content. These are essential for routing and setting the page title. - -4. If CSS is provided, copy the CSS code, create a new file **Components -> Pages -> Home.razor.css**, and paste the code into it. Similarly, if a C# code is provided, create a new file **Components -> Pages -> Home.razor.cs** and paste the C# code into it. Otherwise, you can ignore this step. +4. If CSS is provided, copy the CSS code, create a new file **Components -> Pages -> Home.razor.css**, and paste the code into it. If C# code is provided, create a new file **Components -> Pages -> Home.razor.cs** and paste the code into it. Otherwise, ignore this step. ### Steps to explore and copy block code snippets from the GitHub source -1. On [downloading](https://github.com/syncfusion/essential-ui-kit-for-blazor) and opening the GitHub source in Visual Studio Code, navigate to the following folder: **Components -> Pages -> BlocksSection**. +1. After [downloading](https://github.com/syncfusion/essential-ui-kit-for-blazor) and opening the source in Visual Studio Code, navigate to **Components -> Pages -> BlocksSection**. ![Downloaded GitHub app in Visual Studio Code](images/downloaded-github-app-in-visual-studio-code.png) @@ -189,31 +188,31 @@ Now that **MyBlazorApp** is set up with the desired theme configuration, the nex ## Steps to install and configure Syncfusion® Blazor components -While copying and pasting the Razor (HTML) code, you'll notice that Syncfusion® Blazor components are used. To incorporate them into **MyBlazorApp**, install the necessary packages and import the corresponding namespaces to the **Components -> _Imports.razor** file for the app to run. +While copying and pasting the Razor code, note that Syncfusion® Blazor components are used. To incorporate them into **MyBlazorApp**, install the necessary packages and import the corresponding namespaces in **Components -> _Imports.razor** so the app can compile and run. In the simple sign-in block, components such as textbox, checkbox and button are used. After copying and pasting Razor (HTML) code into the Razor file, open the **MyBlazorApp.csproj** file and add the required nuget packages: `Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Inputs`. For more details about other Syncfusion® Blazor component packages, refer to this [link](https://www.nuget.org/packages?q=Syncfusion.Blazor) ![Adding required packages for Syncfusion components](images/adding-required-packages-for-syncfusion-components.png) -Once the necessary packages are added, run the following command via the terminal to install those packages. +After the packages are added, run the following command in the terminal to install them. ```bash dotnet restore ``` -After restoring the packages, import the required namespaces `Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Inputs` in the _Imports.razor file to enable Syncfusion® components in the application. +After restoring the packages, import the required namespaces `Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Inputs` in **Components -> _Imports.razor** to enable Syncfusion® components in the application. ![Importing Syncfusion Namespaces](images/import-syncfusion-namespaces.png) -Finally, again check the [online demo](https://blazor.syncfusion.com/essential-ui-kit) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor) and copy the required Razor (HTML) code for the simple sign-in block into your app as outlined in the previous topic. +Finally, revisit the [online demo](https://blazor.syncfusion.com/essential-ui-kit) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor) and copy the required Razor (HTML) code for the simple Sign in block into your app as outlined above. ## Steps to download and add assets to the app -If you want to view and experience the images used in our design, you can download the **assets** folder from the following [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor/tree/master/UI_Blocks/wwwroot/assets), place it inside the **wwwroot** folder of **MyBlazorApp**, and modify the image URLs in the Razor (HTML) if necessary. +To use the images from the design, download the **assets** folder from the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-blazor/tree/master/UI_Blocks/wwwroot/assets), place it inside the **wwwroot** folder of **MyBlazorApp**, and update image URLs in the Razor (HTML) file if necessary. ## Steps to run the app -Now that everything is set up in **MyBlazorApp** — including the Razor (HTML), CSS (if applicable), C# (if applicable), and assets (optional) — you are ready to build and launch the app. Type the following command in the terminal, and you will see a localhost URL provided by the Blazor development server. +With **MyBlazorApp** set up—including Razor markup, CSS (if applicable), C# (if applicable), and and assets (optional) — you can build and run the app. Run the following command in the terminal; a localhost URL will be provided by the Blazor development server. ```bash dotnet run @@ -221,6 +220,6 @@ dotnet run ![Build and launch the app](images/build-and-launch-the-app.png) -To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the localhost URL displayed in the terminal. This will open the app in your default browser, allowing you to view and experience the simple sign-in block. +To view the app in a browser, **Ctrl+click** (or **Cmd+click** on macOS) the localhost URL displayed in the terminal. This opens the app in the default browser and displays the simple Sign in block. ![View the app in the browser using the localhost URL](images/view-the-app-in-the-browser-using-the-localhost-URL.png) diff --git a/blazor/ui-kit/getting-started.md b/blazor/ui-kit/getting-started.md index ed3329e1fa..6c3166ac2e 100644 --- a/blazor/ui-kit/getting-started.md +++ b/blazor/ui-kit/getting-started.md @@ -1,20 +1,20 @@ --- layout: post -title: Getting Started with Essential UI Kit for Blazor | Syncfusion -description: Checkout and learn about getting started with the Essential UI Kit for Blazor in Syncfusion Essential Studio, along with more details. +title: Get started with the Essential UI Kit for Blazor | Syncfusion +description: Learn here about how to set up the Essential UI Kit for Blazor from GitHub or try the online demo, including prerequisites and license key registration. platform: Blazor control: UI Kit documentation: ug --- -# Getting Started with Essential UI Kit for Blazor +# Getting started with the Essential UI Kit for Blazor -Follow the steps below to get started with Essential UI Kit for Blazor. You can begin in one of two ways: +Use either of the following options to explore the Essential UI Kit for Blazor: - **Download the App from GitHub**: Get the full free source code and run the app locally to explore the blocks. - **View the Online Demo**: Alternatively, you can try out the blocks directly through the online demo to see them in action without needing to download anything. -## Get Started by Downloading the App from GitHub +## Get started by downloading the app from GitHub ### Step 1: Download and Open the App in Visual Studio Code @@ -22,38 +22,39 @@ Download the app from the GitHub [link](https://github.com/syncfusion/essential- ![Launching the downloaded app](images/launching-the-downloaded-app.png) -### Step 2: Open a New Terminal +### Step 2: Open a new terminal In Visual Studio Code, go to the **Terminal** menu and select **New Terminal** to open the integrated terminal. -![Opening a new terminal](images/opening-a-new-terminal.png) +![Open a new terminal in Visual Studio Code](images/opening-a-new-terminal.png) ### Step 3: Install Dependencies and Run the App -Run the following commands one after the other in the terminal: -1. **Restore dependencies** - Run the command below to install all necessary packages related to the blocks, the Syncfusion® Blazor components, and the sample browser. +Run the following commands in the terminal (PowerShell on Windows): - ```bash - dotnet restore - ``` +1. Restore dependencies - This will download and install all the dependencies listed in the **.csproj** file. +```bash +dotnet restore +``` -2. **Serve the App Locally** - Once the dependencies are installed, you can run the app locally by starting the Blazor development server. To do so, run the following command. - - ```bash - dotnet run - ``` +Restores the packages referenced in the project file. Note: dotnet run also performs an implicit restore if needed. - This command will start the local development server, and you'll see an output in the terminal indicating the app is running. Typically, it will display a local host URL like this: +2. Serve the app locally - ![Local development server running](images/local-development-server-running.png) +Once the dependencies are installed, you can run the app locally by starting the Blazor development server. To do so, run the following command. - To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the local host URL displayed in the terminal. This will open the app in your default browser, allowing you to interact with the blocks. +```bash +dotnet run +``` -### Step 4: License Key Requirement +This command will start the local development server, and you'll see an output in the terminal indicating the app is running. Typically, it will display a local host URL like this: + +![Terminal output showing the local development server URL](images/local-development-server-running.png) + +To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the local host URL displayed in the terminal. This will open the app in your default browser, allowing you to interact with the blocks. + +### Step 4: License key requirement The blocks include several Syncfusion® Blazor components that require an active license key for proper display and usage. To activate the license, refer to the topics below: @@ -65,6 +66,6 @@ Once you have your license key, register it in the Blazor app through any one of By adding the license key, you ensure seamless browsing and usage of the blocks, making them fully functional and free from licensing issues. -## Get Started by Viewing the Online Demo +## Get started by viewing the online demo If you prefer a quick demo instead of downloading the app, you can explore the blocks directly through the online demo. Simply visit the official [Essential UI Kit for Blazor](https://blazor.syncfusion.com/essential-ui-kit) website to interact with the blocks. diff --git a/blazor/ui-kit/overview.md b/blazor/ui-kit/overview.md index 4e95bf17f8..03c04d2a70 100644 --- a/blazor/ui-kit/overview.md +++ b/blazor/ui-kit/overview.md @@ -1,16 +1,18 @@ --- layout: post -title: Overview of Essential UI Kit for Blazor | Syncfusion -description: Learn all about the overview of the Essential UI Kit for Blazor in Syncfusion Essential Studio and more here. +title: Essential UI Kit for Blazor overview | Syncfusion +description: Explore the Essential UI Kit for Blazor over 260 ready-to-use blocks built with Razor, CSS, C#, and Blazor components, with Tailwind and Bootstrap support. platform: Blazor -control: UI Kit +control: UI Kit documentation: ug --- -# Overview: Essential UI Kit for Blazor +# Essential UI Kit for Blazor overview The Essential UI Kit for Blazor comprises over 260 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML (Razor), CSS, C#, and Syncfusion® Blazor components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories: +The UI Kit includes blocks for the following categories: + @@ -110,19 +112,20 @@ The Essential UI Kit for Blazor comprises over 260 responsive, ready-to-use, eas > These provide pre-designed blocks for the quick implementation of web applications. However, customization and the integration of business logic must be handled on your end to meet your specific requirements. -## Supported Blazor Versions +## Supported Blazor versions + The blocks designed and showcased are built using .NET 8, but you can use other versions of Blazor as well, since they are primarily developed with HTML, CSS, and C# to facilitate building your web applications. Additionally, for using Syncfusion® Blazor components, the compatible Blazor and Syncfusion® versions are outlined in this [link](https://blazor.syncfusion.com/documentation/common/how-to/version-compatibility) for your reference. -## Supported Browsers +## Supported browsers - Google Chrome - Microsoft Edge - Safari - Mozilla Firefox -## Supported CSS Frameworks +## Supported CSS frameworks - Tailwind CSS - Bootstrap 5.3 -Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing you to seamlessly adapt the blocks to your web applications based on user preferences or system settings. This flexibility ensures a consistent and optimal user experience across different environments and devices. +Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing the blocks to adapt to user preferences or system settings for a consistent experience across devices. diff --git a/blazor/visual-studio-code-integration/code-snippet.md b/blazor/visual-studio-code-integration/code-snippet.md index 6f5d20a8bf..f3017f3246 100644 --- a/blazor/visual-studio-code-integration/code-snippet.md +++ b/blazor/visual-studio-code-integration/code-snippet.md @@ -1,47 +1,47 @@ --- layout: post -title: Code Snippets - Blazor Extension Visual Studio Code | Syncfusion -description: Learn here all about how to use code snippet utility of Syncfusion Blazor Extension for Visual Studio Code and much more. +title: Code snippets for the Syncfusion Blazor extension | Syncfusion +description: Learn here about that how to use the code snippet utilities in the Syncfusion Blazor extensions for the Visual Studio Code. Explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- # Add Syncfusion® Blazor component in the Blazor application -The Syncfusion® Blazor code snippet utility for Visual Studio Code includes snippets for inserting a Syncfusion® Blazor component with various features into the Blazor Application's Razor code editor. +The Syncfusion® Blazor code snippet utility for Visual Studio Code provides snippets to insert Syncfusion® Blazor components with common features into a Blazor application's Razor code editor. - N> The Syncfusion® Blazor code snippet is available from Essential Studio® 2021 Volume 1 (`v19.1.0.54`). + N> The Syncfusion® Blazor code snippet feature is available from Essential Studio® 2021 Volume 1 (`v19.1.0.54`). ## Add a Syncfusion® Blazor component -The instructions below guide you the process of using the Syncfusion® Blazor code snippet in your Blazor application. +The following steps describe how to use the Syncfusion® Blazor code snippets in a Blazor application. -1. In Visual Studio Code, open an existing Blazor Application or create a new Blazor Application. +1. In Visual Studio Code, open an existing Blazor application or create a new one. -2. Open the razor file that you need and place the cursor in required place where you want to add Syncfusion® component. +2. Open the required Razor file and place the cursor where the Syncfusion® component should be inserted. -3. You can find the Syncfusion® Blazor component with the various features by typing the **sf** word in the format shown below. +3. Type the prefix **sf** and use the following format to discover component snippets and features. ``` sf- - For Example, sfgrid-grouping + For example, sfgrid-grouping ``` -4. Choose the Syncfusion® component and click the **Enter** or **Tab** key, the Syncfusion® Blazor component will be added in the razor file. +4. Select the desired Syncfusion component and press **Enter** or **Tab**. The corresponding component markup is inserted into the Razor file. - ![Code Snippet](images/codesnippet.gif) + ![Animated demo showing insertion of a Syncfusion Blazor code snippet](images/codesnippet.gif) -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. +5. After inserting the Syncfusion® Blazor component, use the Tab key to navigate placeholders and provide the required values. Review the inline comments in the snippet to identify which values are required. - ![Comment](images/Comment.png) + ![Snippet comments highlighting required placeholders](images/Comment.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. +6. A Syncfusion® help link is included at the top of the snippet to learn more about the inserted component or feature. - ![Help](images/Help.png) + ![Help link shown at the top of the inserted snippet](images/Help.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: +The Syncfusion® Blazor snippet only inserts code into the Razor file. Configure the Blazor application by adding the required NuGet packages, namespaces, themes, and registering the Syncfusion® Blazor service. Follow these steps: 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. @@ -49,18 +49,18 @@ The Syncfusion® Blazor snippet simply inserts the code into the razor file. You N> 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. +2. To render Syncfusion® components, open **~/_Imports.razor** and add the required Syncfusion® Blazor namespace entries. ![Namespace](images/Namespace-Snippet.png) -3. Add the Syncfusion® Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes) in the `` element of the **~/Components/App.razor** page for Web App and `` element of the **~/Pages/_Host.html** page for server application and **~/wwwroot/index.html** page for a client application. +3. Add a Syncfusion® Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes) in the `` element of **~/Components/App.razor** for Blazor Web App, in **~/Pages/_Host.cshtml** for Blazor Server, and in **~/wwwroot/index.html** for a Blazor WebAssembly (client) application. ![Themes](images/Themes-Snippet.png) -4. Open the **~/Program.cs** file for Web App and server application and client application then register the Syncfusion® Blazor Service. +4. Open the relevant **~/Program.cs** file(s) for Web App and server application and client application and register the Syncfusion® Blazor service. -If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the Blazor Web App uses an interactive render mode of `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. - ![Syncfusion Configuration](images/Configuration-Snippet.png) +![Registration of the Syncfusion Blazor service](images/Configuration-Snippet.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 [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. \ No newline at end of file diff --git a/blazor/visual-studio-code-integration/convert-project.md b/blazor/visual-studio-code-integration/convert-project.md index 7f12a59ba0..9b7ea35d4e 100644 --- a/blazor/visual-studio-code-integration/convert-project.md +++ b/blazor/visual-studio-code-integration/convert-project.md @@ -1,41 +1,41 @@ --- layout: post -title: Convert Project - Blazor Extension for Visual Studio Code | Syncfusion -description: Learn here all about how to convert blazor application into syncfusion blazor application using Blazor Extension for Visual Studio Code. +title: Convert a project using the Blazor extension | Syncfusion +description: Learn here about how to convert an existing Blazor application into a Syncfusion Blazor application using the Blazor extension for Visual Studio Code. platform: Blazor -component: Common +control: Common documentation: ug --- # Converting Blazor Extension for Visual Studio Code -The Syncfusion® Blazor conversion is an add-in for Visual Studio Code that converts an existing Blazor application into a Syncfusion® Blazor Web Application by adding the required NuGet packages and themes. +The Syncfusion® Blazor conversion add-in for Visual Studio Code converts an existing Blazor application into a Syncfusion® Blazor web application by adding the required NuGet packages and themes. N> The Syncfusion® Blazor Web Application Project Conversion utility is available from `v17.4.0.39`. -The steps below assist you to using the Syncfusion® Project conversion in your existing Blazor Web Application: +Use the following steps to run the Syncfusion® project conversion in an existing Blazor Web application: -1. Open an existing Blazor Web Application or create a new Microsoft Blazor Web Application in Visual Studio Code. +1. In Visual Studio Code, open an existing Blazor Web application or create a new Blazor Web application. -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. +2. In Explorer (Workspace), right-click the project file and select **Convert to Syncfusion Blazor Application...** from the context menu. Refer the screenshot below. - ![Conversion Add-in](images/Conversion.PNG) + ![Context menu showing Convert to Syncfusion Blazor Application command](images/Conversion.PNG) -3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears. +3. From the Command Palette, choose **Select Blazor Version** (version published on `nuget.org`). - ![Select Blazor Version](images/VersionSelection.PNG) + ![Palette showing selection of Blazor version](images/VersionSelection.PNG) -4. Choose the **Theme** from the palette appears. +4. From the palette, choose the desired Syncfusion theme. - ![Select Themes](images/ChooseThemes.PNG) + ![Palette showing selection of Syncfusion themes](images/ChooseThemes.PNG) -5. The application configured with Syncfusion® Blazor required NuGet packages and themes. +5. The application is configured with the required Syncfusion® Blazor NuGet packages and themes. 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 [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. ## NuGet Packages -Based on the application type, the following NuGet packages are added as NuGet references. +Based on the application type, the following NuGet packages are added as dependencies. | Syncfusion® Blazor NuGet packages | Application type | |---|---| @@ -43,19 +43,19 @@ Based on the application type, the following NuGet packages are added as NuGet r | `Syncfusion.Blazor.PdfViewerServer.Windows` | Syncfusion® Blazor Server App | | `Syncfusion.Blazor.WordProcessor` | Syncfusion® Blazor Server App
Syncfusion® Blazor WebAssembly App
Syncfusion® Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion® Blazor WebAssembly App (Progressive Web Application)| -The NuGet packages added to the application file as follows. +The packages are added to the application as shown below. -![NuGetPackage](images/NuGetPackage.png) +![Project file showing Syncfusion NuGet package references](images/NuGetPackage.png) ## Theme links -While converting the application, the selected Syncfusion® Blazor theme is added in the following location of a Blazor type application. +During conversion, the selected Syncfusion® Blazor theme is added in the following locations based on the application type. | Application type | File location | |---|---| | Syncfusion® Blazor Web App | ~/Components/App.razor | -| Syncfusion® Blazor Server App | {Project location}/Pages//_Host.cshtml | +| Syncfusion® Blazor Server App | {Project location}/Pages/_Host.cshtml | | 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 +![Example showing where the theme link is added in the project](images/CDNLink.png) diff --git a/blazor/visual-studio-code-integration/create-project.md b/blazor/visual-studio-code-integration/create-project.md index 8186468ae2..91a06d0173 100644 --- a/blazor/visual-studio-code-integration/create-project.md +++ b/blazor/visual-studio-code-integration/create-project.md @@ -1,38 +1,38 @@ --- layout: post -title: Create Projects using Project Templates via Extensions | Syncfusion -description: Learn here about how to create syncfusion blazor application using Syncfusion Blazor Extension for Visual Studio Code. +title: Create projects using project templates in VS Code | Syncfusion +description: Learn how to create a Syncfusion Blazor application using the Syncfusion Blazor extension for Visual Studio Code. platform: Blazor -component: Common +control: Common documentation: ug --- -# Creating a Syncfusion® Blazor application +# Create a Syncfusion® Blazor application -Syncfusion® provides the Blazor Template Studio in Visual Studio Code, 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. +Syncfusion® provides the Blazor Template Studio for Visual Studio Code, which scaffolds a Syncfusion® Blazor application preconfigured with Syncfusion® NuGet packages, namespaces, themes, and component render code. The Template Studio offers a guided wizard to create an application with Syncfusion® components. -N> Blazor project templates from `v17.4.0.39` are supported by the Syncfusion® Visual Studio Code project template. +N> Blazor project templates from version `v17.4.0.39` and later are supported by the Syncfusion Visual Studio Code project template. -The instructions below assist you in creating **Syncfusion® Blazor Applications** using **Visual Studio Code**: +Use the following steps to create Syncfusion® Blazor applications in Visual Studio Code: -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®. +1. To create a Syncfusion® Blazor application in Visual Studio Code, open the Command Palette with **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) + ![Command Palette showing Syncfusion commands](images/CreateBlazorProjectPalette.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. +2. Select **Syncfusion Blazor Template Studio: Launch**, and press **Enter**. The Template Studio wizard opens to configure the Syncfusion® Blazor app. Enter the project name and project path. - ![TemplateStudioWizard](images/ProjectLocationName1.png) + ![Template Studio wizard with Project name and Project path fields](images/ProjectLocationName1.png) - N> Refer to the .NET SDK support for Syncfusion® Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + N> For supported .NET SDK versions, see the .NET SDK support for Syncfusion Blazor components in the system requirements [documentation](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. +3. Select **Next** or the **Project type** tab. The available Syncfusion® Blazor project types are displayed. Choose one based on the .NET SDK version in use. | .NET SDK version | Supported Syncfusion® Blazor Application Type | | ---------------- | -------------------------------------------- | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor Web App | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor WebAssembly App | - In the **Syncfusion® Blazor Web App** application type, you can configure the following options: + In the **Syncfusion® Blazor Web App** application type, the following options are available:
Category
@@ -55,98 +55,98 @@ The instructions below assist you in creating **Syncfusion® Blazor WebAssembly App** application type, you can choose Progressive Web Application. + In the **Syncfusion Blazor WebAssembly App** project type, choose Progressive Web Application (PWA). - ![ProjectType](images/ProjectTypeDetails1.png) + ![Project type selection showing Blazor WebAssembly and PWA option](images/ProjectTypeDetails1.png) -4. Click either **Next** or the **Controls** tab and select the Syncfusion Blazor components you want to add to your application. +4. Select **Next** or the **Controls** tab, and then choose the Syncfusion® Blazor components to include in the application. - ![Controls Section](images/ControlsSection.png) + ![Controls tab listing Syncfusion Blazor components](images/ControlsSection.png) - Choose the required control(s) by clicking the corresponding control box. + Choose the required control(s) by selecting the corresponding control tiles. - To unselect the added control(s), use either one of the following options: + To unselect added control(s), use one of the following options: **Option 1:** Click the corresponding selected control box. - **Option 2:** Click ‘x’ button for corresponding control in the control list from **Project Details**. + **Option 2:** In **Project Details**, click the ‘x’ next to the corresponding control in the selected controls list. - N> **Note:** Choose at least one control to enable the Features and Configuration tab. + N> Choose at least one control to enable the Features and Configuration tabs. -5. Click either **Next** or the **Features** tab, and you will see the features listed for the selected controls. You can choose the required features. +5. Select **Next** or the **Features** tab to view the available features for the selected controls, and choose the required options. ![FeaturesSection](images/FeaturesSection.png) -6. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. +6. Select **Next** or the **Configuration** tab to open the Configuration section. Configure the target .NET version (.NET 9.0 or .NET 8.0), theme, HTTPS configuration, localization, authentication type, and options specific to Blazor Web App or Blazor WebAssembly App types. - Depending on your Syncfusion® Blazor Application Type, refer to the table below for supported authentication types. + Depending on the selected Syncfusion® Blazor application type, the following authentication options are supported: | 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 Web App | None, Individual Accounts | + | Syncfusion® Blazor WebAssembly App | None, Individual Accounts, Microsoft Identity Platform | - If you choose the **Blazor Web App** application type, you can customize the Interactivity type and Interactivity location options. + For the **Blazor Web App** application type, Interactivity type and Interactivity location can be customized. - ![WebAppConfiguration](images/WebApp.png) + ![Configuration panel showing interactivity options for Blazor Web App](images/WebApp.png) - If you choose the **Blazor Web Assembly App** application type, you can customize the Progressive Web Application option. + For the **Blazor WebAssembly App** application type, the Progressive Web Application option can be enabled or disabled. - ![WASMConfiguration](images/WebAssembly.png) + ![Configuration panel showing PWA option for Blazor WebAssembly](images/WebAssembly.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. + Use the Project Details section to change the application type, remove selected control(s), or update configuration options. - ![ProjectDetails](images/ProjectDetailsRightSide.png) + ![Project Details panel showing selected controls and configuration summary](images/ProjectDetailsRightSide.png) -7. 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 selected Syncfusion® component. +7. Click **Create**. The Syncfusion® Blazor application is created with the required Syncfusion® NuGet packages, styles, and the render code for the selected Syncfusion® components. -8. You can run the application to see the Syncfusion® components. Click **F5** or go to **Run>Start Debugging**. +8. Run the application to view the Syncfusion® components. Press **F5** or select **Run > Start Debugging**. - ![Readme](images/RunProject.png) + ![Running the generated Syncfusion Blazor project in Visual Studio Code](images/RunProject.png) 9. The Syncfusion® Blazor application configures with most recent Syncfusion® Blazor NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® components. 10. 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 [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. -## Syncfusion® integration +## Syncfusion® integration The Syncfusion® Blazor application configures with latest Syncfusion® Blazor NuGet packages, styles, namespaces, and component render code for Syncfusion® components are added in the created application. -### NuGet Packages +### NuGet packages -The `Syncfusion.Blazor` NuGet package will be added as NuGet references for all application types. +The `Syncfusion.Blazor` package is added as a dependency for all project types. ![NuGetPackage](images/NuGetPackage.png) ### Style -The selected theme is added from Syncfusion® NuGet and its reference at these applications locations in Blazor. +The selected theme is added from the Syncfusion® NuGet package and referenced at the following locations. | Application type | File location | |---|---| | Syncfusion® Blazor Web App | ~/Components/App.razor | -| Syncfusion® Blazor WebAssembly App (ASPNET Core hosted)
Syncfusion® Blazor WebAssembly App (Progressive Web Application) | {Client Project location}/wwwroot/index.html | +| Syncfusion® Blazor WebAssembly App (ASP.NET 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) +![Theme reference location examples](images/CDNLink.png) ### Namespaces -The Syncfusion® Blazor namespaces are added in the **`_imports.razor`** file. +The Syncfusion® Blazor namespaces are added in the **`_imports.razor`** file. -![NameSpace](images/NameSpace.png) +![Imports file showing Syncfusion namespaces](images/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. +The Syncfusion Blazor Calendar, Button, and DataGrid component render code is added to the Razor files in the Pages folder. | File name | Code snippet added | |---|---| -| `~/Pages/Home.razor or 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/Home.razor or Index.razor` | ![Index page updated with Syncfusion components](images/IndexFileChange.png) | +| `~/Pages/Counter.razor` | ![Counter page updated with Syncfusion components](images/CounterPageChange.png) | +| `~/Pages/FetchData.razor` | ![FetchData page updated with Syncfusion DataGrid](images/FetchDataPageChange.png) | diff --git a/blazor/visual-studio-code-integration/download-and-installation.md b/blazor/visual-studio-code-integration/download-and-installation.md index b1d5e7afb6..14f1be6e17 100644 --- a/blazor/visual-studio-code-integration/download-and-installation.md +++ b/blazor/visual-studio-code-integration/download-and-installation.md @@ -1,79 +1,72 @@ --- layout: post -title: Download and Installation in Blazor Extension | Syncfusion -description: Learn here more about how to download and install in the Syncfusion Blazor Extension for Visual Studio Code and much more. +title: Download and installation for Blazor VS Code extension | Syncfusion +description: Learn here about how to download and install the Syncfusion Blazor extension for Visual Studio Code to scaffold and manage Syncfusion Blazor applications. platform: Blazor -component: Common +control: Common documentation: ug --- -# Download and Installation +# Download and Installation in VS Code Extension -Syncfusion® publishes the Visual Studio Code extension in the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions). You can either install it directly from Visual Studio Code or download and install it from the Visual Studio Code marketplace. +Syncfusion® publishes the Visual Studio Code extension in the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions). Install it directly from Visual Studio Code or download it from the Marketplace and install locally. ## Prerequisites -The following software prerequisites must be installed to install the Syncfusion® Blazor extension, as well as to creating, adding component code, converting, and upgrading Syncfusion® Blazor applications. +Install the following prerequisites to install the Syncfusion® Blazor extension and to create, convert, and upgrade Syncfusion® Blazor applications. -* [Visual Studio Code 1.29.0 or later](https://code.visualstudio.com/download) - -* [Visual Studio 2022 ](https://visualstudio.microsoft.com/vs/) or later - -* [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) +- [Visual Studio Code 1.29.0 or later](https://code.visualstudio.com/download) +- [Visual Studio 2022 ](https://visualstudio.microsoft.com/vs/) or later +- [.NET SDK 8.0 or 9.0](https://dotnet.microsoft.com/en-us/download) +- [C# extension]((https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)). ## Install through the Visual Studio Code Extensions -The instructions below describe the process of installing the Syncfusion® Blazor extensions from Visual Studio Code Extensions. +The steps below describe how to install the Syncfusion® Blazor extension from the Extensions view in Visual Studio Code. 1. Open Visual Studio Code. - 2. Navigate to **View > Extensions**, and the Manage Extensions option will appear on the left side of the window. +3. In the search box, enter Syncfusion Blazor to find the Syncfusion Blazor extension in the Marketplace. -3. By entering the keyword **"Syncfusion® Blazor"** in the search box, you can find the Syncfusion® Blazor Visual Studio Code extension in the Visual Studio Code Marketplace. - - ![Extension](images/Extension.png) + ![Extensions view showing Syncfusion Blazor extension search results](images/Extension.png) -4. Install the **"Blazor VSCode Extensions - Syncfusion"** extension by clicking the **Install** button. +4. Select **Blazor VSCode Extensions - Syncfusion**, and click **Install**. +5. Reload Visual Studio Code after installation by using the **Reload Window** command from the Command Palette. Open the Command Palette with **Ctrl+Shift+P**, then run Reload Window. -5. Reload Visual Studio Code after installation by using the **Reload Window** command in the Visual Studio Code palette. You can open the command palette by pressing **Ctrl+Shift+P** and find the Reload Window from Visual Studio Code commands. - - ![Reload-Window](images/Reload-Window.png) + ![Command Palette highlighting the Reload Window command](images/Reload-Window.png) 6. Now, you can create a new Syncfusion® Blazor application by using the Syncfusion® Blazor extensions from the Visual Studio Code Palette Find the **Syncfusion® Blazor Template Studio: Launch** from Visual Studio Code commands to open the Syncfusion® Blazor Template Studio wizard. - ![CreateProjectPalette](images/CreateProjectPalette.png) + ![Command Palette showing Syncfusion Blazor Template Studio](images/CreateProjectPalette.png) ## Install from the Visual Studio Code Marketplace -The instructions below describe the process of downloading and installing Syncfusion® Blazor applications from the Visual Studio Code Marketplace. - -1. Open [Syncfusion® Blazor Code Extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) in Visual Studio Code Marketplace. +The steps below describe how to download and install the extension from the Visual Studio Code Marketplace website. +1. Open the [Syncfusion® Blazor VS Code Extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) page in the Marketplace. 2. Click Install from Visual Studio Code Marketplace. The browser displays a popup window with information such as **"Open Visual Studio Code"**. When you click Open Visual Studio Code, the [Syncfusion® Blazor Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) will launch in Visual Studio Code. +3. In Visual Studio Code, click **Install** on the **Blazor VSCode Extensions - Syncfusion** page. +4. Reload Visual Studio Code after installation by using the **Reload Window** command from the Command Palette. Open the Command Palette with **Ctrl+Shift+P**, then run Reload Window. -3. Install the **"Blazor VSCode Extensions - Syncfusion"** extension by clicking the **Install** button. - -4. Reload Visual Studio Code after installation by using the **Reload Window** command in the Visual Studio Code palette. You can open the command palette by pressing **Ctrl+Shift+P** and find the Reload Window from Visual Studio Code commands. - - ![Reload-Window](images/Reload-Window.png) + ![Command Palette highlighting the Reload Window command](images/Reload-Window.png) 5. Now, you can create a new Syncfusion® Blazor application by using the Syncfusion® Blazor extensions from the Visual Studio Code Palette Find the **Syncfusion® Blazor Template Studio: Launch** from Visual Studio Code commands to open the Syncfusion® Blazor Template Studio wizard. - ![CreateProjectPalette](images/CreateProjectPalette.png) + ![Command Palette showing Syncfusion Blazor Template Studio](images/CreateProjectPalette.png) ## Manually Installing an Extension in Visual Studio Code -The instructions below describe the process of installing the Syncfusion® Blazor extensions manually in visual studio code. -1. Install the extension by downloading it from the Visual Studio Marketplace and then installing it from a local file within VS Code. To do this: Download the **"SyncfusionInc.Blazor-VSCode-Extensions.vsix"** file from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions). +The steps below describe how to install the Syncfusion Blazor extension manually in Visual Studio Code. -2. In VS Code, go to the Extensions view by clicking on the Extensions icon in the Activity Bar. +1. Download the SyncfusionInc.Blazor-VSCode-Extensions.vsix file from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions). +2. In Visual Studio Code, open the Extensions view by clicking the Extensions icon in the Activity Bar. - ![ExtensionIcon](images/ExtensionIcon.png) + ![Extensions icon highlighted in the Activity Bar](images/ExtensionIcon.png) -3. Click on the three dots (ellipsis) in the top-right corner and select "Install from VSIX." +3. Click the More Actions (ellipsis) button in the top-right of the Extensions view, and select Install from VSIX. - ![InstallVsix](images/InstallVsix.png) + ![Extensions view More Actions menu with Install from VSIX option](images/InstallVsix.png) -4. Browse to the downloaded SyncfusionInc.Blazor-VSCode-Extensions.vsix file and install it. +4. Browse to the downloaded SyncfusionInc.Blazor-VSCode-Extensions.vsix file and complete the installation. - ![DownloadVsix](images/DownloadVsix.png) + ![File selection dialog for SyncfusionInc.Blazor-VSCode-Extensions.vsix](images/DownloadVsix.png) \ No newline at end of file diff --git a/blazor/visual-studio-code-integration/overview.md b/blazor/visual-studio-code-integration/overview.md index 7564e99ee4..d1e4898248 100644 --- a/blazor/visual-studio-code-integration/overview.md +++ b/blazor/visual-studio-code-integration/overview.md @@ -1,22 +1,19 @@ --- layout: post -title: Syncfusion Blazor Extension for Visual Studio Code | Syncfusion -description: Learn here all about introduction on Syncfusion Blazor extension for Visual Studio Code which made integration made ease. +title: Blazor extension for Visual Studio Code | Syncfusion +description: Overview of Blazor extension for Visual Studio Code that simplifies project setup, code snippets, project conversion, and upgrades for Syncfusion Blazor apps. platform: Blazor -component: Common +control: Common documentation: ug --- # Overview of Blazor Extension for Visual Studio Code -The [Syncfusion® Blazor Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) simplifies the use of the Syncfusion® Blazor components by configuring the Syncfusion® Blazor NuGet packages and themes. +The [Syncfusion® Blazor extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) streamlines the use of Syncfusion® Blazor components by configuring the required NuGet packages and themes. -The Syncfusion® Blazor Extension provides the following support in Visual Studio Code: +The extension provides the following capabilities in Visual Studio Code: -[Project-Template](create-project): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion® Blazor component. - -[Code Snippet](code-snippet): Adds a Syncfusion® Blazor component with various features to the Blazor Application's Razor code editor. - -[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by importing the necessary Syncfusion® NuGet packages. - -[Upgrade project](upgrade-project): Upgrades the existing Syncfusion® Blazor Web Application from one Essential Studio® version to another version. \ No newline at end of file +- [Create project template](create-project): Creates a Syncfusion® Blazor application with the required configuration and dependencies for development. +- [Code snippets](code-snippet): Inserts Syncfusion® Blazor component snippets and common scenarios into the Razor editor. +- [Convert project](convert-project): Converts an existing Blazor application to use Syncfusion Blazor by adding the necessary NuGet packages and resources. +- [Upgrade project](upgrade-project): Upgrades an existing Syncfusion® Blazor application from one Essential Studio® version to another. diff --git a/blazor/visual-studio-code-integration/upgrade-project.md b/blazor/visual-studio-code-integration/upgrade-project.md index 3a0cb7df65..14dc7c649e 100644 --- a/blazor/visual-studio-code-integration/upgrade-project.md +++ b/blazor/visual-studio-code-integration/upgrade-project.md @@ -1,36 +1,36 @@ --- layout: post -title: Upgrade Project to Latest Version in Blazor | Syncfusion -description: Learn here all about upgrading project to use latest version using Syncfusion Blazor Extension for Visual Studio Code. +title: Upgrade a project to the latest version | Syncfusion +description: Learn here about how to upgrade a project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Upgrading Syncfusion® Blazor application to latest version +# Upgrading Syncfusion® Blazor application -The Syncfusion® Blazor Migration is an add-in for Visual Studio Code allows you to migrate an existing Syncfusion® Blazor Web Application from one Essential Studio® version to another. +The Syncfusion® Blazor migration add-in for Visual Studio Code enables upgrading an existing Syncfusion® Blazor web application from one Essential Studio® version to another. - N> The Syncfusion® Blazor Web Application Project Migration utility is available from `v17.4.0.39`. +N> The Syncfusion Blazor Web Application project migration utility is available from version `v17.4.0.39`. -The steps below assist you to migrating existing Syncfusion® Blazor Web Application. +Use the following steps to migrate an existing Syncfusion® Blazor Web Application. -1. Open an existing Syncfusion® Blazor Web Application or create a new Syncfusion® Blazor Web Application in Visual Studio Code. +1. In Visual Studio Code, open an existing Syncfusion® Blazor Web Application or create a new one. -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. +2. In Explorer (Workspace), right-click the project file and select **Migrate Syncfusion® Blazor Application to another version...** from the context menu. Refer to the screenshot below. - ![Migration add-in](images/Migration.PNG) + ![Context menu showing Migrate Syncfusion Blazor Application command](images/Migration.PNG) - N> If you have a Syncfusion® Blazor reference in your application, the Migration option will be enabled. + N> The Migration option is available only when the application already references Syncfusion® Blazor packages. -3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears. +3. From the Command Palette, choose **Select Blazor Version** and pick the required Syncfusion® Blazor package version published on `nuget.org`. - ![Select Blazor Version](images/VersionSelection.PNG) + ![Palette showing selection of Syncfusion Blazor version](images/VersionSelection.PNG) -4. The Syncfusion® NuGet packages references and themes are updated to the selected version in the application. +4. The Syncfusion® Blazor NuGet package references and theme links are updated to the selected version in the application. - ![NuGetPackage](images/NuGetPackage.png) + ![Project file updated with new Syncfusion NuGet package versions](images/NuGetPackage.png) - ![CDNLink](images/CDNLink.png) + ![Theme link updated to the selected version](images/CDNLink.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 [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. \ No newline at end of file diff --git a/blazor/visual-studio-integration/code-generator.md b/blazor/visual-studio-integration/code-generator.md index 799d930208..c7c4b2935c 100644 --- a/blazor/visual-studio-integration/code-generator.md +++ b/blazor/visual-studio-integration/code-generator.md @@ -1,51 +1,51 @@ --- layout: post -title: Code Generator in Blazor | Syncfusion -description: Learn here about adding the Blazor Component using Code Generator of Syncfusion Blazor Extension for Visual Studio. +title: Code generator for the Blazor extension | Syncfusion +description: Learn how to add Syncfusion Blazor component markup using the Code Generator in the Syncfusion Blazor extension for Visual Studio. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- # Add Syncfusion® Blazor component code -Syncfusion® provides a Code Generator component for the Blazor platform, allowing you to quickly insert component code into the desired location within a Razor file. The Syncfusion® extension automatically adds the necessary Syncfusion® components along with the required namespaces, styles, and NuGet references. The Code Generator is a simple wizard that interacts with data models and integrates Syncfusion® components with the required features into your application. +Syncfusion® provides a Code Generator component for the Blazor platform, allowing you to quickly insert component code into the desired location within a Razor file. The Syncfusion® extension automatically adds the necessary Syncfusion® components along with the required namespaces, styles, and NuGet references. The Code Generator is a simple wizard that interacts with data models and integrates Syncfusion® components with the required features into your application. -The steps below will assist you to add the Syncfusion® components code in your Blazor application through **Visual Studio 2022**: +Use the following steps to add Syncfusion® components to a Blazor application in **Visual Studio 2022**: -N> Before using the Syncfusion® Blazor Code Generator, check whether the Syncfusion® Blazor Extension is installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor Code Generator, verify that the Syncfusion® Blazor extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If it is not installed, follow the steps in the [download and installation](download-and-installation) topic. -1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2022 or Visual Studio 2022. +1. Open an existing Blazor application or create a new one in Visual Studio 2022. -2. To open the Syncfusion® Blazor Code Generator Wizard, select one of the options below in the Razor file, and then add Syncfusion® components: +2. To open the Syncfusion® Blazor Code Generator wizard from a Razor file, use one of the following options: **Option 1:** - To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor Code Generator...** + To generate a specific component code, right-click in the Razor editor at the desired line and select **Syncfusion® Blazor Code Generator...** ![CodeGeneratorCommand](images/Code-Generator-Command.PNG) **Option 2:** - Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for Blazor -> Syncfusion® Blazor Code Generator…** from the Visual Studio menu. + Place the cursor at the required line in the .razor file, then choose **Extensions -> Syncfusion -> Essential Studio for Blazor -> Syncfusion Blazor Code Generator…** from the Visual Studio menu. ![CodeGeneratorMenu](images/Code-Generator-Menu.PNG) -3. The wizard for the Syncfusion® Blazor Code Generator will appear. Choose a required control. +3. The Syncfusion® Blazor Code Generator wizard opens. Choose the required component. ![CodeGeneratorWizard](images/Code-Generator-MainWizard.png) **Data Binding:** Data operation fields will be visible if the selected component has data. The data will be listed from your application. It interacts with data models and reduces the amount of time spent developing your application. You can choose the required Data Model Class, Data Source, Id, and more from your application. - **Feature:** Selected component features are listed. You can select the required features. + **Features:** Lists available features for the selected component. Choose the required options. - **Control requirements:** Contains the required user input fields for the selected component. You can provide the required value for those fields to add the component code. + **Component requirements:** Contains the required inputs for the selected component. Provide values to complete the generated markup. You can provide the required value for those fields to add the component code. - Click **Insert**. It generates the selected component render code and inserts it wherever the cursor is positioned. + Click **Insert** to generate the selected component render mode and insert it at the cursor location. ![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.PNG) -4. In the Output window, select the **Syncfusion® Blazor Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. +4. In the Output window, select **Syncfusion Blazor Code Generator** from the **Show output from** list to review the changes applied to the application. ![OutputWindow](images/Code-Generator-OutputWindow.PNG) diff --git a/blazor/visual-studio-integration/download-and-installation.md b/blazor/visual-studio-integration/download-and-installation.md index c892322f01..7a93d30099 100644 --- a/blazor/visual-studio-integration/download-and-installation.md +++ b/blazor/visual-studio-integration/download-and-installation.md @@ -1,71 +1,71 @@ --- layout: post -title: Download and Installation of Blazor Extension | Syncfusion -description: Check out the documentation for download and installation of Syncfusion Blazor Extension for Visual Studio. +title: Download and installation of the Blazor extension | Syncfusion +description: Learn here about how to download and install the Syncfusion Blazor extension for Visual Studio and manage the Blazor applications. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Download and Installation +# Download and installation -Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. +Syncfusion® publishes the Visual Studio extension in the Visual Studio Marketplace. Install it directly from Visual Studio or download and install it from the Visual Studio Marketplace. -[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) +[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) ## Prerequisites -The following software prerequisites must be installed to install the Syncfusion® Blazor extension, as well as to creating, adding snippet, converting, and upgrading Syncfusion® Blazor applications. +The following software is required to install the Syncfusion® Blazor extension and to create projects, add snippets, convert, and upgrade Syncfusion® Blazor applications. * [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). -* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). +* [.NET 9.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet). -* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). +* [.NET 8.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet). -## Install through the Visual Studio Manage Extensions +## Install through Visual Studio Manage Extensions -The steps below assist you to how to install the Syncfusion® Blazor extensions from **Visual Studio Manage Extensions**. +The following steps describe how to install the Syncfusion® Blazor extension from **Manage Extensions** in Visual Studio. -1. Open the Visual Studio 2022. +1. Open Visual Studio 2022. -2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. +2. Navigate to **Extensions -> Manage Extensions** to open the Manage Extensions window. -3. On the left, click the **Online** tab and type **"Syncfusion® Blazor"** in the **search box**. +3. In the **Online** tab, search for **Syncfusion Blazor**. - ![Online-Manage-Extension-window](images/OnlineExtension.png) + ![Manage Extensions window showing Syncfusion Blazor search results](images/OnlineExtension.png) -4. Click the **Download** button in the **“Syncfusion® Blazor Template Studio”** extensions. +4. Click **Download** for the **Syncfusion Blazor Template Studio** extension. -5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. +5. Close all Visual Studio instances to begin the installation process. A VSIX installation prompt appears. - ![VSIX-Installation-Window](images/VSIXinstallation.png) + ![VSIX Installer prompting to modify Visual Studio](images/VSIXinstallation.png) -6. Click the **Modify** button. +6. Click **Modify**. 7. After the installation is complete, open Visual Studio. -8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. +8. In the **Extensions** menu, access the Syncfusion® extensions in Visual Studio. ![SyncfusionMenu](images/SyncfusionMenu.png) ## Install from the Visual Studio Marketplace -The steps below illustrate how to download and install the Syncfusion® Blazor extension from the Visual Studio Marketplace. +The following steps illustrate how to download and install the Syncfusion® Blazor extension from the Visual Studio Marketplace. -1. Download the Syncfusion® Blazor Extensions from the below Visual Studio Marketplace. +1. Download the Syncfusion® Blazor extension from the Visual Studio Marketplace. - [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + [Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) 2. Close all Visual Studio instances running, if any. -3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. +3. Double-click the downloaded VSIX file to install. In the VSIX Installer, select the Visual Studio instance(s) to install the extension. - ![VSIX-Installation-Window](images/VSIXinstallation1.png) + ![VSIX Installer showing Visual Studio instance selection](images/VSIXinstallation1.png) 4. Click the **Modify** button. -5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. +5. After installation completes, open Visual Studio. The Syncfusion® extensions are available under the **Extensions** menu. ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/blazor/visual-studio-integration/images/controlssection1.png b/blazor/visual-studio-integration/images/controlssection1.png index 6957cddf51..15c2918205 100644 Binary files a/blazor/visual-studio-integration/images/controlssection1.png and b/blazor/visual-studio-integration/images/controlssection1.png differ diff --git a/blazor/visual-studio-integration/overview.md b/blazor/visual-studio-integration/overview.md index d80ffcef44..82b645d3f2 100644 --- a/blazor/visual-studio-integration/overview.md +++ b/blazor/visual-studio-integration/overview.md @@ -1,26 +1,26 @@ --- layout: post -title: Overview of Syncfusion Blazor Extension for Visual Studio | Syncfusion -description: Learn here all about introduction on Syncfusion Blazor extension for Visual Studio which made integration ease. +title: Overview of Blazor extension for Visual Studio | Syncfusion +description: Learn here about the Syncfusion Blazor extension for Visual Studio and how it streamlines integration with Syncfusion components. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Overview of Blazor Extension for Visual Studio +# Overview of Blazor extension for Visual Studio -The Syncfusion® Blazor Extension for Visual Studio simplifies the use of the Syncfusion® Blazor components by configuring the Syncfusion® Blazor NuGet packages and themes. We provide separate Blazor extension for both Visual Studio 2022 and Visual Studio 2019. +The Syncfusion® Blazor extension for Visual Studio streamlines working with Syncfusion® Blazor components by configuring the required Syncfusion® NuGet packages and themes. Separate extensions are available for Visual Studio 2022 and Visual Studio 2019. -[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) +[Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) -[Visual Studio 2019](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) +[Download the Visual Studio 2019 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) -The Syncfusion® Blazor extensions provides the following add-ins in Visual Studio: +The Syncfusion® Blazor extension provides the following add-ins in Visual Studio: -[Project-Template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion® Blazor component. +[Project template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion®Visual Blazor component. -[Code Generator](code-generator): Adds Syncfusion® Blazor component code in razor file at required place. +[Code generator](code-generator): Adds Syncfusion® Blazor component code in razor file at required place. -[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by importing the necessary Syncfusion® NuGet packages. +[Convert project](convert-project): Converts an existing Blazor Web Application to a Syncfusion® Blazor Web Application by adding the required Syncfusion® NuGet packages and theme. -[Upgrade project](upgrade-project): Upgrades the existing Syncfusion® Blazor Web Application from one Essential Studio® version to another version. \ No newline at end of file +[Upgrade project](upgrade-project): Upgrades an existing Syncfusion® Blazor Web Application from one Essential Studio version to another. diff --git a/blazor/visual-studio-integration/scaffolding.md b/blazor/visual-studio-integration/scaffolding.md index d4cf8b7872..4f9db8d2eb 100644 --- a/blazor/visual-studio-integration/scaffolding.md +++ b/blazor/visual-studio-integration/scaffolding.md @@ -1,59 +1,59 @@ --- layout: post -title: Scaffolding in Blazor Application | Syncfusion -description: Learn here about scaffolding using Syncfusion Blazor Extension for Visual Studio to quickly add code to reduce the amount of development time. +title: Scaffolding in Blazor Applications | Syncfusion +description: Learn how to use the Syncfusion Blazor extension for Visual Studio to scaffold pages and code, accelerating data-driven development. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Syncfusion® Blazor Scaffolding +# Syncfusion® Blazor scaffolding -Syncfusion® provides **Visual Studio Scaffolding** for the Syncfusion® Blazor platform, allowing you to quickly add code that interacts with data models, reducing the time required for developing data operations in your application. Scaffolding simplifies the creation of Razor pages and Controller action methods for Syncfusion® Blazor controls such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. +Syncfusion® provides Visual Studio scaffolding for the Syncfusion® Blazor platform to quickly add code that interacts with data models, reducing development time for data operations. Scaffolding simplifies creating Razor pages and controller action methods for Syncfusion® Blazor components such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. -N> Check that at least one Entity Framework model exists, and the application has been compiled once. If no Entity Framework model exists in your application, refer to this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) to generate the Entity Framework model. After the model file has been added, check that the required DBContext and properties are added. Now, build the application, and try scaffolding. If any changes made in the model properties, rebuild the application once before perform scaffolding. +N> Ensure that at least one Entity Framework Core model exists and that the application has been built once. If a model does not exist, see the Microsoft documentation for creating an [Entity Framework Core model](https://learn.microsoft.com/en-us/ef/core/modeling/). After adding the model, verify that the required DbContext and properties are present. Build the application before running scaffolding. If model properties change, rebuild the application before scaffolding again. -N> The Syncfusion® Blazor Scaffolder is available from `v17.4.0.39` for Blazor server-side application and provided the Scaffolding support to Blazor client-side application from `v18.4.0.39`. +N> The Syncfusion® Blazor Scaffolder is available from `v17.4.0.39` for Blazor Server applications and includes support for Blazor WebAssembly (client) applications starting with `v18.4.0.39`. ## Add a scaffolded item -The steps below assist you to how to add a scaffolded item to your Blazor application. +The following steps describe how to add a scaffolded item to a Blazor application. -N> Before use the Syncfusion® Blazor Scaffolding, 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, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor scaffolding, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If it is not installed, follow the steps in the [download and installation](download-and-installation) topic. -1. If the application type is **Blazor ServerSide**, right-click the **Pages** folder in the Solution Explorer, click **Add**, and then select **New Scaffolded Item..** +1. For a **Blazor Server** application, right-click the **Pages** folder in Solution Explorer, select **Add**, and then choose **New Scaffolded Item...** ![Scaffolded add-in from server project](images/Add_scaffold_Serverside.png) - If the application type is **Blazor Hosted**, right-click the **Controllers** folder from **{Project Name}.Server** application in the Solution Explorer, click **Add**, and then select **New Scaffolded Item**. + If the application type is **Blazor Hosted**, right-click the **Controllers** folder from **{Project Name}.Server** application in the Solution Explorer, click **Add**, and then select **New Scaffolded Item...**. ![Scaffolded add-in from the hosted project](images/Add_scaffold_hosted.png) -2. In the **Add New Scaffolded item** dialog, select **Syncfusion® Blazor Scaffolder** and then click **‘Add’**. +2. In the **Add New Scaffolded Item** dialog, select **Syncfusion Blazor Scaffolder** and then click **Add**. ![Choose Syncfusion Scaffolding from Visual Studio Add scaffold dialog](images/Syncfusion_scaffolder.png) -3. In the Syncfusion® UI Scaffolder dialog, select the desired control to perform scaffolding, and then click **Next**. +3. In the Syncfusion® UI Scaffolder dialog, select the desired component to scaffold, and then click **Next**. ![Choose required control](images/Control_Window.png) -4. The Syncfusion® UI Scaffolder dialog for the selected control will be displayed. As per the application requirements, follow these steps to set up your application. +4. The Syncfusion® UI Scaffolder dialog for the selected component appears. Follow these steps to configure the application. **Select Data Source Type** - 1. Local Data (default selection) + 1. Local data (default) - To set up your application with local data, first enter the **Controller/Service name** and then enter the **Razor page name**. Next, select the required **Model class** for the active application and choose the relevant **Data context class**. Finally, click **Next** to continue. + To use local data, enter the **Controller/Service name** and the **Razor page name**. Then select the required **Model class** and the corresponding **Data context class**. Click **Next** to continue. ![Choose required Model](images/Model_Window_Local.png) - N> We are introducing Adaptor types in Blazor scaffolding for remote data. + N> Adaptor types are available in Blazor scaffolding for remote data. - 2. Remote Data + 2. Remote data - To set up your application with remote data, first enter the **Razor page name**, choose the **Adaptor type**, and then enter the valid **URL**. Next, enter the **TValue**. Finally, click **Next** to continue. + To use remote data, enter the **Razor page name**, choose an **Adaptor type**, and provide a valid **URL**. Then specify the **TValue**. Click **Next** to continue. N> In the DataGrid and TreeGrid controls, when selecting the **URL adaptor** in the **Adaptor type**, an additional **Remote service** option will appear. You need to select either the **Localhost URL** or **API URL**. If you select the Localhost URL, enter the **Controller/Service** name. Then, select the required Model class for the active application and choose the relevant **Data context class**. Finally, click **Next** to continue. If you select the **API URL**, enter the valid **URL**. Next, enter the **TValue**. Finally, click **Next** to continue. @@ -65,67 +65,67 @@ N> Before use the Syncfusion® Blazor Scaffolding, check whether the Syncfusion However, if you wish to perform CRUD operations, you need to provide a valid link that handles these operations. This link should point to an endpoint or service capable of managing the database operations required by your application. By providing this link, you ensure that your application can effectively interact with the back-end service to perform CRUD operations. - For **ServerSide Application**, both Local data and Remote data types will be available. + For a **Blazor Server** application, both local data and remote data types are available. ![Choose required selected control features for the serverside project](images/Feature_Window_serverside.png) - For **Hosted Application**, Remote data type only available. + For a **Hosted Application**, only the remote data type is available. ![Choose required selected control features for the hosted project](images/Fetaure_window_hosted.png) -5. In the Syncfusion® UI Scaffolder, the dialog for the selected control feature will open. Choose the required features, update the necessary data fields, and then click **Add**. +5. In the Syncfusion® UI Scaffolder, the dialog for the selected component features opens. Choose the required features, update the necessary data fields, and then click **Add**. ![Choose required selected control features for the hosted project](images/Fetaure_window_hosted_feature.png) -6. With the selected features of the Syncfusion® control code snippet, the **Controller/Service** file and the corresponding **Razor** files are generated. +6. Based on the selected features, the **Controller/Service** file and the corresponding **Razor** files are generated. - If you select **Local Data**, the service file and razor file will be added to the application. + If **Local data** is selected, the service file and Razor file are added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_local_data.png) - If you select **Remote Data with Localhost URL**, the controller file and razor file will be added to the application. + If **Remote data with Localhost URL** is selected, the controller file and Razor file are added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data.png) - If you choose **Remote Data with Web API adaptor types**, the razor file will be added to the application. + If **Remote data with Web API adaptor** is selected, the Razor file is added to the application. ![Required Controller and Razor files added in the project for the selected control](images/Files_for_remote_data_adaptor.png) 7. Then, add navigation to the created razor file based on your requirement to open on the webpage. -8. 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?_ga=2.11237684.1233358434.1587355730-230058891.1567654773) post for understanding the licensing changes introduced in Essential Studio®. +8. 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) post for understanding the licensing changes introduced in Essential Studio®. -## Syncfusion® Blazor Command-line Scaffolding +## Syncfusion® Blazor command-line scaffolding -The **Scaffolding command-line** for Syncfusion® Blazor allows you to quickly add code that interacts with data models, reducing the time required to develop data operations in your application. Scaffolding simplifies the creation of view files and Controller action methods for Syncfusion® Blazor controls such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. +The Syncfusion® Blazor command-line scaffolding helps quickly add code that interacts with data models, reducing the time required to develop data operations. It simplifies creating view files and controller action methods for Syncfusion® Blazor components such as DataGrid, Charts, Scheduler, Diagram, Tree Grid, Rich Text Editor, Document Editor, and PDF Viewer. N> Verify that at least one Entity Framework model exists. If your application lacks an Entity Framework model, use this [documentation](https://www.freecodecamp.org/news/how-to-create-an-application-using-blazor-and-entity-framework-core-1c1679d87c7e/) to create one. After you've added the model file, double-check that the necessary DBContext and properties have been added. Now, build the application and experiment with scaffolding. If any changes made in the model properties, rebuild the application once before perform scaffolding. -## Install Command-line Scaffolding +## Install command-line scaffolding -Install **syncfusion.scaffolding** tool globally by using below command. +Install the **syncfusion.scaffolding** tool globally using the following command. ```dotnet tool install -g syncfusion.scaffolding``` -## Update Command-line scaffolding +## Update command-line scaffolding -Update **syncfusion.scaffolding** tool globally by using below command. +Update the **syncfusion.scaffolding** tool globally using the following command. ```dotnet tool update -g syncfusion.scaffolding``` -## Add a scaffolded item from command-line +## Add a scaffolded item from the command line -The steps below will assist you to how to add a scaffolded item from command-line to your Blazor application. +The following steps describe how to add a scaffolded item from the command line to a Blazor application. -N> Before adding the scaffolded item from command-line, check whether the **dotnet-aspnet-codegenerator** tool is installed or not by **dotnet tool list -g** command in command prompt. if it is not installed, then install **dotnet-aspnet-codegenerator** tool globally by using this command **dotnet tool install -g dotnet-aspnet-codegenerator**. +N> Before adding a scaffolded item from the command line, verify that the **dotnet-aspnet-codegenerator** tool is installed by running `dotnet tool list -g`. If it is not installed, install it globally with `dotnet tool install -g dotnet-aspnet-codegenerator`. -1. After installed syncfusion.scaffolding tool, we can invoke syncfusion_scaffold command and it shows the available controls +1. After installing the syncfusion.scaffolding tool, run the `syncfusion_scaffold` command to view available components. **syncfusion_scaffold** ![CommandLine Scaffold Available Controls](images/AvailableControl.png) -2. To add a scaffolded item from command-line you must invoke syncfusion_scaffold application like below syntax +2. To add a scaffolded item from the command line, use the following syntax. **syncfusion_scaffold [control][arguments]** @@ -147,17 +147,17 @@ N> Before adding the scaffolded item from command-line, check whether the **dotn | --is-all-day | Set IsALLDay for Scheduler Event. | Scheduler | | -did|--diagram-id | Id of Diagram layout. | Diagram | -3. If you run the syncfusion_scaffold [control] command, the parameters of control shown like below image. +3. Running `syncfusion_scaffold [control]` displays the available parameters for the specified component. ![control parameter details](images/controlparameter.png) -4. Run the following command to generate controller and view files through command-line by passing required arguments of the given control. +4. Run the following command to generate controller and view files from the command line by passing the required arguments for the specified component. ```syncfusion_scaffold {controlName} --project "{projectFileNamewithPath}" --model {model} -dc {dbContext} -cname {controllerName} -vname {viewName} [controlMantoryParameter] [controlMantatoryParameterValue]``` ![CommandLine Scaffold](images/commandline.png) -5. As we can see controller and view files generated successfully and also added the Syncfusion® NuGet packages and styles which is required to render Syncfusion® control. +5. After generation, the controller and view files are created successfully, and the required Syncfusion® NuGet packages and styles are added to render the component. ![Blazor added Files](images/blazorfile.png) @@ -165,10 +165,10 @@ N> Before adding the scaffolded item from command-line, check whether the **dotn -## How to render Syncfusion® control? +## How to render a Syncfusion® component -Refer to the following UG links to render Syncfusion® control after performing scaffolding: +Refer to the following user guide links to render a Syncfusion® component after scaffolding: -WebAssembly App: [Configure Blazor components using Syncfusion® Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +Blazor WebAssembly App: [Configure Blazor components using the Syncfusion® Blazor component NuGet package](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -Blazor Server App: [Configure Blazor components using Syncfusion® Blazor Component NuGet Package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file +Blazor Server App: [Configure Blazor components using the Syncfusion® Blazor component NuGet package](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/blazor/visual-studio-integration/template-studio.md b/blazor/visual-studio-integration/template-studio.md index f3b8977dd7..9d2016e64c 100644 --- a/blazor/visual-studio-integration/template-studio.md +++ b/blazor/visual-studio-integration/template-studio.md @@ -1,21 +1,21 @@ --- layout: post -title: Template Studio in Blazor - Syncfusion -description: Learn here about how to create the Blazor application using Syncusion® Blazor Components with the help of template studio. +title: Template Studio for Blazor | Syncfusion +description: Learn here about how to create a Blazor application using Syncfusion Blazor components with the Template Studio in Visual Studio 2022. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- # Syncfusion® Blazor Template Studio -Syncfusion® provides the Blazor Template Studio, which allows you to create a Syncfusion® Blazor application using Syncfusion® components. The Syncfusion® Blazor app is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® components. +Syncfusion® provides the Blazor Template Studio, which creates a Syncfusion® Blazor application preconfigured with the required Syncfusion® NuGet packages, namespaces, styles, and component render mode. The Template Studio offers an intuitive project wizard to guide creation of an application with Syncfusion® components. -The steps below will assist you to create your **Syncfusion® Blazor Application** through **Visual Studio 2022**: +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. +> **Note:** The Syncfusion® Blazor extensions for Visual Studio 2019 are available only for Essential Studio® versions 20.3.0.56 and earlier. -N> 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, 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. +N> 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 it is not installed, follow the steps in the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) topic. 1. Open Visual Studio 2022. @@ -29,7 +29,7 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu **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. + Choose **File -> New -> Project** from the menu. This opens the new project dialog. Find Syncfusion® templates for Blazor by selecting the **Syncfusion** project type filter or by entering **Syncfusion** in the search box. ![CreateNewWindow](images/createnewwindow.png) @@ -45,7 +45,7 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu 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 SDK version | Supported Syncfusion® Blazor application type | | ---------------- | -------------------------------------------- | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor Web App | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion® Blazor WebAssembly App | @@ -76,11 +76,11 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu ![WebAppTemplate](images/webapptemplate.png) - In the **Syncfusion® Blazor WebAssembly App** application type, you can choose Progressive Web Application. + In the **Syncfusion Blazor WebAssembly App** project type, choose Progressive Web Application (PWA). ![WASMTemplate](images/wasmtemplate.png) - > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + > **Note:** The Progressive Web Application option is available when .NET 8.0 or later is installed. 5. Click either **Next** or the **Controls** tab. The Syncfusion® Blazor components you can add to the application are listed. @@ -96,22 +96,22 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu N> **Note:** Choose at least one control to enable the Features and Configuration tab. -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. +6. Click **Next** or select the **Features** tab to review and choose features for the selected controls. -7. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. +7. Click **Next** or select the **Configuration** tab. Configure the target .NET version (.NET 9.0 or .NET 8.0), theme, HTTPS configuration, localization, authentication type, and options specific to Blazor Web App or Blazor WebAssembly Application types. Depending on your Syncfusion® Blazor Application Type, refer to the table below for supported authentication types. - | Syncfusion® Blazor Application Type | Supported Authentication Types | + | 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 Web App | None, Individual Accounts | + | Syncfusion® Blazor WebAssembly App | None, Individual Accounts, Microsoft Identity Platform | 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 Progressive Web Application option. + If you choose the **Blazor WebAssembly App** application type, you can enable or disable the Progressive Web Application option. ![WASMConfiguration](images/wasmconfig.png) @@ -121,11 +121,11 @@ N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfu ![ProjectDetails](images/rightsideprojectdetails.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 selected Syncfusion® component. +8. Click **Create**. The Syncfusion® Blazor application is created with the required Syncfusion® NuGet packages, styles, and the render code for the selected Syncfusion® components. ![Readme](images/readme.png) -9. The Syncfusion® Blazor application configures with most recent Syncfusion® Blazor NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® components. +9. The generated project is configured with the latest Syncfusion® Blazor NuGet package version, selected theme, namespaces, chosen authentication, and component render code for the selected components. 10. 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®.