Majorsoft.Blazor.Components.Debounce.Input
0.9.26-rc.1.20452.10
Majorsoft.Blazor.Components.Debounce
Additional DetailsPackage was renamed. This one is not maintained please use: Majorsoft.Blazor.Components.Debounce
See the version list below for details.
dotnet add package Majorsoft.Blazor.Components.Debounce.Input --version 0.9.26-rc.1.20452.10
NuGet\Install-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" />
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"
// 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
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
: extendsInputText
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
: extendsInputTextArea
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 to0 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 asForceNotifyByEnter
but notification triggeredonblur
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 Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. 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. |
-
net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.0-rc.1.20451.17)
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 | 548 | 10/14/2020 | |
0.9.30-rc.1.20452.10 | 403 | 9/26/2020 | |
0.9.26-rc.1.20452.10 | 394 | 9/23/2020 |
See Releases here: https://github.com/majorimi/blazor-components/releases