Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How do I throttle an onChange event for my textbox

$
0
0

I'm very new to Blazor and razor pages. I'm trying to handle an onChange event for my text box, but I want to throttle it so it doesn't trigger until a few seconds after input has stopped to save on network traffic.

Can/should you used JavaScript to do something like this? Like a setTimeOut or something?

Here's the code I'm working with and below that is what I've found and tried from here

@page "/todo"<pagetitle>Todo</pagetitle><h1>Todo (@todos.Count(todo => !todo.IsDone))</h1><table>    @foreach (var todo in todos)    {<tr><td><input type="checkbox" @bind="todo.IsDone" /></td><td><input type="text" style="border:none;" @bind="todo.Title" /></td></tr>    }</table><input placeholder="Something todo" @bind="newTodo" /><button @onclick="AddTodo">Add todo</button>@code {    private List<TodoItem> todos = new();    private string? newTodo;    private void AddTodo()    {        if (!string.IsNullOrWhiteSpace(newTodo))        {            todos.Add(new TodoItem { Title = newTodo });            newTodo = string.Empty;        }    }}

I've tried a couple things, one worked the other didn't (the one that didn't, the syntax seems more intuitive)...

This didn't work because it didn't know what <InputText> element was

<div class="form-group row"><label for="name">Contact: </label><InputText id="name" Value="@Contact.Name" ValueChanged="NameChanged" ValueExpression="() => Contact.Name" ></InputText></div>@code {    private void NameChanged(string value)    {        Contact.Name = value;    }}

This did work but don't know how to throttle it?

<input class="form-control form-control-sm" type="number" step="any" @bind-value:event="onchange"    @oninput="CalculateStandardDimensions" @bind-value="Cyclone.CycloneSize" />@code{    public class Cyclon    {        public Int32 CycloneSize { get; set; } = 10;    }    public Cyclon Cyclone = new Cyclon();    private void CalculateStandardDimensions(ChangeEventArgs args)    {        // Do Stuff Here        System.Console.WriteLine("test123");    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>