当我在 blazor 中选择一个选项时如何执行代码

Question

当我选择一个选项时，我试图执行一个方法，但我不知道如何执行此操作。

这就是我现在正在尝试的<InputSelect/>对象<EditForm/>：

<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 事件。它与选择元素或选项选择无关...据我记得，InputSelect 有一些问题，但 Blazor 团队可能已经解决了这些问题。以下代码片段描述了如何在 Blazor 中使用 select 元素，以及如何实现双向数据绑定；即从变量到元素，以及从元素到变量。您可以通过多种方式做到这一点：根据大师史蒂夫·安德森的说法，我的代码采用了最有效的方式来实现这一目标。下面的代码片段使用双向数据绑定将 SelectedAuthorID 变量绑定到 select 元素。&nbsp;<select @bind="@SelectedAuthorID">&nbsp; &nbsp; <option value=@(0)></option>&nbsp; &nbsp; @foreach (var author in authors)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; <option value="@author.ID">@author.Name</option>&nbsp; &nbsp; }</select>注意：SelectedAuthorID 是一个定义支持私有变量的属性：&nbsp; &nbsp; int _selectedAuthorID;&nbsp; &nbsp; private int SelectedAuthorID&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; get => _selectedAuthorID;&nbsp; &nbsp; &nbsp; &nbsp; set&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (_selectedAuthorID != value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedAuthorID = value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}嗯，这段代码是非常不言自明的，但是如果您不完全理解我所做的事情，请随时询问。上面 foreach 循环中的authors 对象是您可以按如下方式创建的作者列表：&nbsp;@code {&nbsp; &nbsp; &nbsp;List<Author> authors= Enumerable.Range(1, 10).Select(i => new Author { ID&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = i, Name = $"Author {i.ToString()}" }).ToList();&nbsp;public class Author&nbsp;{&nbsp; &nbsp; public int ID { get; set; }&nbsp; &nbsp; public string Name { get; set; }&nbsp;}&nbsp;&nbsp;}现在，让我们尝试在 value="@availableLayouts.GetValue(1)"表达式之后对我的选项进行建模。该表达式被计算为字符串文字，对吧？当用户选择此选项时，将调用 OnSelectStock 来执行某些操作。假设我们要调用 OnSelectStock 方法，并在选择作者时将作者 id 传递给它，而他的 id 是偶数。因此我们可以这样做：&nbsp; &nbsp; if (_selectedAuthorID != value)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedAuthorID = value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(value % 2 == 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnSelectStock( value );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }就是这个。希望这可以帮助...完整的工作代码：索引剃刀@page "/"<select @bind="@SelectedAuthorID">&nbsp; &nbsp; <option value=@(0)></option>&nbsp; &nbsp; @foreach (var author in authors)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; <option value="@author.ID">@author.Name</option>&nbsp; &nbsp; }</select><p>Selected Author ID: @authorID</p>@code{string authorID;int _selectedAuthorID;private int SelectedAuthorID{&nbsp; &nbsp; get => _selectedAuthorID;&nbsp; &nbsp; set&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; if (_selectedAuthorID != value)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedAuthorID = value;&nbsp; &nbsp; &nbsp; // Call OnSelectStock only if the author ID is an even number&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (value % 2 == 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; OnSelectStock(value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;}&nbsp;List<Author> authors = Enumerable.Range(1, 10).Select(i => new Author&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { ID = i, Name = $"Author {i.ToString()}" }).ToList();&nbsp;private void OnSelectStock(int value)&nbsp;{&nbsp; &nbsp; authorID = value.ToString();&nbsp;}&nbsp;public class Author&nbsp;{&nbsp; &nbsp; public int ID { get; set; }&nbsp; &nbsp; public string Name { get; set; }&nbsp;}}