49

注意：这个问题是关于 Blazor (0.2.1) 的预发布问题。

So I have been stuck trying to get a simple onchange to fire when a select dropdown value changes. 像这样：

<select class="form-control d-flex" onchange="(dostuff())">
    @foreach (var template in templatestate.templates)
    {
        <option value=@template.Name>@template.Name</option>
    }
</select>

使用被调用的方法：

void dostuff()
{
   Console.WriteLine("first spot is firing");
    _template = templatestate.templates.FirstOrDefault(x => x.Name == 
    _template.Name);
    Console.WriteLine("second spot is firing");
}

无论我如何尝试重新定位它，我得到的结果都是浏览器中的这个错误。

Uncaught Error: System.ArgumentException: There is no event handler with ID 0

有什么明显和关键的东西我错过了吗？因为我有一个按钮onclick事件可以在同一页面上正常工作。

4

6 回答 6

71

您的答案应该在 cshtml 中：

<select @onchange="DoStuff">  //pre-3.0 versions: onchange=@DoStuff
    @foreach (var template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

然后你的@functions（在剃须刀组件@code中。请参阅：Razor Syntax: Functions）应该如下所示：

@functions {  //use @code in razor components.
    List<string> templates = new List<string>() { "Maui", "Hawaii", "Niihau", "Kauai", "Kahoolawe" };
    string SelectedString = "Maui";

    void DoStuff(ChangeEventArgs e)
    {
        SelectedString = e.Value.ToString();
        Console.WriteLine("It is definitely: " + SelectedString);
    }
}

您也可以只使用绑定...

<select @bind="SelectedString"> //pre 3.0 bind="@SelectedString"

但是 @onchange="DoStuff" 允许您在选择时执行逻辑。

这是一些更改的链接：Blazor WebAssembly 3.2.0 Preview 5 release now available

于 2018-05-10T20:58:40.813 回答
32

作为设置 onchange 事件的替代方法，您可以将下拉列表绑定到属性并处理属性集中的更改。这样，您就可以在同一过程中全部选择值，而无需转换对象值。另外，如果您已经在选择上使用@bind，那么您也无法在其上使用 onchange。

<select @bind="BoundID">
 ...
</select>

@code {
  private int? _boundID = null;
  private int? BoundID
  {
    get
    {
      return _boundID;
    }
    set
    {
      _boundID = value;
     //run your process here to handle dropdown changes
    }
  }
}
于 2019-12-13T19:42:37.570 回答
6

上面的答案对我不起作用，出现编译错误。

下面是我的工作代码。

@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}
于 2020-01-21T10:29:04.330 回答
3

对于初学者，您没有使用正确的绑定语法：

onchange="@dostuff"

注意@

于 2018-04-20T18:50:18.080 回答
2

只是想添加到其他答案，您也可以select使用 lambda 表达式访问该值：

<select @onchange="@(e => ViewModel.TargetProperty = e.Value.ToString())">

如果您更喜欢将代码直接放在元素中。

于 2021-08-12T20:55:59.630 回答
0

你也可以试试：

<select @onchange="(e => DoStuff(e.Value.ToString()))">
于 2022-03-05T02:33:37.897 回答