repository·main·Indexed 20 days ago
https://github.com/havit/havit.blazorA free collection of Bootstrap 5.3-based components for ASP.NET Blazor. The library includes Havit.Blazor.ApplicationInsights for telemetry tracking, an MCP server for AI-assisted API documentation, and Havit.Bootstrap for managing and compiling customized Bootstrap CSS.
When working with the Havit.Bootstrap repository, adhere to these constraints:
bootstrap folder directly, except when performing a version update. All HAVIT-specific overrides must be implemented within the scss folder..editorconfig settings, which differ from standard HAVIT settings to maintain compatibility with Bootstrap's stylelint configurations.To display toast messages, do not use the HxToast component directly in your user code. Instead, use the HxMessenger service pattern:
HxMessenger as a wrapper for HxToastContainer to manage the display area.IHxMessengerService to trigger HxToast notifications.By default, HxMarkdown is secure. The SanitizeHtml parameter (which defaults to true) ensures that any HTML tags present in the input Markdown string are escaped before rendering.
If you are processing content from a trusted source and want to allow raw HTML to pass through to the output, set SanitizeHtml to false either on the component instance or globally via HxMarkdown.Defaults.SanitizeHtml.
The HxMarkdown component converts Markdown text into HTML and renders it using Bootstrap typography. It is designed to be a standalone parser without external dependencies.
To use the component, pass your Markdown string to the Content parameter. You can also apply a custom CSS class via CssClass to wrap the output in a <div>.
@* Basic usage *@
<HxMarkdown Content="@markdownString" />
@* Usage with a custom CSS class *@
<HxMarkdown Content="@markdownString" CssClass="my-custom-class" />What parameters does HxButton have? will trigger the get_component_docs tool to retrieve the relevant API documentation. For direct endpoint testing, you can use the provided .http file located at Havit.Blazor.Documentation.Mcp.http.HAVIT Blazor provides several components for handling modal interactions and dialogs:
HxMessageBox: A component used to display simple message boxes.HxModal: A component that renders a modal dialog following the Bootstrap Modal pattern.HxDialogBase: A base class designed to simplify the implementation of your own custom modal dialogs.HxOffcanvas: A component that renders a Bootstrap Offcanvas (also known as a Drawer).To use Havit.Blazor.ApplicationInsights, follow these three steps:
Register the services in both your Server project and WebAssembly (Client) project using AddBlazorApplicationInsights.
Note on Configuration:
<HxApplicationInsights> component is prerendered or used in SSR, configure the options in the server project.Place the <HxApplicationInsights /> component inside the <head> element of your root layout or App.razor. It must be placed before any other scripts.
Inject IBlazorApplicationInsights into your components to track events and other telemetry.
// 1. Register services (Server or Client Program.cs)
builder.Services.AddBlazorApplicationInsights(options =>
{
options.JsSdkOptions.ConnectionString = "your-connection-string";
});// 2. Add script component (App.razor or Root Layout)
@using Havit.Blazor.ApplicationInsights.Components
<head>
<HxApplicationInsights @rendermode="..." />
</head>// 3. Inject and use
@inject IBlazorApplicationInsights AppInsights
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await AppInsights.TrackEventAsync(new EventTelemetry { Name = "my-event" });
}
}
}Havit.Bootstrap requires NodeJS (NPM or YARN) to compile, vendor-prefix, and minify CSS. The compilation process incorporates HAVIT-specific overrides located in the scss folder.
yarn to install necessary packages.css script to compile, prefix, and minify the CSS.watch script to act as a file-watcher; it will automatically re-run compilation scripts whenever changes are saved.publish-to-blazor script to move the compiled files from the dist folder to Havit.Blazor.Components.Web.Bootstrap/wwwroot.yarn
# To compile once
yarn css
# To watch for changes
yarn watch
# To publish to Blazor
yarn publish-to-blazorTelemetry initializers allow you to attach static tags (key-value pairs) to every telemetry item. Because the JS SDK does not support dynamic callbacks from .NET per item, tags are set at registration time.
Set this during service registration in Program.cs to ensure tags are present even on the initial auto-tracked page view.
Use AddTelemetryInitializerAsync to attach tags dynamically during the application lifecycle.
// Via options (Registration)
builder.Services.AddBlazorApplicationInsights(options =>
{
options.DefaultTelemetryInitializer = new TelemetryInitializer
{
CloudRoleName = "MyBlazorApp",
ApplicationVersion = "1.2.3"
};
});
// At runtime
await AppInsights.AddTelemetryInitializerAsync(new TelemetryInitializer
{
CloudRoleName = "MyBlazorApp",
ApplicationVersion = "1.2.3"
});The library includes an ASP.NET Core logging provider that forwards ILogger entries to Application Insights as traces or exceptions. This is primarily designed for Interactive WebAssembly.
In your WebAssembly (Client) project (Program.cs), you must explicitly call AddConfiguration because the WASM host does not read appsettings.json automatically:
builder.Logging.AddConfiguration(builder.Configuration.GetSection("Logging"));
builder.Logging.AddBlazorApplicationInsights();In wwwroot/appsettings.json, use the provider alias BlazorApplicationInsights to set log levels:
{
"Logging": {
"LogLevel": {
"Default": "Warning"
},
"BlazorApplicationInsights": {
"LogLevel": {
"Default": "Error",
"MyApp.Pages": "Warning"
}
}
}
}