带有选择下拉菜单的 Blazor onchange 事件

Posted 2023-03-27

【中文标题】带有选择下拉菜单的 Blazor onchange 事件

【英文标题】：Blazor onchange event with select dropdown

【发布时间】：2018-10-01 12:48:57

【问题描述】：

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

所以我一直陷于试图在选择下拉值的变化时获得一个简单的onchange来开火。像这样：

<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 事件在同一页面上运行得很好。

【问题讨论】：

您使用的 blazor 版本，0.1.0 或 0.2.0

我使用的是 0.2.1

【参考方案1】：

你的答案应该在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

【讨论】：

Blazor 与第一个版本相比发生了巨大变化......虽然我对此进行了测试并且效果很好，但对 Blazor 的快速更改很可能最终导致此答案不再适用。如果发生这种情况，请告诉我，我会更新答案。

即使语法正确，我也无法为 onchange 事件触发此事件。

当前要求您执行 注意 on change 前面的 @

@Patrick Knott @functions 此时已被删除，取而代之的是 @code。

实际上 onchange 应该是 @onchange 这个在预览版 6 中的语法更改 - 这是 3.0 版本的最终事件处理程序语法。

【参考方案2】：

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

【讨论】：

正是我需要的选择。

非常有用，尤其是当您需要更改具有相同绑定的其他下拉菜单时！

【参考方案3】：

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

下面是我的工作代码。

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

【讨论】：

在 2021 年为我工作，使用 @onchange="DoStuff"（无括号）

【参考方案4】：

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

onchange="@dostuff"

注意@

【讨论】：

当然我尝试了两种使用@的方法。 @dostuff() 和@dostuff。两者都给出编译错误，说明您不能将类型 void 隐式转换为对象

您的代码对我有用。也许你可以在某个地方分享你的整个项目？

我很抱歉。我想分享代码，但目前它已完全损坏，因此您将无法调试和切换该下拉列表以查看异常。最新的 blazor nuget 包以某种方式破坏了路由，所以你得到的只是 Uncaught (in promise) 错误：System.InvalidOperationException：'Router' 找不到任何带有 '/' 路由的组件。即使在示例项目中

无论如何分享，也很乐意提供帮助

是的，总是使用“@”，你也可以使用@onchange="dostuff"

【参考方案5】：

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

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

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

【参考方案6】：

你也可以试试：

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