时间戳

首页 > 解决方案 > 当我在 blazor 中选择一个选项时如何执行代码

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

问题描述

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

这就是我现在正在尝试的<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”时，我想执行一个方法。

标签： htmlformsblazor

解决方案

注意：在元素中选择了某些文本后会触发 onselect 事件。它与选择元素或选项的选择无关......据我记得，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 循环中的作者对象是一个作者列表，您可以按如下方式创建：

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

推荐阅读