Как выполнить код, когда я выбираю опцию в Blazor

Question

Я пытаюсь выполнить метод, когда я выбираю опцию, но я не могу понять, как это сделать.

это то, что я пытаюсь сейчас, <InputSelect/> находится в <EditForm/> object:

<tr>
   <th>
      <label for="layouts">Layout *</label><br />
      <InputSelect @bind-Value="label.Layout">
            <option value="">Selecteer</option>
            <option value="@availableLayouts.GetValue(0)" @onselect="OnSelectFinalCheck">Eindcontrole</option>
            <option value="@availableLayouts.GetValue(1)" @onselect="OnSelectStock">Voorraad</option>
            <option value="@availableLayouts.GetValue(2)">Uitbesteed werk</option>
            <option value="@availableLayouts.GetValue(3)">Geleidebon label</option>
        </InputSelect>
      <br />
   </th>
<th>

Так что это мой выбор, и когда я нажимаю "voorraad", я хочу выполнить метод.

Answer 1

Примечание. Событие onselect срабатывает после выделения некоторого текста в элементе. Это не имеет ничего общего с элементом select или выбором параметров ... Насколько я помню, у InputSelect были некоторые проблемы, но они, возможно, уже были решены командой Blazor.

Следующий код фрагмент описывает, как вы можете использовать элемент выбора в Blazor, и как реализовать двустороннюю привязку данных; то есть от переменной к элементу и от элемента к переменной. Вы можете сделать это различными способами: мой код использует наиболее эффективный способ достижения этой цели, по словам маэстро Стива Андерсона.

Вот фрагмент кода, который связывает переменную SelectedAuthorID с элементом select, использующим двусторонние данные привязка.

 <select @bind="@SelectedAuthorID">
    <option value=@(0)></option>
    @foreach (var author in authors)
    {
        <option value="@author.ID">@author.Name</option>
    }
</select>

Примечание: SelectedAuthorID - это свойство, которое определяет вспомогательную переменную:

    int _selectedAuthorID;
    private int SelectedAuthorID
    {
        get => _selectedAuthorID;
        set
        {
            if (_selectedAuthorID != value)
            {
                _selectedAuthorID = value;
            }
        }
     }

Ну, этот код довольно понятен, но если вы не полностью понимаю, что я сделал, не стесняйтесь спрашивать.

Объект авторов в разделе foreach l oop выше представляет собой список авторов, который вы можете создать следующим образом:

 @code {
     List<Author> authors= Enumerable.Range(1, 10).Select(i => new Author { ID 
                            = i, Name = $"Author {i.ToString()}" }).ToList();

 public class Author
 {
    public int ID { get; set; }
    public string Name { get; set; }
 }  

}

Теперь давайте попробуем смоделировать мои опции после выражения value="@availableLayouts.GetValue(1)". Это выражение оценивается как строковый литерал, верно? И когда пользователь выбирает эту опцию, OnSelectStock вызывается, чтобы что-то сделать.

Допустим, мы хотим вызвать метод OnSelectStock и передать ему идентификатор автора, когда выбран автор, и его идентификатор является четным. Таким образом, мы можем сделать что-то вроде этого:

    if (_selectedAuthorID != value)
        {
            _selectedAuthorID = value;
            if(value % 2 == 0)
            {
                OnSelectStock( value );
            }

        }

Вот и все.

Надеюсь, это поможет ...

Полный рабочий код:

Индекс .разор

@page "/"

<select @bind="@SelectedAuthorID">
    <option value=@(0)></option>
    @foreach (var author in authors)
    {
        <option value="@author.ID">@author.Name</option>
    }
</select>

<p>Selected Author ID: @authorID</p>

@code{

string authorID;

int _selectedAuthorID;
private int SelectedAuthorID
{
    get => _selectedAuthorID;
    set
    {
        if (_selectedAuthorID != value)
        {
            _selectedAuthorID = value;
      // Call OnSelectStock only if the author ID is an even number
            if (value % 2 == 0)
            {
                OnSelectStock(value);
            }
        }
    }
 }

 List<Author> authors = Enumerable.Range(1, 10).Select(i => new Author 
                { ID = i, Name = $"Author {i.ToString()}" }).ToList();

 private void OnSelectStock(int value)
 {
    authorID = value.ToString();
 }

 public class Author
 {
    public int ID { get; set; }
    public string Name { get; set; }
 }
}