diff --git a/Extension/NETMAUI-Extension/JetBrains/Essential-UI-Kit.md b/Extension/NETMAUI-Extension/JetBrains/Essential-UI-Kit.md new file mode 100644 index 00000000..46597d45 --- /dev/null +++ b/Extension/NETMAUI-Extension/JetBrains/Essential-UI-Kit.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Getting Started | Essential® UI Kit for .NET MAUI Plugin | Syncfusion +description: How to add and use the Essential® UI Kit for .NET MAUI Syncfusion templates in your .NET MAUI project (JetBrains Rider guidance). +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Essential® UI Kit for .NET MAUI + +This guide explains how to integrate Syncfusion® MAUI UI Kit templates into a .NET MAUI project using JetBrains Rider, providing ready-to-use XAML pages along with corresponding View and ViewModel classes, resource files, and all necessary Syncfusion® NuGet package references. + +N> Before using the **Essential® UI Kit for .NET MAUI - Syncfusion®**, ensure that the plugin is installed in JetBrains Rider. To check, go to **Settings > Plugin >Installed** . If the plugin is not installed, follow the steps in the [download and installation](download-and-installation) help guide to install it. + +**Add UI Kit templates to a .NET MAUI project** + +1. Open your .NET MAUI project in Rider and right‑click the project and choose `Tools` → `Essential UI Kit for .NET MAUI`. + + ![Syncfusion Essential UI Kit for .NET MAUI Context menu in MAUI](images/Menu.png) + +2. The category dialogue wizard will open with pre-defined templates. + + ![Add new item dialog box](images/Maui-Wizard.png) + +3. Choose one or more page templates (for example, `About Us Page With Cards`), then click `Next`. + +4. Enter a name for the new page and click `Add` to scaffold the XAML page, View, ViewModel, model classes, and resources. + + ![Edit page Name in MAUI UI Kit Plugin](images/Edit-Wizard.png) + +5. The selected pages will be added along with View, View Model, Model classes, resource files and Syncfusion® NuGet package reference. + + ![Added files in MAUI Project](images/ViewFiles.png) + + ![Added Resources in MAUI Project](images/Resources.png) + + ![Added NuGet in MAUI Project](images/Packages.png) + +6. Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages 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), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. 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®. + +**Set the new page as the app start page** + +Open `App.xaml.cs` and update `CreateWindow` to return your new page. Example — if you added `LoginWithSocialIcon`: + +```csharp +protected override Window CreateWindow(IActivationState? activationState) +{ + return new Window(new LoginWithSocialIcon()); +} +``` + +**Troubleshooting** + +- Templates don’t appear: restart Rider after installing the extension or verify the plugin is enabled. + +- NuGet packages failing to restore: ensure your NuGet sources are available and that the project targets a supported MAUI framework. + +- License prompts persist: confirm the license key is registered early in app startup and matches your Syncfusion account. + + diff --git a/Extension/NETMAUI-Extension/JetBrains/download-and-installation.md b/Extension/NETMAUI-Extension/JetBrains/download-and-installation.md new file mode 100644 index 00000000..26584d33 --- /dev/null +++ b/Extension/NETMAUI-Extension/JetBrains/download-and-installation.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Download and Installation | Essential® UI Kit | Syncfusion +description: How to download the Essential® UI Kit for .NET MAUI Plugin from the JetBrains marketplace site and from the plugins View tab. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Download and Setup - Essential® UI Kit for .NET MAUI Kit Plugin + +Syncfusion® publishes the Essential® UI Kit for .NET MAUI Plugin in [JetBrains marketplace](https://plugins.jetbrains.com/plugin/28456-document-viewer). You can either install it from JetBrains Rider or download and install it from the JetBrains marketplace. + +## Prerequisites + +Before getting started, make sure your environment meets the following requirements: + +* A JetBrains IDE - Rider + + > The minimum version of the JetBrains IDE is 2024.2 to use the Essential® UI Kit for .NET MAUI Kit plugin. + + +## Install through the JetBrains Rider + +The following steps explain how to install the Essential® UI Kit for .NET MAUI plugin from JetBrains Rider. + +1. Open JetBrains Rider. + +2. Navigate to **File > Settings > Plugins**. + +3. Select the **Marketplace** tab and type **Essential® UI Kit for .NET MAUI** in the search field, Click the Install button on the plugin. + + ![Installing Essential UI Kit for .NET MAUI Plugin](images/Installation.png) + +4. After the installation completes, restart your JetBrains Rider if prompted. + +## Install plugin from disk + +The following steps explain how to install the Essential® UI Kit for .NET MAUI Kit plugins from JetBrains Rider from the disk. + +1. Download the plugin archive (ZIP or JAR) of [Essential® UI Kit for .NET MAUI](https://plugins.jetbrains.com/plugin/28456-document-viewer). + +2. Press `Ctrl` + `Alt` + `S` to open settings and then select Plugins. + +3. On the Plugins page, click The Settings button and then click Install Plugin from Disk. + +4. Select the plugin archive file and click OK. + +5. Click OK to apply the changes and restart the IDE if prompted. \ No newline at end of file diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Edit-Wizard.png b/Extension/NETMAUI-Extension/JetBrains/images/Edit-Wizard.png new file mode 100644 index 00000000..e26d74b7 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Edit-Wizard.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Installation.png b/Extension/NETMAUI-Extension/JetBrains/images/Installation.png new file mode 100644 index 00000000..93627a90 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Installation.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Maui-Wizard.png b/Extension/NETMAUI-Extension/JetBrains/images/Maui-Wizard.png new file mode 100644 index 00000000..32a41b05 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Maui-Wizard.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Menu.png b/Extension/NETMAUI-Extension/JetBrains/images/Menu.png new file mode 100644 index 00000000..75ef18d6 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Menu.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Packages.png b/Extension/NETMAUI-Extension/JetBrains/images/Packages.png new file mode 100644 index 00000000..edad3777 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Packages.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/Resources.png b/Extension/NETMAUI-Extension/JetBrains/images/Resources.png new file mode 100644 index 00000000..547eb131 Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/Resources.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/images/ViewFiles.png b/Extension/NETMAUI-Extension/JetBrains/images/ViewFiles.png new file mode 100644 index 00000000..f42a858a Binary files /dev/null and b/Extension/NETMAUI-Extension/JetBrains/images/ViewFiles.png differ diff --git a/Extension/NETMAUI-Extension/JetBrains/overview.md b/Extension/NETMAUI-Extension/JetBrains/overview.md new file mode 100644 index 00000000..d5d52390 --- /dev/null +++ b/Extension/NETMAUI-Extension/JetBrains/overview.md @@ -0,0 +1,14 @@ +--- +layout: post +title: Essential® UI Kit for .NET MAUI Plugin | Extension | Syncfusion +description: The Essential® UI Kit for .NET MAUI Plugin enables you to easily add templates for quickly building customizable cross-platform user interfaces in .NET MAUI. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Essential® UI Kit for .NET MAUI Plugin - JetBrains Rider + +## Overview + +The **Essential® UI Kit for .NET MAUI** offers a collection of ready-to-use XAML templates that help developers quickly build modern, cross-platform user interfaces. It follows a structured architecture with clear separation of View, ViewModel, and Model layers, making it easier to implement business logic and customize existing UI designs. The UI Kit also requires the integration of Syncfusion® NuGet packages for full functionality. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateNewProjectPalette.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateNewProjectPalette.png new file mode 100644 index 00000000..f1d400a1 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateNewProjectPalette.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png new file mode 100644 index 00000000..fd4e615b Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/RunProject.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/RunProject.png new file mode 100644 index 00000000..bfe064f8 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/RunProject.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/SelectSlnFormat.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/SelectSlnFormat.png new file mode 100644 index 00000000..f2374395 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/SelectSlnFormat.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/WebAppType1.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/WebAppType1.png new file mode 100644 index 00000000..daa8e18a Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/WebAppType1.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewproject.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewproject.png new file mode 100644 index 00000000..8ea24ca6 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewproject.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewprojectlocation.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewprojectlocation.png new file mode 100644 index 00000000..a619d53d Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewprojectlocation.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwindow.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwindow.png new file mode 100644 index 00000000..50a5dd6d Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwindow.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwizard.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwizard.png new file mode 100644 index 00000000..171fffa8 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createnewwizard.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createprojectvscode.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createprojectvscode.png new file mode 100644 index 00000000..5fc4a991 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/createprojectvscode.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/namenewproject.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/namenewproject.png new file mode 100644 index 00000000..04953e2b Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/namenewproject.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/readme.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/readme.png new file mode 100644 index 00000000..262ea285 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/readme.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/webapptemplate.png b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/webapptemplate.png new file mode 100644 index 00000000..0f5aa62d Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/images/webapptemplate.png differ diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/installation.md b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/installation.md new file mode 100644 index 00000000..2309aeb0 --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/installation.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Syncfusion Web App Template Installation | Syncfusion +description: Learn here more about how to How to install and create a Syncfusion Blazor application using Syncfusion Web App Template. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion Web App Template Installation + +## Overview + +How to install and create a Syncfusion Blazor application using Syncfusion Web App Template + +> **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + +The fastest way to get started is with the official Syncfusion Web App Template. It creates a fully configured Blazor app with all dependencies, theming, and syncfusion blazor components. + +### Install the template + +```powershell +dotnet new install Syncfusion.Blazor.WebApp.Templates +``` +### Create a new project using Dotnet CLI + +#### Create a new Syncfusion Blazor Web App + +```powershell +dotnet new syncfusionblazorwebapp -n MyApp --interactivity Auto --framework net10.0 --configure-for-https true --all-interactive PerPage/component +``` + +#### Create a new Syncfusion Blazor Server App + +```powershell +dotnet new syncfusionblazorwebapp -n MyApp --interactivity Server --framework net9.0 --configure-for-https false --all-interactive Global +``` + +#### Create a new Syncfusion Blazor WebAssembly App + +```powershell +dotnet new syncfusionblazorwebapp -n MyApp --interactivity WebAssembly --framework net8.0 --configure-for-https true --all-interactive PerPage/component +``` + +### Template Options + +Option | Default | Description +--- | ---: | --- +`-n`, `--name` | Required | Project name +`-f`, `--framework` | `net10.0` | Target framework (`net8.0`, `net9.0`, or `net10.0`) +`-int`, `--interactivity` | `Server` | Render mode (`Server`, `WebAssembly`, or `Auto`) +`-ai`, `--all-interactive` | `PerPage/component` | Interactive rendering enabled (`PerPage/component`, or `Global`) +`-https`, `--configure-for-https` | `true` | Enables an HTTPS endpoint + +Then run your new project: + +```powershell +cd MyApp +dotnet run +``` \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/overview.md b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/overview.md new file mode 100644 index 00000000..f4b24f31 --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/overview.md @@ -0,0 +1,18 @@ +--- +layout: post +title: Overview of Syncfusion Blazor Web App Template via NuGet | Syncfusion +description: Learn all about the Syncfusion Blazor Web App Template via NuGet for Visual Studio and Visual Studio Code, which simplifies integration. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Blazor Web App Template via NuGet + +The Syncfusion® Blazor Web App Template via NuGet simplifies using the Syncfusion® Blazor components by configuring the Syncfusion® Blazor NuGet packages and themes. We provide support Blazor template for Visual Studio, Visual Studio Code and Dotnet CLI. + +The Syncfusion® Blazor Web App Template via NuGet provides the following add-ins: + +[Visual Studio](Visual-Studio): Creates Syncfusion® Blazor applications with the required configuration for developing with Syncfusion® Blazor components in Visual Studio. + +[Visual Studio Code](Visual-Studio-Code): Creates Syncfusion® Blazor applications with the required configuration for developing with Syncfusion® Blazor components in Visual Studio Code. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio-code.md b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio-code.md new file mode 100644 index 00000000..92e33d7a --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio-code.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Create Blazor Web App Projects via NuGet | Syncfusion +description: Learn here about how to create syncfusion blazor application using Syncfusion Blazor Web App Template nuget for Visual Studio Code. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Creating a Syncfusion® Blazor Web App + +Syncfusion® provides the Blazor Web App Template 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 provides an easy-to-use project wizard that walks you through the process of creating an application with Syncfusion® components. + +N> Blazor project templates from `v17.4.0.39` are supported by the Syncfusion® Visual Studio Code project template. + +The instructions below assist you in creating **Syncfusion Blazor Applications** using **Visual Studio Code**: +1. Open the Command Palette (press **Ctrl+Shift+P**), type **New project**, and choose the **New project** command to view available templates. + + ![CreateNewProjectPalette](images/CreateNewProjectPalette.png) +2. In the palette search box type **Syncfusion**, then select the Syncfusion templates from the results. + + ![CreateSyncfusionProjectPalette](images/CreateSyncfusionProjectPalette.png) +3. Choose **Syncfusion Blazor Web App** and press **Enter**. When prompted, pick the folder where you want the new project created. + + ![CreateNewProjectLocation](images/createnewprojectlocation.png) +4. In the project dialog confirm the **Project name** and the **Solution (.sln) file** format, then press **Enter** to generate the project. + + ![NameNewProject](images/namenewproject.png) + ![SelectSlnFormat](images/SelectSlnFormat.png) + + N> Refer to the .NET SDK support for Syncfusion® Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + +5. Select either **Create a project** or the **Show all template options**. + + ![CreateProjectVSCode](images/createprojectvscode.png) + +6. In template options, you can customize the interactive render mode, interactivity location and https configuration based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 10.0](https://dotnet.microsoft.com/en-us/download/dotnet/10.0), [.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 | + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/WebAppType1.png) + + +7. Click **Create project** 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. You can run the application to see the Syncfusion® components. Click **F5** or go to **Run>Start Debugging**. + + ![Readme](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. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio.md b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio.md new file mode 100644 index 00000000..3642b55f --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebApp-Template-via-NuGet/visual-studio.md @@ -0,0 +1,72 @@ +--- +layout: post +title: Syncfusion Blazor Web App Template - Syncfusion +description: Learn here about how to create the Blazor application using Syncusion® Blazor Components with the help of Syncfusion Blazor Web App Template. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® Blazor Web App Template + +Syncfusion® provides the Blazor Web App Template, 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 includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® components. + +The steps below will assist you to create your **Syncfusion® Blazor Application** through **Visual Studio 2022 or 2026**: + +1. Open Visual Studio 2022 or 2026. + +2. To create a Syncfusion® Blazor application, Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates for Blazor can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/createnewwindow.png) + +3. Select the **Syncfusion Blazor Web App** and click **Next**. + + ![CreateNewWizard](images/createnewwizard.png) +4. The Syncfusion Blazor Web App wizard will open to configure your new project. Click **Next**. + + ![CreateNewProject](images/createnewproject.png) +5. Configure the project options (project type, interactivity mode, and interactivity location) in the wizard as needed. + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 10.0](https://dotnet.microsoft.com/en-us/download/dotnet/10.0), [.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 | + + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/webapptemplate.png) + +6. 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. + + ![Readme](images/readme.png) + +7. 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. + +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) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateNewProjectPalette.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateNewProjectPalette.png new file mode 100644 index 00000000..f1d400a1 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateNewProjectPalette.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png new file mode 100644 index 00000000..7bdde8b1 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/CreateSyncfusionProjectPalette.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/RunProject.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/RunProject.png new file mode 100644 index 00000000..728e6367 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/RunProject.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/SelectSlnFormat.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/SelectSlnFormat.png new file mode 100644 index 00000000..f2374395 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/SelectSlnFormat.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewproject.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewproject.png new file mode 100644 index 00000000..281cf469 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewproject.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewprojectlocation.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewprojectlocation.png new file mode 100644 index 00000000..a619d53d Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewprojectlocation.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwindow.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwindow.png new file mode 100644 index 00000000..50a5dd6d Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwindow.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwizard.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwizard.png new file mode 100644 index 00000000..8e292822 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createnewwizard.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createprojectvscode.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createprojectvscode.png new file mode 100644 index 00000000..5fc4a991 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/createprojectvscode.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/namenewproject.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/namenewproject.png new file mode 100644 index 00000000..04953e2b Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/namenewproject.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/readme.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/readme.png new file mode 100644 index 00000000..b5673e39 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/readme.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmType.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmType.png new file mode 100644 index 00000000..4223e429 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmType.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmtemplate.png b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmtemplate.png new file mode 100644 index 00000000..4f5aeed6 Binary files /dev/null and b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/images/wasmtemplate.png differ diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/installation.md b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/installation.md new file mode 100644 index 00000000..ffe5fecb --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/installation.md @@ -0,0 +1,47 @@ +--- +layout: post +title: Syncfusion WebAssembly App Template Installation | Syncfusion +description: Learn here more about how to How to install and create a Syncfusion Blazor application using Syncfusion WebAssembly App Template. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion WebAssembly App Template Installation + +## Overview + +How to install and create a Syncfusion Blazor application using Syncfusion WebAssembly App Template + +> **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + +The fastest way to get started is with the official Syncfusion WebAssembly App Template. It creates a fully configured Blazor app with all dependencies, theming, and syncfusion blazor components. + +### Install the template + +```powershell +dotnet new install Syncfusion.Blazor.WebAssemblyApp.Templates +``` +### Create a new project using Dotnet CLI + +#### Create a new Blazor WebAssembly (Standalone) App + +```powershell +dotnet new syncfusionblazorwasmapp -n MyApp --pwa true --framework net10.0 --configure-for-https true +``` + +### Template Options + +Option | Default | Description +--- | ---: | --- +`-n`, `--name` | Required | Project name +`-f`, `--framework` | `net10.0` | Target framework (`net8.0`, `net9.0`, or `net10.0`) +`-p`, `--pwa` | `true` | Supports Progressive Web Application +`-https`, `--configure-for-https` | `true` | Enables an HTTPS endpoint + +Then run your new project: + +```powershell +cd MyApp +dotnet run +``` \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/overview.md b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/overview.md new file mode 100644 index 00000000..6bfd2456 --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/overview.md @@ -0,0 +1,18 @@ +--- +layout: post +title: Overview of Syncfusion Blazor WebAssembly App Template via NuGet for Visual Studio and Visual Studio Code | Syncfusion +description: Learn all about the Syncfusion Blazor WebAssembly App Template via NuGet for Visual Studio and Visual Studio Code, which simplifies integration. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Blazor WebAssembly App Template via NuGet + +The Syncfusion® Blazor WebAssembly App Template via NuGet simplifies using the Syncfusion® Blazor components by configuring the Syncfusion® Blazor NuGet packages and themes. We provide support Blazor template for Visual Studio, Visual Studio Code and Dotnet CLI. + +The Syncfusion® Blazor WebAssembly App Template via NuGet provides the following add-ins: + +[Visual Studio](Visual-Studio): Creates Syncfusion® Blazor applications with the required configuration for developing with Syncfusion® Blazor components in Visual Studio. + +[Visual Studio Code](Visual-Studio-Code): Creates Syncfusion® Blazor applications with the required configuration for developing with Syncfusion® Blazor components in Visual Studio Code. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio-code.md b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio-code.md new file mode 100644 index 00000000..69742504 --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio-code.md @@ -0,0 +1,57 @@ +--- +layout: post +title: Create Blazor Webassembly App Projects via NuGet | Syncfusion +description: Learn here about how to create syncfusion blazor application using Syncfusion Blazor WebAssembly App Template nuget for Visual Studio Code. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Creating a Syncfusion® Blazor WebAssembly App + +Syncfusion® provides the Blazor WebAssembly App Template 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 provides an easy-to-use project wizard that walks you through the process of creating an application with Syncfusion® components. + +N> Blazor project templates from `v17.4.0.39` are supported by the Syncfusion® Visual Studio Code project template. + +The instructions below assist you in creating **Syncfusion Blazor Applications** using **Visual Studio Code**: +1. Open the Command Palette (press **Ctrl+Shift+P**), type **New project**, and choose the **New project** command to view available templates. + + ![CreateNewProjectPalette](images/CreateNewProjectPalette.png) +2. In the palette search box type **Syncfusion**, then select the Syncfusion templates from the results. + + ![CreateSyncfusionProjectPalette](images/CreateSyncfusionProjectPalette.png) +3. Choose **Syncfusion Blazor WebAssembly App** and press **Enter**. When prompted, pick the folder where you want the new project created. + + ![CreateNewProjectLocation](images/createnewprojectlocation.png) +4. In the project dialog confirm the **Project name** and the **Solution (.sln) file** format, then press **Enter** to generate the project. + + ![NameNewProject](images/namenewproject.png) + ![SelectSlnFormat](images/SelectSlnFormat.png) + + N> Refer to the .NET SDK support for Syncfusion® Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + +5. Select either **Create a project** or the **Show all template options**. + + ![CreateProjectVSCode](images/createprojectvscode.png) + +6. In template options, you can customize the project type, progressive web application support, and https configuration based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 10.0](https://dotnet.microsoft.com/en-us/download/dotnet/10.0), [.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 WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmType.png) + + +7. Click **Create project** 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. You can run the application to see the Syncfusion® components. Click **F5** or go to **Run>Start Debugging**. + + ![Readme](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. \ No newline at end of file diff --git a/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio.md b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio.md new file mode 100644 index 00000000..3039ddc4 --- /dev/null +++ b/Extension/Syncfusion-Blazor-WebAssemblyApp-Template-via-NuGet/visual-studio.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Syncfusion Blazor WebAssembly App Template - Syncfusion +description: Learn here about how to create the Blazor application using Syncusion® Blazor Components with the help of Syncfusion Blazor WebAssembly App Template. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® Blazor WebAssembly App Template + +Syncfusion® provides the Blazor WebAssembly App Template, 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 includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® components. + +The steps below will assist you to create your **Syncfusion® Blazor Application** through **Visual Studio 2022 or 2026**: + +1. Open Visual Studio 2022 or 2026. + +2. To create a Syncfusion® Blazor application, Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates for Blazor can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/createnewwindow.png) + +3. Select the **Syncfusion Blazor WebAssembly App** and click **Next**. + + ![CreateNewWizard](images/createnewwizard.png) +4. The Syncfusion Blazor WebAssembly App wizard will open to configure your new project. Click **Next**. + + ![CreateNewProject](images/createnewproject.png) +5. Configure the project options (project type, progressive web application support, and https configuration) in the wizard as needed. + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 10.0](https://dotnet.microsoft.com/en-us/download/dotnet/10.0), [.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 WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmtemplate.png) + + > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + +6. 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. + + ![Readme](images/readme.png) + +7. 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. + +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) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file diff --git a/extension-toc.html b/extension-toc.html index 570642fb..261660cd 100644 --- a/extension-toc.html +++ b/extension-toc.html @@ -319,6 +319,24 @@ +
  • + Syncfusion Blazor WebApp Template via NuGet + +
    • +
  • + Syncfusion Blazor WebAssemblyApp Template via NuGet + +
  • ASP.NET Core (Essential JS2) Extension