WebApp

Blazor Form Validation

Validation with DataAnnotations public class Employee { [Required(ErrorMessage = "Name is required")] public string Name { get; set; } } @page "/employee" @using System.ComponentModel.DataAnnotations @using Microsoft.AspNetCore.Components.Forms <h3>Employee Form</h3> <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-group"> <label for="Name">Name</label> <InputText id="Name" @bind-Value="employee.Name" class="form-control" /> <ValidationMessage For="@(() => employee.Name)" /> </div> <button type="submit" class="btn btn-primary">Submit</button> </EditForm> @code { private Employee employee = new Employee(); } Validation with FluentValidation dotnet add package Blazored.FluentValidation public class EmployeeValidator : AbstractValidator<Employee> { public EmployeeValidator() { RuleFor(x => x.Name).NotEmpty().WithMessage("Name is required"); } } @page "/employee" @using FluentValidation @using FluentValidation.Results <h3>Employee Form</h3> <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit"> <FluentValidationValidator DisableAssemblyScanning="@true" /> <ValidationSummary /> <div class="form-group"> <label for="Name">Name</label> <InputText id="Name" @bind-Value="employee.Name" class="form-control" /> <ValidationMessage For="@(() => employee.Name)" /> </div> <button type="submit" class="btn btn-primary">Submit</button> </EditForm> Custom Validation

Blazor Globalization and Localization

Blazor applications can support multiple languages and cultures by using the globalization and localization features of .NET Core. This article describes how to implement globalization and localization in a Blazor application. Blazor WebAssembly <PropertyGroup> <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData> </PropertyGroup> dotnet add package Microsoft.Extensions.Localization Blazor Server builder.Services.AddCustomLocalization(); app.UseCustomLocalization();

Blazor JavaScript Interoperability

About JavaScript Location Load a script in the <head> tag <head> <script src="js/first.js"></script> <script> window.jsMethod = (methodParameter) => { ... }; </script> </head> Load a script in the <body> tag <body> <script src="js/first.js"></script> <script> window.jsMethod = (methodParameter) => { ... }; </script> </body> Colocate with the component Component: CountComponent.razor Component: CountComponent.razor.cs Style: CountComponent.razor.css Script: CountComponent.razor.js Call JS from .NET Create an app.js file under wwwroot function helloWorld() { alert('Hello World'); } function add(a, b) { return a + b; } Include the JS file in App.razor Script inclusion in the current web project ...

Developing Blazor Hybrid Apps

Component-Based Development Component-based development allows developers to encapsulate UI components as independent Blazor components and reuse them across applications. This approach improves the maintainability and reusability of the code, similar to modern front-end frameworks such as React and Vue. Component = HTML + CSS + JS Blazor component = Razor + CSS + C# Introduction to MAUI MAUI is the cross-platform UI framework introduced in .NET 6, which allows developers to create native applications using C# and XAML. It is the evolution of Xamarin.Forms and supports Android, iOS, macOS, and Windows. ...