syncfusion-blazor-common

# Syncfusion Blazor Getting Started Setup and configuration guide for Syncfusion Blazor components in Blazor Web Apps. ## When to Use Use this skill when you need to: - Set up a new Blazor project with Syncfusion Blazor components - Create a Blazor Web App with specific .NET version targeting (net8.0, net9.0, net10.0, etc.) - Add Syncfusion components (Grid, Button, etc.) with features based on context - Optimize script loading with static assets or CDN - Set up bUnit testing for Syncfusion components ## Quick Reference - **Getting Started**: See [getting-started.md](references/getting-started.md) for full project setup steps - **Scripts & CDN**: See [add-script-reference-and-cdn.md](references/add-script-reference-and-cdn.md) for script loading options - **bUnit Testing**: See [bunit-setup.md](references/bunit-setup.md) for unit testing setup - **Localization & Globalization**: See [localization-globalization.md](references/localization-globalization.md) for culture and localization setup ## Prerequisites - .NET 8+ SDK - Blazor Web App project - Syncfusion account ([free trial](https://www.syncfusion.com/account/manage-trials/start-trials)) - NuGet package access ## 1. Getting Started **Detailed guide**: [getting-started.md](references/getting-started.md) ### Quick Setup 1. Create Blazor Web App with your chosen render mode and explicit .NET version (e.g., `.NET 10`) 2. Install `Syncfusion.Blazor.Grid` + `Syncfusion.Blazor.Themes` NuGet packages. All individual packages are listed [here](https://blazor.syncfusion.com/documentation/nuget-packages) 3. Add `@using Syncfusion.Blazor` and relevant component namespaces to `_Imports.razor` 4. Register `builder.Services.AddSyncfusionBlazor()` in `Program.cs` 5. Add theme CSS and script references to `App.razor` 6. Use Syncfusion components in your pages **Key Rule**: For Auto/WASM modes → register in **both** server and client projects **Important**: Always specify the target .NET framework version when creating projects to ensure compatibility ### Quick Start Options - **Blazor Playground**: Browser-based, no local install - **Template Studio**: Pre-configured VS/VS Code project templates ## 2. Script References and CDN **Detailed guide**: [add-script-reference-and-cdn.md](references/add-script-reference-and-cdn.md) ### Script Loading Options | Method | Best For | |--------|----------| | **Static Web Assets** (Recommended) | Optimal performance, offline support | | **CDN** | Cloud-hosted, quick setup | | **Individual Scripts** | Minimal component usage | ## 3. bUnit Testing **Detailed guide**: [bunit-setup.md](references/bunit-setup.md) Unit test Syncfusion Blazor components with [bUnit](https://bunit.dev). ### Required Setup Install `bunit` NuGet package, then register in each test: ```csharp using var ctx = new TestContext(); ctx.Services.AddSyncfusionBlazor() .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>()); ctx.Services.AddOptions(); ``` ### Test Pattern 1. `RenderComponent<TPage>()` → render 2. `FindComponent<SfButton>()` → locate 3. `.Click()` → interact 4. `MarkupMatches(...)` → assert Works with xUnit and NUnit (use `Bunit.TestContext` for NUnit to avoid naming conflicts) ## 4. Localization and Globalization **Detailed guide**: [localization-globalization.md](references/localization-globalization.md) Configure multi-language support and culture-specific formatting for Syncfusion Blazor components. ### Key Concepts - **Internationalization (i18n)**: Parsing and formatting dates, times, numbers, and currencies - **Localization (l10n)**: Adding culture-specific customizations and translating UI text - **Globalization**: Combines both i18n and l10n ### Quick Setup 1. Download and add culture-based `.resx` resource files from [GitHub](https://github.com/syncfusion/blazor-locale) - **ASK PERMISSION BEFORE DOWNLOAD THIS** 2. Create a `SyncfusionLocalizer` class implementing `ISyncfusionStringLocalizer` 3. Register in `Program.cs`: ```csharp builder.Services.AddSyncfusionBlazor(); builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer)); ``` 4. Set culture statically or dynamically (server, WebAssembly, or MAUI apps) 5. Create a `CultureSwitcher` component for dynamic culture selection