Publishing a self-contained Blazor component (Razor + CSS + JS) as a NuGet package

  • Gérald Barré
In this post, I describe how to create and publish a self-contained Blazor component as a NuGet package. By self-contained I mean that the NuGet package will contain the Blazor component (Razor + C#), the style (CSS) and the JavaScript code. Also, the consumer of the package only has to use the component without any additional steps such as manually including the CSS or JS files. @* The CSS and the JS are… [read more]

Capturing unmatched attributes and attribute splatting in Blazor

  • Gérald Barré
In the previous posts on Blazor, we have seen how to create a component and define parameters. For instance, you can check the posts about the Modal component, the Repeater component, or the Enum Select component. Sometimes, you want to allow the user to add any arbitrary attributes to the component. For instance, you may want the user to add validation attributes (required, maxlength, etc.) to an input… [read more]

Testing Blazor components using bUnit

  • Gérald Barré
bUnit is a framework to test Blazor components. It allows validating that a component renders the expected HTML and reacts to events. bUnit runs in-memory and doesn't require a browser. This means tests run in isolation and are fast. Because there is no browser, it cannot execute JavaScript code. So, you may not be able to test correctly components that rely on JS interop. If your JS is very simple and… [read more]

Creating a reusable loading indicator in Blazor

  • Gérald Barré
Blazor allows writing components to encapsulate common behaviors. For instance, you may often need to show a loading indicator while loading data from a database or a remote service, or while processing a form. You can also use a loading component to indicate any long operation. This Loading component is very basic and simple to create, but so useful! @if (IsLoading) { if (LoadingTemplate != null) {… [read more]

Writing automated UI tests for an ASP.NET Core application using Playwright and xUnit

  • Gérald Barré
In a previous post, I wrote about testing an ASP.NET Core application with an in-memory server. This is useful to run integration tests to validate the server produces the expected response for a request. However, this doesn't allow to test JavaScript code nor to validate how the page displays. If you want to test these components, you need to run an actual browser and load your site. The code in this… [read more]

Validating an input on keypress instead of on change in Blazor

  • Gérald Barré
Blazor comes with everything needed to create forms and validate them. You can create a form and validate fields using data annotations. <EditForm Model="model"> <DataAnnotationsValidator /> <InputText @bind-Value="model.Text" /> <ValidationMessage For="() => model.Text" /> <div> Current value: @model.Text </div> <button class="btn btn-primary" type="submit">Submit</button> </EditForm> @code{ Model model… [read more]

Streaming an HTTP response in Blazor WebAssembly

  • Gérald Barré
Blazor WebAssembly relies on the browser to execute web requests. Every call you make using HttpClient is executed using the fetch API (documentation) provided by the browser. Web Browsers support streaming the response of a fetch request using the readable streams. This allows reading the response chunk by chunk without waiting for the last byte of the response. You can also cancel the request as soon as… [read more]

JavaScript Isolation in Blazor Components

  • Gérald Barré
In a previous post I explained how to use CSS isolation in a Blazor component to ensure the style of a component is not impacted by the global style or other components. JS isolation is similar but for JavaScript code. It allows to load JavaScript code for a specific component. One of the goals of JS isolation is to make reusable components that are not impacted by the global scope. In the previous… [read more]

Calling public methods on Blazor component from another component

  • Gérald Barré
Blazor components are classes like any other .NET class. This means you can add public methods and call them from the parent components. For instance, if you create a dialog component, you can add a method ShowDialog or ShowModalDialog. In the parent component, you can call these methods to show the dialog the way you want. Another example is to add Reset and Submit methods to a form. Let's consider the… [read more]