当我选择一个选项时,我尝试执行一个方法,但我不知道如何执行此操作。
这就是我现在正在尝试的 <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”时,我想执行一个方法。
最佳答案
注意:在元素中选择某些文本后,将触发 onselect 事件。它与选择元素或选项选择无关...... 据我记得,InputSelect 有一些问题,但 Blazor 团队可能已经解决了这些问题。
以下代码片段描述了如何在 Blazor 中使用 select 元素,以及如何实现双向数据绑定(bind);即从变量到元素,以及从元素到变量。您可以通过多种方式做到这一点:根据大师史蒂夫·安德森的说法,我的代码采用了最有效的方式来实现这一目标。
下面是使用双向数据绑定(bind)将 SelectedAuthorID 变量绑定(bind)到 select 元素的代码片段。
<select @bind="@SelectedAuthorID">
<option value=@(0)></option>
@foreach (var author in authors)
{
<option value="@author.ID">@author.Name</option>
}
</select>
注意:SelectedAuthorID 是一个定义支持私有(private)变量的属性:
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; }
}
}
关于html - 当我在 blazor 中选择一个选项时如何执行代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60849027/