For C# developers who build modern, rich web applications, navigating the boundary between backend logic and browser behavior has traditionally required writing fragile JavaScript interop code. Bit.Butil (or BUtil) changes this dynamic entirely.
As a core part of the bitplatform ecosystem, BUtil provides a robust set of wrapper utilities that expose native Browser APIs directly in C#. By installing the Bit.Butil NuGet package, you can manipulate the document object model (DOM), handle low-level device inputs, and control browser histories completely within your Blazor components.
Below are the top 5 features of BUtil that every developer should use to eliminate JavaScript boilerplate and write cleaner, safer code. 1. Global Keyboard Shortkey Management
Managing application-wide keyboard shortcuts in standard Blazor often means relying on custom JavaScript event listeners. BUtil simplifies this with its dedicated Keyboard utility class.
Developers can inject Bit.Butil.Keyboard directly into their components and register complex, modifier-aware key combinations using clean C# syntax:
@inject Bit.Butil.Keyboard Keyboard @code { protected override async Task OnInitializedAsync() { // Bind Ctrl + Alt + F10 to a specific C# action await Keyboard.Add(“F10”, OnSaveTriggered, ButilModifiers.Alt | ButilModifiers.Ctrl); } private void OnSaveTriggered() { // Handle your logic safely in C# } } Use code with caution.
This approach automatically manages listener registration and leverages C# bitwise operators to evaluate modifier keys safely. 2. Native DOM Element & Pointer Control
Interacting with specific DOM nodes—like capturing mouse pointers, requesting element-level fullscreen viewports, or locking pointer behavior for interactive canvas apps—typically causes significant interop overhead.
The Bit.Butil.Element class solves this by providing strongly typed methods that mimic native MDN specifications. Functions like RequestPointerLock() or ReleasePointerCapture() can be executed asynchronously right against your Blazor ElementReference objects, ensuring flawless UI execution without manual scripting. 3. Type-Safe Window and Document Event Listeners
Attaching events directly to the global window or document levels is a common requirement for building responsive web apps. BUtil wraps these core entry points into injectable classes (Bit.Butil.Window and Bit.Butil.Document).
Instead of writing a JavaScript trigger that calls back to a .NET instance, you listen to window events directly:
@inject Bit.Butil.Window Window @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // Listen to standard browser events seamlessly await Window.AddEventListener(ButilEvents.KeyDown, args => { Console.WriteLine(“Key pressed on the window!”); }); } } } Use code with caution. 4. Advanced Console and Debugging Utilities
While Blazor supports basic console logging, it frequently lacks access to the rich formatting, grouping, and styling capabilities built into modern browser developer tools.
BUtil’s Console utility class bridges this gap. It gives developers the ability to output styled text, warnings, and complex object telemetry directly into the browser’s inspection console. This keeps your debugging workflow consistent while troubleshooting complex client-side client state changes. 5. Unified Browser Storage and Cookie Handling
Managing client state requires interacting with localStorage, sessionStorage, or HTTP cookies. BUtil wraps these distinct browser storage locations into a single, unified interface.
By standardizing string-based key-value pairs through C# abstractions, you avoid synchronous interop errors and gain immediate access to reactive persistence methods. This makes tracking authentication tokens, user preferences, and temporary session data trivial. Summary Table: JavaScript vs. BUtil Traditional Blazor Approach BUtil Approach Shortcuts JavaScript files + IJSRuntime invocation Single C# Keyboard.Add() method DOM Events Inline @onchange or raw event scripts Window/Document abstractions Pointer Locking Interop wrappers with fragile element IDs Direct asynchronous methods on refs Storage External state management JS libraries Type-safe native storage APIs
If you want to keep your engineering team focused on a single language and maintain clean codebases, it is time to move past raw interop. Drop the JavaScript files, pull down the NuGet package, and leverage BUtil to make browser integrations truly native to C#. If you want to get started with BUtil, let me know:
What specific browser feature you are trying to implement (e.g., geolocation, clipboard, history tracking)?
Whether your project is using Blazor WebAssembly or Blazor Server architecture?
I can provide a tailored code snippet to replace your existing JavaScript code blocks. Overview – Butil – bit platform
Leave a Reply