LoreSoft.Blazor.Controls 9.2.0

dotnet add package LoreSoft.Blazor.Controls --version 9.2.0
NuGet\Install-Package LoreSoft.Blazor.Controls -Version 9.2.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="LoreSoft.Blazor.Controls" Version="9.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add LoreSoft.Blazor.Controls --version 9.2.0
#r "nuget: LoreSoft.Blazor.Controls, 9.2.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install LoreSoft.Blazor.Controls as a Cake Addin
#addin nuget:?package=LoreSoft.Blazor.Controls&version=9.2.0

// Install LoreSoft.Blazor.Controls as a Cake Tool
#tool nuget:?package=LoreSoft.Blazor.Controls&version=9.2.0

Overview

The LoreSoft Blazor Controls project contains a collection of Blazor user 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" />

Typeahead Features

  • Searching data by supplying a search function
  • Template for search result, selected value, and footer
  • Debounce support for smoother search
  • Character limit before searching
  • Multiselect support
  • Built in form validation support

Typeahead Properties

Required

  • Value - Bind to Value in single selection mode. Mutually exclusive to Values property.
  • Values - Bind to Values in multiple selection mode. Mutually exclusive to Value property.
  • SearchMethod - The method used to return search result

Optional

  • AllowClear - Allow the selected value to be cleared
  • ConvertMethod - The method used to convert search result type to the value type
  • Debounce - Time to wait, in milliseconds, after last key press before starting a search
  • Items - The initial list of items to show when there isn't any search text
  • MinimumLength - Minimum number of characters before starting a search
  • Placeholder - The placeholder text to show when nothing is selected

Templates

  • ResultTemplate - User defined template for displaying a result in the results list
  • SelectedTemplate - User defined template for displaying the selected item(s)
  • NoRecordsTemplate - Template for when no items are found
  • FooterTemplate - Template displayed at the end of the results list
  • LoadingTemplate - Template displayed while searching

Typeahead Examples

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);
    }
 }

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;
    }
}
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
9.2.0 197 3/2/2024
9.1.0 471 1/14/2024
9.0.2 906 12/4/2023
9.0.1 125 12/4/2023
9.0.0 92 12/4/2023
8.0.0 4,836 12/28/2022
7.0.0 9,079 11/10/2021
6.7.0 3,530 10/23/2021
6.6.3 317 10/21/2021
6.6.2 1,411 7/28/2021
6.6.1 1,021 5/15/2021
6.6.0 386 5/15/2021
6.5.0.156 946 4/9/2021
6.2.0.139 1,143 3/24/2021
6.1.0.137 382 3/24/2021
6.0.0.128 506 3/14/2021
5.0.0.116 463 2/25/2021
4.1.0.114 6,964 2/15/2021
4.0.0.84 7,110 11/16/2020
3.5.0.27 9,268 6/4/2020
3.0.0.61 5,584 1/24/2020
3.0.0.52 814 1/2/2020
3.0.0.51 490 1/2/2020
3.0.0.49 480 1/2/2020
2.1.0.40 594 12/20/2019
2.1.0.39 672 12/18/2019
2.1.0.38 3,314 12/5/2019
2.1.0.29 1,142 10/3/2019
2.0.0.28 502 9/23/2019
2.0.0.27 300 9/19/2019
2.0.0.21 288 9/17/2019
2.0.0.20 293 9/6/2019
2.0.0.14 317 8/23/2019
2.0.0.13 296 8/19/2019
2.0.0.9 303 8/16/2019
1.0.0.8 304 8/14/2019
1.0.0.6 300 8/7/2019
1.0.0.5 300 8/7/2019
1.0.0.4 322 8/6/2019