Onchange event in Input type="text" in a Blazor application

Asked

Viewed 149 times

2

I am developing an application in Blazor and managed to do an inputtext along with a button perform a search in an api created by scafolding with Entity Frameworks.

Follow simple form below.

<label>Hello @motorista !!</label>
<input type="text" @bind-value="motorista" />
<button class="btn btn-primary" @onclick="PesquisaMotorista">Click me</button>

@code {

    private string motorista = null;

    Veiculo[] veiculos { get; set; }

    protected async Task PesquisaMotorista()
    {
        veiculos = await http.GetJsonAsync<Veiculo[]>($"api/veiculos/motorista/{motorista}");
    }
}

I would like to use the onchange event in the input, to no longer need the button of the form above.

Below follows the same form without the button and with the oninput event that is not working as the onchange event.

How to use in the example below the onchange event? 

 <label>Hello @motorista !!</label>
 <input type="text" @bind-value="motorista" @oninput="PesquisaMotorista" />
 @code {

    private string motorista = null;

    Veiculo[] veiculos { get; set; }

    protected async Task PesquisaMotorista()
    {
        veiculos = await http.GetJsonAsync<Veiculo[]>($"api/veiculos/motorista/{motorista}");
    }
 }

Some tests carried out so far

With onclick type the text and give a click on the input ai the search is performed

<input type="text" @bind-value="motorista" @bind-value:event="oninput" @onclick="PesquisaMotorista" />

With onchange type the text and give a enter, then the search is performed

<input type="text" @bind-value="motorista" @bind-value:event="oninput" @onchange="PesquisaMotorista" />

Solution obtained with the onkeyup event

<input type="text" @bind-value="motorista" @bind-value:event="oninput" @onkeyup="PesquisaMotorista" />
c# asp.net-core blazor

  • Are you using any js framework? jquery type?

  • I’m not using any kind of js and jquery frameworks - I’m looking to use the concepts of Blazor, have to use something ?

  • <input type="text" @bind-value="driver" @bind-value:Event="oninput" @onchange="Search driver" /> - in this example the onchange event is working but strange mode, we have to type a text first and enter, then performs the search

  • Solution obtained with the onkeyup event, see example in the update of the question post

  • 1

    puts your solution in a response, and marks your own response as the solution.

1 answer

1


I got a result with the onkeyup event

<input type="text" 
       @bind-value="motorista" 
       @bind-value:event="oninput" 
       @onkeyup="PesquisaMotorista" />

@code {

private string motorista = null;

Veiculo[] veiculos { get; set; }

protected async Task PesquisaMotorista()
{
   //Acessa a rota personalizada na VeiculosController
    veiculos = await http.GetJsonAsync<Veiculo[]>($"api/veiculos/motorista/{motorista}");
}

}

Api da Veiculoscontroller

// GET: api/Veiculos
[HttpGet("motorista/{motorista}")]//Rota personalizada
public async Task<ActionResult<IEnumerable<Veiculo>>> GetVeiculos(string motorista)
{
      return await _context.Veiculos
                   .Where(v => v.Motorista.Contains(motorista))
                   .ToListAsync();
}

Browser other questions tagged c# asp.net-core blazor

You are not signed in. Login or sign up in order to post.