当我在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事件就会触发。它与select元素或选项的选择无关。。。据我记忆所及，InputSelect有一些问题，但Blazor团队可能已经解决了这些问题。

以下代码片段描述了如何在Blazor中使用select元素，以及如何实现双向数据绑定；即从一个变量到一个元素，从一个元素到一个变量。你可以通过各种方式来实现这一点：大师史蒂夫·安德森表示，我的代码采用了最有效的方式来实现这个目标。

以下是使用双向数据绑定将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循环中的authors对象是一个可以如下创建的作者列表：

@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方法，并在选择了一个作者时将作者id传递给它，并且他的id是偶数。因此，我们可以这样做：

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

就是这样。

希望这能帮助。。。

完整的工作代码：

索引.razor

@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; }
}
}