Search results

Getting started with Syncfusion Blazor Components in WebAssembly App using Visual Studio for Mac

03 Aug 2021 / 4 minutes to read

This article provides a step-by-step introduction to configure Syncfusion Blazor components setup,and also build and run a simple Blazor WebAssembly application using Visual Studio for Mac.

Note: Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this help topic for more information.

Prerequisites

.NET Core SDK 3.1.8 requires Visual Studio for Mac 8.7.6 or later.

.NET 5.0 requires Visual Studio 2019 for Mac 8.8 or later.

Create a Blazor WebAssembly project in Visual Studio for Mac

  1. Choose New from the Visual Studio for Mac dashboard.

new project in blazor

  1. Select Blazor WebAssembly App from the template, and then click Next button.

blazor template

  1. Continue with No Authentication selection in Authentication, and then click Next button.

blazor authentication

  1. Now, the Blazor WebAssembly App project configuration window will popup. Click Create button to create a new project after filling the Project name.

blazor project configuration

Installing Syncfusion Blazor packages in the application

You can use any one of the below standards to install the Syncfusion Blazor library in your application.

Using Syncfusion Blazor individual NuGet Packages [New standard]

Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides individual NuGet packages for our Syncfusion Blazor components. We highly recommend this new standard for your Blazor production applications. Refer to this section to know the benefits of the individual NuGet packages.

  1. Now, add Syncfusion.Blazor.Calendars NuGet package to the new application using the NuGet Package Manager. For more details about the available NuGet packages, refer to the Individual NuGet Packages documentation.
  2. Right-click the project, and then select Manage NuGet Packages.

nuget explorer

  1. Search Syncfusion.Blazor.Calendars keyword in the Browse tab and install Syncfusion.Blazor.Calendars NuGet package in the application.
  2. The Syncfusion Blazor Calendars package will be included in the newly created project once the installation process is completed.
  3. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/wwwroot/index.html page.
Copied to clipboard
<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

Warning: Syncfusion.Blazor package should not be installed along with individual NuGet packages. Hence, you have to add the above Syncfusion.Blazor.Themes static web assets (styles) in the application.

Using Syncfusion.Blazor NuGet Package [Old standard]

Warning: If you prefer the above new standard (individual NuGet packages), then skip this section. Using both old and new standards in the same application will throw ambiguous compilation errors.

  1. Now, install Syncfusion.Blazor NuGet package to the newly created application by using the NuGet Package Manager. Right-click the project, and then select Manage NuGet Packages.

nuget explorer

  1. Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in the application.

select nuget

  1. The Syncfusion Blazor package will be included in the newly created project once the installation process is completed.
  2. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/wwwroot/index.html page.
Copied to clipboard
<head>
    ....
    ....
   <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>

Note: The same theme file can be referred through the CDN version by using https://cdn.syncfusion.com/blazor/19.2.49/styles/bootstrap4.css.

Adding Syncfusion Blazor component and running the application

  1. Open ~/_Imports.razor file and import the Syncfusion.Blazor namespace.
Copied to clipboard
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars
  1. Open the ~/Program.cs file and register the Syncfusion Blazor Service.
Copied to clipboard
using Syncfusion.Blazor;

namespace WebApplication1
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            ....
            ....
            builder.Services.AddSyncfusionBlazor();
            await builder.Build().RunAsync();
        }
    }
}

Note: We can disable the dynamic script loading and refer to the scripts from the application end by using the IgnoreScriptIsolation parameter in AddSyncfusionBlazor() at the program.cs. For more details, please refer here for how to refer custom/CDN resources.

  1. Now, add the Syncfusion Blazor components in any .razor file in the ~/Pages folder. For example, the calendar component is added in the ~/Pages/Index.razor page.
Copied to clipboard
<SfCalendar TValue="DateTime"></SfCalendar>
  1. Run the application, the Syncfusion Blazor Calendar component will be rendered in the default web browser.

output