It's common to set values using the query string. For instance, it can contains search parameters and default values for a form. It also allows very useful for sharing a URL to specific resources. Blazor doesn't provide a way to get the values of the query string and bind them to properties. However, you can get the full URL using the NavigationManager and the right event in the Blazor component lifecycle… [read more]

In a previous post I wrote about one rule of Meziantou.Analyzer to help using CancellationToken correctly. Meziantou.Analyzer is an open-source Roslyn analyzer I wrote to enforce some good practices in C# in term of design, usage, security, performance and style. In this post, we'll explore the rules that helps when writing asynchronous code in C#. note: If you want to have a deep understanding of how… [read more]

In a Blazor WebAssembly application, I needed to export data to a file. In a web application you cannot write the file directly to the file system. Instead, you need to create a valid URL, create a <a> element, and trigger a click on it. There are 2 ways to create a valid URL: Using a base64 data URL (e.g. data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==), but there are a few limitations included a limited… [read more]

Blazor WebAssembly and Blazor Server allow to call JS functions from the .NET code. By using IJSRuntime.InvokeAsync<T>(name), you can invoke a JS function and get the result very easily. This interface works well in Blazor WebAssembly or Blazor Server. @inject IJSRuntime JSRuntime @code{ protected override async Task OnInitializedAsync() { await JSRuntime.InvokeAsync<string>("MyFunction"); } } In Blazor… [read more]

In an application you often need to store user settings such as the selected theme, any application configuration, or their username. These settings must be: Accessible from anywhere in the application Persisted, so you can read them when the user restarts the application Shared across multiple instances (tabs/windows in the context of an Blazor application) In a WebAssembly application, that runs inside… [read more]

Recently, Marc Gravell asked on Twitter if an analyzer is available to detect when a method is called without specifying a CancellationToken whereas there is one available in the current context (local variable or parameter). using System.Threading; namespace ConsoleApp { public class MyTestClass { public void MyMethodWithDefault(CancellationToken ct = default) { } public void MyMethod(CancellationToken… [read more]

In a previous post, I explained how to create a repeater component to encapsulate the layout logic into a reusable components. In this post, I'll show you how to create a more complex component to display a data grid. The goal of the component is to render a <table> element from a list of column and the data. At the end, you'll be able to use the grid component as follow: <Grid Items="customers"… [read more]

ASP.NET Core Blazor components lifecycle allows the user to perform additional operations on components during component initialization and rendering. It's also useful to release resources when the component is removed from the page. Here's the Blazor components lifecycle: SetParametersAsync This method sets the value of the properties decorated by [Parameter] or [CascadingParameter] by using the values… [read more]

Blazor is the shinny new framework to create web application. In this post I'll show you how to create a component to display a modal dialog. A component is a self-contained chunk of user interface (UI). You can compare a component to a user control in WebForm, WinForms or WPF. Components allow reusability, and sharing among projects. The component we'll build is a modal dialog. You can find lots of way… [read more]

In ASP.NET Core Blazor, you may already have use two-way binding in forms. This is useful to bind a property to an input and update the value of the property when the input value changed. To use 2-way binding you can use the @bind directive. Here is an example of binding the Age property to an input of type number: <EditForm Model="model"> <InputNumber @bind-Value="model.Age" /> </EditForm> Razor rewrites… [read more]