HAVIT Blazor

Getting started #

Prerequisites #

Havit.Blazor components have the following requirements:

  • .NET 8.0 or later (our NuGet package provides builds for both net8.0 and net9.0 to utilize the latest features).
  • Most components require interactive rendering mode for full functionality (some support for static SSR is available, with limited functionality where applicable).

Project Templates #

You can either add Havit.Blazor components to an existing project or create a new project using one of the following GitHub repository templates:

Simple Blazor Web App Template #

For a quick start, you can use the Simple Blazor Web App Template:

  • provides a basic setup - a .NET 9 Blazor Web App with Auto interactive render mode,
  • has the MainLayout adjusted to use HxSidebar,
  • comes with Havit.Blazor preinstalled (including HxMessenger and HxMessageBox support),
  • features sample pages updated to utilize our components.

Enterprise Project Template #

Try our Enterprise Project Template, which includes features like EF Core, gRPC code-first, and more:

  • layered architecture (model, data layer with repositories, services, etc.),
  • Entity Framework Core for data access,
  • gRPC code-first communication between server and client,
  • ...and much more.

Installation to your project #

Select your setup to get customized instructions.

1. NuGet package #

Add Havit.Blazor.Components.Web.Bootstrap NuGet package to your {YourBlazorApp}.Client project. You can use the NuGet Package Manager or execute the following command: 

dotnet add package Havit.Blazor.Components.Web.Bootstrap

2. Bootstrap CSS #

Our library only requires the presence of any Bootstrap CSS bundle (version 5.3.3) in your project.
All additional CSS rules needed for our components are automatically included in the bundle of scoped CSS. Ensure that the link to {YourBlazorApp}.styles.css remains in your App.razor and has NOT been removed.

Add the following line to the <head> section of your App.razor file: 

<link href="@Assets["_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.min.css"]" rel="stylesheet" />

This snippet adds a <link> to our customized Bootstrap CSS build, incorporating the Havit.Blazor theme. It includes various subtle adjustments, such as colors, borders, and other styling tweaks to enhance the appearance of your app. This is the same theme used throughout our documentation to showcase components.

3. Bootstrap JavaScript #

Our library only requires the inclusion of the appropriate Bootstrap JavaScript bundle (version 5.3.3) in your project.
Any additional JavaScript needed for our components (small JS modules supporting the integration of individual components with Blazor) is automatically loaded as needed.

Add the following line at the end of the <body> section of your App.razor file. 

@((MarkupString)@HxSetup.RenderBootstrapJavaScriptReference())

This snippet adds a <script> tag referencing Bootstrap JavaScript with Popper that always matches the version required by Havit.Blazor, so you won’t need to maintain the link manually in the future.

4. Import namespaces #

Add the following code to both {YourBlazorProject}/Components/_Imports.razor and {YourBlazorProject}.Client/_Imports.razor files:

@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap

This code imports the namespaces of the Havit.Blazor library so you can use the components in your Razor files without having to add @using directive to each file or specify the full namespace each time.

5. Register srvices #

Add the following code to service registrations in both {YourBlazorProject}/Program.cs and {YourBlazorProject}.Client/Program.cs files:

builder.Services.AddHxServices();

You will need to add the following using directive to the top of the file:

using Havit.Blazor.Components.Web;

6. Specific components support #

[OPTIONAL] Some components require a specific project setup to function correctly. This typically involves registering a service and adding a host component to a MainLayout.razor component.

For detailed instructions, please refer to the documentation of the respective components:

  • HxMessenger - Facilitates the display of new toast messages from your code with ease.
  • HxMessageBoxHost - Enables opening message boxes (and awaiting results) directly from your code.

Ready, set, go! #

You are now all set to utilize the full range of components in your Razor files. These components are prefixed with Hx. Rely on IntelliSense to guide you through their usage.

<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />
An unhandled error has occurred. Reload 🗙