LoreSoft Blazor Controls

A comprehensive collection of high-quality Blazor components designed to enhance your web applications with rich user interface elements. This library provides everything from data visualization components to form controls, loading indicators, and utility components.

Overview

The LoreSoft Blazor Controls project contains a collection of production-ready Blazor user controls that are easy to use, highly customizable, and built with performance in mind. Whether you need data grids, form inputs, loading indicators, or notification systems, this library has you covered.

Quick Links

• Demo: https://blazor.loresoft.com/
• NuGet: https://nuget.org/packages/LoreSoft.Blazor.Controls
• Source: https://github.com/loresoft/LoreSoft.Blazor.Controls

Installing

The LoreSoft.Blazor.Controls library is available on nuget.org via package name LoreSoft.Blazor.Controls.

To install LoreSoft.Blazor.Controls, run the following command in the Package Manager Console

Install-Package LoreSoft.Blazor.Controls

Setup

To use, you need to include the following CSS and JS files in your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server).

In the head tag add the following CSS.

<link rel="stylesheet" href="_content/LoreSoft.Blazor.Controls/BlazorControls.css" />

Components

This library provides a comprehensive set of Blazor components organized into the following categories:

Data Components

DataGrid

A powerful data grid component for displaying tabular data with advanced features:

• Column sorting (single and multi-column)
• Filtering and searching
• Row selection and grouping
• Detail views and expandable rows
• CSV export functionality
• Customizable column templates
• Built-in pagination support

DataList

A flexible list component for displaying data items using custom templates:

• Query-based filtering
• Field-based sorting
• CSV export capabilities
• Customizable row templates
• Simple and lightweight alternative to DataGrid

Form Components

DateTimePicker

A comprehensive date and time input component supporting multiple data types:

• Supports DateTime, DateTimeOffset, DateOnly, TimeOnly, and TimeSpan
• Multiple picker modes (date, time, datetime)
• Built-in validation support
• Keyboard navigation
• Customizable format strings

InputImage

An image upload component with preview functionality:

• File upload with drag-and-drop support
• Image preview with automatic resizing
• Data URL conversion
• File size validation
• Configurable maximum file size

ToggleSwitch

A modern toggle switch component for boolean values:

• Smooth animations
• Two-way data binding
• Form validation support
• Customizable styling
• Supports both bool and bool? types

Typeahead

An advanced autocomplete/search component with rich features:

• Asynchronous search functionality
• Debounced search input
• Single and multi-select modes
• Customizable templates for results and selections
• Minimum character length configuration
• Built-in form validation support

UI Components

BusyButton

A button component that shows loading state during operations:

• Automatic disable during busy state
• Customizable busy indicator
• Built-in loading text
• Smooth state transitions

Conditional

A utility component for conditional rendering:

• Simple boolean-based content switching
• Separate templates for true/false states
• Clean alternative to @if statements in templates

LoadingBlock

A loading overlay component for indicating progress:

• Overlay or replacement loading modes
• Customizable loading template
• Smooth fade transitions
• Flexible positioning

ProgressBar

An animated progress bar with service-based state management:

• Smooth animations with customizable duration
• Service-based progress updates
• Auto-hide on completion
• Multiple progress operations support

Skeleton

A skeleton placeholder component for loading states:

• Multiple shape types (text, rectangle, circle)
• Customizable dimensions
• Smooth loading animations
• Responsive design support

Notification Components

Toaster

A comprehensive toast notification system:

• Multiple notification levels (Info, Success, Warning, Error)
• Configurable positioning
• Auto-dismiss with custom timeouts
• Custom templates and styling
• Queue management for multiple toasts

Query Components

QueryBuilder

A visual query builder for complex filtering:

• Dynamic field configuration
• Nested group support
• Multiple operators per field type
• Real-time query updates
• Export to various query formats

Utility Components

Gravatar

A component for displaying Gravatar images:

• Automatic MD5 hash generation
• Fallback image support
• Multiple Gravatar modes
• Configurable ratings and sizes

LazyValue

A component for asynchronously loading and displaying values:

• Key-based value loading
• Custom loading templates
• Error handling support
• Caching capabilities

LocalTime

A component for displaying dates and times in the user's local timezone:

• Automatic timezone conversion
• Supports DateTime and DateTimeOffset
• Customizable display formats
• Semantic HTML time elements

Repeater

A simple repeater component for rendering collections:

• Custom item templates
• Empty state templates
• Clean alternative to @foreach loops
• Strongly typed item context

Examples

Typeahead Component

The Typeahead component provides powerful search and selection capabilities:

Basic Example

State selection dropdown. Bind to Value property for single selection mode.

<Typeahead SearchMethod="@SearchState"
           Items="Data.StateList"
           @bind-Value="@SelectedState"
           Placeholder="State">
    <SelectedTemplate Context="state">
        @state.Name
    </SelectedTemplate>
    <ResultTemplate Context="state">
        @state.Name
    </ResultTemplate>
</Typeahead>

@code {
    public StateLocation SelectedState { get; set; }

    public Task<IEnumerable<StateLocation>> SearchState(string searchText)
    {
        var result = Data.StateList
            .Where(x => x.Name.ToLower().Contains(searchText.ToLower()))
            .ToList();

        return Task.FromResult<IEnumerable<StateLocation>>(result);
    }
}

Multiselect Example

When you want to be able to select multiple results. Bind to the Values property. The target property must be type IList<T>.

<Typeahead SearchMethod="@SearchPeople"
           Items="Data.PersonList"
           @bind-Values="@SelectedPeople"
           Placeholder="Owners">
    <SelectedTemplate Context="person">
        @person.FullName
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @person.FullName
    </ResultTemplate>
</Typeahead>

@code {
    public IList<Person> SelectedPeople;

    public Task<IEnumerable<Person>> SearchPeople(string searchText)
    {
        var result = Data.PersonList
            .Where(x => x.FullName.ToLower().Contains(searchText.ToLower()))
            .ToList();

        return Task.FromResult<IEnumerable<Person>>(result);
    }
 }

GitHub Repository Search

Use Octokit to search for a GitHub repository.

<Typeahead SearchMethod="@SearchGithub"
           @bind-Value="@SelectedRepository"
           Placeholder="Repository"
           MinimumLength="3">
    <SelectedTemplate Context="repo">
        @repo.FullName
    </SelectedTemplate>
    <ResultTemplate Context="repo">
        <div class="github-repository clearfix">
            <div class="github-avatar"><img src="@repo.Owner.AvatarUrl"></div>
            <div class="github-meta">
                <div class="github-title">@repo.FullName</div>
                <div class="github-description">@repo.Description</div>
                <div class="github-statistics">
                    <div class="github-forks"><i class="fa fa-flash"></i> @repo.ForksCount Forks</div>
                    <div class="github-stargazers"><i class="fa fa-star"></i> @repo.StargazersCount Stars</div>
                    <div class="github-watchers"><i class="fa fa-eye"></i> @repo.SubscribersCount Watchers</div>
                </div>
            </div>
        </div>
    </ResultTemplate>
</Typeahead>

@inject IGitHubClient GitHubClient;

@code {
    public Repository SelectedRepository { get; set; }

    public async Task<IEnumerable<Repository>> SearchGithub(string searchText)
    {
        var request = new SearchRepositoriesRequest(searchText);
        var result = await GitHubClient.Search.SearchRepo(request);

        return result.Items;
    }
}