Add Syncfusion - Code

Client project

wwwroot > index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorCountriesWasm</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="BlazorCountriesWasm.Client.styles.css" rel="stylesheet" />
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Pages > CountryListPage.razor

@page "/countrylist"

@inject ICountryService CountryService;

<PageTitle>Countries List</PageTitle>

<h3>Countries List</h3>

<SfGrid DataSource="@countries">
    <GridColumns>
        <GridColumn Field="@nameof(Country.CountryId)"
                    HeaderText="Country ID"
                    TextAlign="@TextAlign.Left"
                    Width="20">
        </GridColumn>
        <GridColumn Field="@nameof(Country.CountryName)"
                    HeaderText="Country Name"
                    TextAlign="@TextAlign.Left"
                    Width="80">
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {

    List<Country> countries = new List<Country>();

    protected override async Task OnInitializedAsync()
    {
        await CountryService.GetCountries();

        countries = new();

        foreach (var country in CountryService.Countries)
            countries.Add(country);
    }
}

_Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorCountriesWasm.Client
@using BlazorCountriesWasm.Client.Shared
@using BlazorCountriesWasm.Client.Services.CountryService
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Popups

Program.cs

global using BlazorCountriesWasm.Client.Services.CountryService;
global using BlazorCountriesWasm.Shared;
using BlazorCountriesWasm.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Your Licence Key");

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ICountryService, CountryService>();
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Replace "Your Licence Key" with the licence key obtained from Syncfusion.

Powered by Publii