Syncfusion Blazor Template Studio

28 Mar 202212 minutes to read

Syncfusion provides the Blazor Template Studio, which allows you to create a Syncfusion Blazor application with Syncfusion components. The Syncfusion Blazor app is created with the required component Syncfusion NuGet references, namespaces, styles, and component render code. The Template Studio provides an easy-to-use project wizard that walks you through the process of creating an application with Syncfusion components.

The steps below will assist you to create your Syncfusion Blazor Application through Visual Studio 2019 or Visual Studio 2022:

Before use the Syncfusion Blazor Project Template, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the download and installation help topic.

  1. Open Visual Studio 2019 or Visual Studio 2022.

  2. To create a Syncfusion Blazor application, use either one of the following options:

    Option 1

    Choose Extension -> Syncfusion -> Essential Studio for Blazor -> Create New Syncfusion Project… from the Visual Studio menu.

    CreateMenu

    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.

    CreateNewWindow

  3. Select the Syncfusion Blazor Template Studio and click Next.

    CreateNewWizard

  4. The Syncfusion Blazor Template Studio wizard to configuring the Syncfusion Blazor app will be launched. Choose the Syncfusion Blazor application type.

    ProjectWizard

    .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022.

    Project type section

    Choose one of the Syncfusion Blazor application types:

    • Syncfusion Blazor Server App
    • Syncfusion Blazor WebAssembly App

    In the Syncfusion Blazor WebAssembly App application type, we can choose ASP.NET Core hosted, Progressive Web Application, or both.

    ProjectTypeWizard

    Note: The Progressive Web Application will be enabled if .NET Core version 3.1.200 or higher is installed.

  5. Click either Next or the Controls tab. The Syncfusion Blazor components you can add to the application are listed.

    Controls Section

    Choose the required control(s) by clicking the corresponding control box.

    To unselect the added control(s), use either 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.

    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.

  7. Click either Next or the Configuration tab, and the Configuration section will be loaded. You can choose the required (.NET 6.0, .NET 5.0 and .NET Core 3.1), themes, https configuration, localization option, authentication type (None, Individual Accounts, Microsoft Identity Platform, and Windows), and Blazor Web Assembly application 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 application type.

    Choose required Project Configuration

    Project details section

    You can change the application type, remove control(s) from the selected controls, or change the configurations in the Project Details section.

    Choose required Project Details

  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.

    Readme

  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 to generate and register the Syncfusion license key to your application. Refer to this blog post for understanding the licensing changes introduced in Essential Studio.

Authentication Configuration

We need to register the created application in Google Platform API Console for Individual Accounts and Azure Active Directory for Microsoft Identity Platform. From Google Platform API Console registration we can get the client id for Individual Accounts. From Azure Active Directory registration we can get the tenant id and application client id for Microsoft Identity Platform. We need to configure these id values in created applications then only application will be run correctly with authentication support.

Individual Accounts Authentication

Web Application and Progressive Web Application

  1. Go to below credentials page for the Google cloud platform API console.

    https://console.cloud.google.com/apis/credentials?project=aerobic-furnace-244104

  2. Click Create Credentials and OAuth Client Id.

    Google API console credentials page

    Google API Oauth client Id

  3. Select Application type as Web Application in client Id creation.

    ApplicationType

  4. Add your publish URL link as an Authorized URI and login URL as Redirected URI.

    RedirectedURI

  5. Click save then OAuth client id will be created and copy that credential.

    ClientIdCreation

  6. Add that Client Id, and RedirectUri in appsettings.json file of your application.

    ClinetIdConfiguration

  7. Change the build configuration bind as google from Local in program.cs file.

    buildconfigurationbind

Microsoft Identity Platform Authentication

Server Application

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Id token check box.

    Access token and Id token

  6. Get client tenant id and application id form overview page.

    Clinet tenat id

  7. Configure those client tenant id, application id, and domain in your application appsettings.json file.

    Project configuration

Web Application and Progressive Web Application

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Get client tenant id and application id form overview page.

    Clinet tenat id

  8. Configure those client tenant id and application id in your application appsettings.json file.

    Clinet ID and Tenant ID configuration

ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application

Client project Registration and Configuration
  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Get client tenant id and application id form overview page.

    Clinet tenat id

  8. Configure those client tenant id and application id in your application appsettings.json file.

    Clinet ID and Tenant ID configuration

Server project Registration and configuration
  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps

  2. Click New Registration in App Registration page.

    Server App Registration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Server Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Add a scope API in Expose an API page.

    Add scope API

  8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value.

    Add scope API configuration

  9. Get client tenant id and application id form overview page.

    Clinet tenat id

  10. Configure those client tenant id, application id, added scope api id, and domain in your application appsettings.json file.

    Project configuration

  11. Configure the scope API in client application program.cs file below highlighted place.

    Scope API configuration

Run application

You can run the application and see the Syncfusion components you selected. Select a component to see component output.

Blazor Template output page

You can select a culture language in combo box at top right on the output page to apply the culture in the application.

Blazor Template output page

Note: Above culture combo box will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard.

Register and Login Application

Individual Authentication

Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted

  1. For register the application, submit your email address and create a password.

    Register the application

  2. Confirming registration by clicking Click here to confirm your account.

    Register the confirmation

  3. Submit your registered email address and password to login the application.

    login to the application

Web Application and Progressive Web Application

  1. Login to the application using Gmail accounts.

    Google login

Microsoft Identity Platform

Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application

  1. Login to your application using your Microsoft account.

  2. Accept permission request of your application.

    Accept permission