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]

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]

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]

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]

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]

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]

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]

MSIX is a Windows app package format that provides a modern packaging experience to all Windows apps. The MSIX package format preserves the functionality of existing app packages and/or install files in addition to enabling new, modern packaging and deployment features to Win32, WPF, and Windows Forms apps. MSIX provides useful features such as auto-updates, file associations, clean uninstall,… [read more]

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]

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]