Majorsoft.Blazor.Components.Debounce.Input 0.9.26-rc.1.20452.10

.NET 5.0
Suggested Alternatives

Majorsoft.Blazor.Components.Debounce

Additional Details

Package was renamed. This one is not maintained please use: Majorsoft.Blazor.Components.Debounce

This is a prerelease version of Majorsoft.Blazor.Components.Debounce.Input.
There is a newer prerelease version of this package available.
See the version list below for details.
NuGet\Install-Package Majorsoft.Blazor.Components.Debounce.Input -Version 0.9.26-rc.1.20452.10
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.
dotnet add package Majorsoft.Blazor.Components.Debounce.Input --version 0.9.26-rc.1.20452.10
<PackageReference Include="Majorsoft.Blazor.Components.Debounce.Input" Version="0.9.26-rc.1.20452.10" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Majorsoft.Blazor.Components.Debounce.Input --version 0.9.26-rc.1.20452.10
#r "nuget: Majorsoft.Blazor.Components.Debounce.Input, 0.9.26-rc.1.20452.10"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Majorsoft.Blazor.Components.Debounce.Input as a Cake Addin
#addin nuget:?package=Majorsoft.Blazor.Components.Debounce.Input&version=0.9.26-rc.1.20452.10&prerelease

// Install Majorsoft.Blazor.Components.Debounce.Input as a Cake Tool
#tool nuget:?package=Majorsoft.Blazor.Components.Debounce.Input&version=0.9.26-rc.1.20452.10&prerelease

Blazor Components Debounce Input controls

Build Status Package Version NuGet Downloads License

About

Blazor components that are rendering HTML <input>, <textarea> elements also extending InputText and InputTextArea Blazor provided components with debounced (delay) event for onChange. All components work with WebAssembly and Server hosted models. For code examples see usage.

You can try it out by using the demo app.

Features

Components

  • DebounceInput: wraps and renders HTML <input> field with debounced (delay) event for onChange.
  • DebounceInputText: extends InputText Blazor provided component (it supports form validaion and @bind-Value=) and adds debounced value changed event notification.
  • DebounceTextArea: wraps and renders HTML <textarea> field with debounced (delay) event for onChange.
  • DebounceInputTextArea: extends InputTextArea Blazor provided component (it supports form validaion and @bind-Value=) and adds debounced value changed event notification.

Properties

  • OnValueChanged: EventCallback<string> delegate Required <br /> Function called when value was changed (debounced) with field value passed into.
  • CurrentValue: string { get; set; } <br /> Value of the rendered HTML element. Initial value can be set, with @ref="" (useful when MinLenght not reached) control value can be read out or can be omitted.
  • DebounceTime: int { get; set; } (default: 200) <br /> Notification debounce timeout in ms. If set to 0 or less, disables automatic notification completely. Notification will only happen by pressing Enter key.
  • MinLength: int { get; set; } (default: 0) <br /> Minimal length of text to start notify, if value is shorter than MinLength, there will be notifications with empty value "".
  • ForceNotifyByEnter: bool { get; set; } (default: true) <br /> Notification of current value will be sent immediately by hitting Enter key. Enabled by-default. Notification will obey MinLength rule, if length is less, then empty value "" will be sent back.
  • ForceNotifyOnBlur: bool { get; set; } (default: true) <br /> Same as ForceNotifyByEnter but notification triggered onblur event, when focus leaves the input field.

Arbitrary HTML attributes e.g.: id="input1" class="form-control w-25" will be passed to the corresponding rendered HTML element <input> or <textarea>.

<DebounceInput 
    id="in1"
    class="form-control w-25" 
    OnValueChanged="e => { DebounceInputValue = e; }" 
    placeholder="@("Please type in at least: " + @MinCharsLength + " char(s)")"
    ... />

Will be rendered to:

<input id="in1" class="form-control w-25" placeholder="Please type in at least: 2 char(s)" ... />

Configuration

Installation

Blazor.Components.Debounce.Input is available on NuGet.

dotnet add package Majorsoft.Blazor.Components.Debounce.Input

Use the --version option to specify a preview version to install.

Usage

Add using statement to your Blazor <component/page>.razor file. Or globally reference it into _Imports.razor file.

@using Blazor.Components.Debounce.Input

Following code example showw how to use DebounceInput component in your Blazor App. Note: using DebounceTextArea component basically the same but it will render HTML <textarea>.

<div class="pb-2">
    <DebounceInput id="in1" class="form-control w-25" placeholder="@("Please type in at least: " + @MinCharsLength + " char(s)")"
        @ref="input1"
        CurrentValue="@DebounceInputValue" 
        DebounceTime="@DebounceMilisec" 
        MinLength="@MinCharsLength"
        OnValueChanged="e => { DebounceInputValue = e; }" 
        ForceNotifyByEnter="@ForceNotifyByEnter"
        ForceNotifyOnBlur ="@ForceNotifyOnBlur" />
</div>

<div>Notified value: @DebounceInputValue</div>
<div>Actual value: @(input1?.CurrentValue ?? DebounceInputValue)</div>
    
@code {
    //DebounceInput
    private string DebounceInputValue = "";
    private int DebounceMilisec = 1000;
    private int MinCharsLength = 2;
    private bool ForceNotifyByEnter = true;
    private bool ForceNotifyOnBlur = true;
    private DebounceInput input1;
}
    

Following code example showw how to use DebounceInputText component with model binding and form validation in your Blazor App. Note: using DebounceInputTextArea component basically the same but it will render HTML <textarea>.

<EditForm Model="@exampleModel">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="pb-2">
        <DebounceInputText @bind-Value="exampleModel.Name" class="form-control w-25" placeholder="@("Please type in at least: " + @DebounceInputTextMinCharsLength + " char(s)")"
            @ref="inputText1"
            DebounceTime="@DebounceInputTextDebounceMilisec" 
            MinLength="@DebounceInputTextMinCharsLength"
            OnValueChanged="e => { DebounceInputTextValue = e; }" 
            ForceNotifyByEnter="@ForceNotifyByEnter2"
            ForceNotifyOnBlur ="@ForceNotifyOnBlur2" />
    </div>
    <div class="pb-2">
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
</EditForm>

<div>Notified value: @DebounceInputTextValue</div>
<div>Actual value: @(exampleModel.Name)</div>

@code {
    //DebounceInputText
    private string DebounceInputTextValue = "";
    private int DebounceInputTextDebounceMilisec = 1000;
    private int DebounceInputTextMinCharsLength = 2;
    private bool ForceNotifyByEnter2 = true;
    private bool ForceNotifyOnBlur2 = true;
    private DebounceInputText inputText1;
    
    //Form model
    private ExampleModel exampleModel = new ExampleModel();
    private ExampleModel exampleModel2 = new ExampleModel();
    public class ExampleModel
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string Name { get; set; }
    }
}

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
Compatible target framework(s)
Additional computed target framework(s)
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
0.9.48-rc.2.20479.15 441 10/14/2020
0.9.30-rc.1.20452.10 339 9/26/2020
0.9.26-rc.1.20452.10 329 9/23/2020