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