Отмена события (onchange) или получение старого значения в Blazor

Question

Я пытаюсь отменить событие 'onchange' для элемента после захвата выбранного значения. В основном просто, чтобы захватить выбранное значение и вернуть выбранный элемент выбранного элемента туда, где он был. Как я могу сделать это в Blazor?

<select @onchange="onSelectFilter">
 <option value="0">Select a filter</option>
 <option value="1">Filter 1</option>
 <option value="2">Filter 2</option>
</select> 

@code
{

 private void onSelectFilter(ChangeEventArgs args)
 {
   var val = int.Parse(args.Value.ToString());

   if (val != 0)
   {
     //do something

     //reset the value to 0
     args.Value = 0;
    }
   }

 }

Answer 1

гораздо более простой способ сделать это просто в C #

@page "/"

<select @bind="Selected" class="form-control">
 <option value="0">Select a filter</option>
 <option value="1">Filter 1</option>
 <option value="2">Filter 2</option>
</select> 

<h1>@Captured</h1>

@code
{
    int Captured;

    int _Selected;
    private int Selected
    {
        get{return _Selected;}
        set{
             Captured = value; //store the captured value
             _Selected = 0;   //reset the drop down
           }
    }

}

, с этим @code блоком

@code
{
    int Captured;

    int Selected
    {
        get{return 0;}  // reset the select
        set{Captured = value;} //store the captured value
    }
}

вы можете сделать его еще более минимальным

Answer 2

Опция 1: InterOp

Это решение работает с небольшим количеством JS и InterOp . После получения нового значения код использует JS для изменения значения select на предыдущее.

Код блейзора:

@inject IJSRuntime JsRuntime

<select id="mySelect" @onchange="onSelectFilter" class="form-control">
 <option value="0">Select a filter</option>
 <option value="1">Filter 1</option>
 <option value="2">Filter 2</option>
</select> 

<h1>@captured</h1>

@code
{

    private string v;
    private string captured;
    private async void onSelectFilter(ChangeEventArgs args)
    {
        v = (string)args.Value;
        captured = v;

        v="0";
        await JsRuntime.InvokeAsync<object>(  //<--- Interop
            "NewSelectValue",
            "mySelect",
            v);
    }
}

Код JS (например, в файле _Host.cshtml):

<script>
    window.NewSelectValue = (id, newVal) => {
        let e = document.getElementById(id);
        e.value=newVal;
    }        
</script>

Опция 2: только C#

Вы можете сделать это, форсируя изменения DOM из кода Blazor, два шага. Обратите внимание, что я добавил value="@v" в select тег:

<select @onchange="onSelectFilter" value="@v" class="form-control">
 <option value="0">Select a filter</option>
 <option value="1">Filter 1</option>
 <option value="2">Filter 2</option>
</select> 

<h1>@captured</h1>

@code
{

    private string v;
    private string captured;
    private async void onSelectFilter(ChangeEventArgs args)
    {
        // step 1: 
        v = (string)args.Value; // set new value
        StateHasChanged();    
        await Task.Delay(1);    // flush UI changes

        // do tasks:
        captured = v;

        // step 2: 
        v="0";                  // set default value
        StateHasChanged();    
        await Task.Delay(1);    // flush UI changes
    }
}

Результат: