Html 在Blazor中不会调用select元素上的onSelect函数

我目前正在开发一个显示一些电影的应用程序。我有一个成功检索电影的API，还可以选择按特定类型获取电影。为此，我创建了一个Select元素，动态加载了不同类型的元素。单击其中一种类型时，我希望通过使用API更新电影，以仅获取所选类型的电影

不幸的是，当我选择一个选项时，什么也没有发生。请注意，我已经确认API调用是有效的，因此它必须包含在代码中。 这是HTML元素：

<div class="content px-sm-3">
    <select>
        <option onselect="async () => await changeMoviesByGenre('None')" value="None">None</option>
        @foreach (var genre in genres)
        {
            <option value=@genre onselect="async () => await changeMoviesByGenre(genre)">@genre</option>
        }
    </select>
</div>

---

我设法解决了这个问题。 如果你有和我一样的问题，我用这个来修复它，我不知道为什么它能工作，但它能

我没有使用foreach中的值，而是使用ChangedEventArgs参数。我还将onchange设置为Select元素，而不是Options元素。这就是我的代码现在的样子：

<div class="content px-sm-3">
    <select @onchange=@changeMovies>
        <option value="None"> None </option>
        @foreach (var genre in genres) {
            <option value=@genre> @genre </option>
        }
    </select>
</div>

---

我设法解决了这个问题。 如果你有和我一样的问题，我用这个来修复它，我不知道为什么它能工作，但它能

我没有使用foreach中的值，而是使用ChangedEventArgs参数。我还将onchange设置为Select元素，而不是Options元素。这就是我的代码现在的样子：

<div class="content px-sm-3">
    <select @onchange=@changeMovies>
        <option value="None"> None </option>
        @foreach (var genre in genres) {
            <option value=@genre> @genre </option>
        }
    </select>
</div>

OnSelect不是你想象的那样。当您在输入元素中选择文本时，会触发该选项

您在回答您的答案时介绍了一种更简单的方法，我在答案中包含了完整的工作页面，即：

@page "/Test"

<div class="content px-sm-3 m-2">
    <select @onchange="OnChange">
        <option value="None">None</option>
        @foreach (var genre in genres)
        {
            <option value="@genre">@genre</option>
        }
    </select>
</div>
<div class="m-2">Selected: @SelectedGenre</div>

@code {

    private List<string> genres
        => new List<string>() { "Rock", "Folk", "Blues", "Pop" };

    private string SelectedGenre = string.Empty;

    private async Task OnChange(ChangeEventArgs e)
    {
        var selected = e.Value.ToString();
        SelectedGenre = "Getting it, just wait!!!";
        await Task.Delay(3000);
        if (selected.Equals("None", StringComparison.CurrentCultureIgnoreCase))
            this.SelectedGenre = "Give it another Go!";
        else
            this.SelectedGenre = selected;
    }
}

在我的示例中，我添加了wait Task.Delay1000；模拟异步数据库调用，以便将处理程序声明为异步

注:

OnChange中的e是一个对象，因此您可以将其转换为您期望的对象。 初始化时已经选择了None，所以如果您先选择它，就不会有OnChange，因为没有任何更改。 请看。

OnSelect并不是您想象的那样。当您在输入元素中选择文本时，会触发该选项

您在回答您的答案时介绍了一种更简单的方法，我在答案中包含了完整的工作页面，即：

@page "/Test"

<div class="content px-sm-3 m-2">
    <select @onchange="OnChange">
        <option value="None">None</option>
        @foreach (var genre in genres)
        {
            <option value="@genre">@genre</option>
        }
    </select>
</div>
<div class="m-2">Selected: @SelectedGenre</div>

@code {

    private List<string> genres
        => new List<string>() { "Rock", "Folk", "Blues", "Pop" };

    private string SelectedGenre = string.Empty;

    private async Task OnChange(ChangeEventArgs e)
    {
        var selected = e.Value.ToString();
        SelectedGenre = "Getting it, just wait!!!";
        await Task.Delay(3000);
        if (selected.Equals("None", StringComparison.CurrentCultureIgnoreCase))
            this.SelectedGenre = "Give it another Go!";
        else
            this.SelectedGenre = selected;
    }
}

在我的示例中，我添加了wait Task.Delay1000；模拟异步数据库调用，以便将处理程序声明为异步

注:

OnChange中的e是一个对象，因此您可以将其转换为您期望的对象。 初始化时已经选择了None，所以如果您先选择它，就不会有OnChange，因为没有任何更改。

---

看。

我喜欢这个答案。然而，我认为建议使用异步任务。@Bennyboy1973有趣的是，我已经阅读了有冲突的建议，所以我遵循了从EventCallbackFactory返回的ASPNetCore Repo中的源代码线索。您将看到InvokeAsync返回到EventCallbackWorkItem，它在其中切换到Invoke，并返回Task.Completed。在内心深处，它看起来像是在下沉。如果您正在使用带有wait的组件EventCallback，那么是的，这是一个很好的实践。看起来像是赛马，很好的侦查。现在，让我按照源代码返回到马的课程：谢谢你解释为什么这行得通而我的初始代码不行！我对任务使用async/await的原因是，否则UI不会更新。我忘了是在哪里找到的，但显然，当使用异步void时，更新UI的方法没有被调用？因此，我遇到了一个问题，即我的函数将被调用，但列表不会更新，这就是为什么我将async/await与任务结合使用。@Bram我已更新了答案，以便更符合您的问题。好的编码。我喜欢这个答案。然而，我认为建议使用异步任务。@Bennyboy1973有趣的是，我已经阅读了有冲突的建议，所以我遵循了从EventCallbackFactory返回的ASPNetCore Repo中的源代码线索。您将看到InvokeAsync返回到EventCallbackWorkItem，它在其中切换到Invoke，并返回Task.Completed。在内心深处，它看起来像是在下沉。如果您正在使用带有wait的组件EventCallback，那么是的，这是一个很好的实践。看起来像是赛马，很好的侦查。现在，让我按照源代码返回到马的课程：谢谢你解释为什么这行得通而我的初始代码不行！我对任务使用async/await的原因是，否则UI不会更新。我忘了是在哪里找到的，但显然，当使用异步void时，更新UI的方法没有被调用？因此，我遇到了一个问题，即我的函数将被调用，但列表不会更新，这就是为什么我将async/await与任务结合使用。@Bram我已更新了答案，以便更符合您的问题。好的编码。

async void MyEventHander() {}` //for handlers that need to do async work and you don't need the UI process to wait on the completion of the handler.
async Task MyEventHander() {}` //for handlers that need to complete before re-rendering.
void MyEventHander() {}` //for handlers with no async work.