Syncfusion provides the Blazor Template Studio to create a Syncfusion Blazor application with Syncfusion components. The Syncfusion Blazor application is created with the required Syncfusion NuGet references, namespaces, styles, and component render code. The Template Studio provides an easy-to-use project wizard that teaches you how to create an application with Syncfusion components.
The following steps will help you create your Syncfusion Blazor Application through Visual Studio 2019:
To create a Syncfusion Blazor project, use either of the following options:
Option 1
Choose Extension -> Syncfusion -> Essential Studio for Blazor -> Create New Syncfusion Project… from the Visual Studio menu.
Option 2
Select File -> New -> Project. This opens a new dialog to create a new project. The templates provided by Syncfusion for Blazor can be obtained by filtering the project type for Syncfusion, or by using Syncfusion as the keyword in the search option.
Select the Syncfusion Blazor Template Studio and click Next.
The Template Studio wizard for configuring the Syncfusion Blazor app will appear. Select the Blazor type.
Project type section
Choose one of the Syncfusion Blazor project types:
In the Syncfusion Blazor WebAssembly App project type, we can choose ASP.NET Core hosted, Progressive Web Application, or both.
Note: The Progressive Web Application will be enabled if .NET Core version 3.1.200 or higher is installed.
Click either Next or the Controls tab. The Syncfusion Blazor components you can add to the application are listed.
Choose the required controls by clicking Add.
To unselect the added control, use either of the following options:
Option 1: Click Remove in the corresponding control box.
Option 2: Click Delete in the control list from Project Details.
Note: Choose at least one control to enable the Features and Configuration tab.
Click either Next or the Configuration tab, and the Configuration section will be loaded. You can choose the required .NET Core version, themes, https configuration, and Blazor Web Assembly project types (ASP.NET Core hosted and Progressive Web Application).
Note: ASP.NET Core hosted and Progressive Web Application options are only visible for the Blazor Web Assembly App project type.
Project details section
You can change the configuration details below in the Project Details section to change the project type, delete controls, or change the configurations.
The latest Syncfusion Blazor NuGet packages, styles, namespaces, and component render code for Syncfusion components are added in the created application.
The following NuGet packages can be added as NuGet references based on application type.
Syncfusion Blazor NuGet packages | Application type |
---|---|
Syncfusion.Blazor |
Syncfusion Blazor Server App Syncfusion Blazor WebAssembly App Syncfusion Blazor WebAssembly App (ASPNET Core hosted) Syncfusion Blazor WebAssembly App (Progressive Web Application) Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) |
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) Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) |
The installed Syncfusion extension version of a NuGet package will be added as reference entry if there is no internet connection. You have to restore the NuGet packages when internet becomes available.
The selected theme is added from Syncfusion NuGet and its reference at these applications locations in Blazor.
Application type | File location |
---|---|
Syncfusion Blazor Server App | {Project location}\Pages\_Host.cshtml |
Syncfusion Blazor WebAssembly App (ASPNET Core hosted) Syncfusion Blazor WebAssembly App (ASPNET Core hosted and Progressive Web Application) |
{Client Project location}\wwwroot\index.html |
Syncfusion Blazor WebAssembly App Syncfusion Blazor WebAssembly App (Progressive Web Application) |
{Project location}\wwwroot\index.html |
The Syncfusion.Blazor namespaces are added in the _imports.razor
file.
The selected Syncfusion Blazor components and features render code added as .razor files in the pages folder.
You can run the application and see the Syncfusion components you selected. Select a component to see component output.
You can select a culture language in combobox at top right on the page to apply the culture in the application.
Note: Above combobox will be enabled in sample output only if localization option is selected in configuration window from Blazor Template Studio wizard.