主页 / coding / 问题 / 79377062
Accepted
Sas Gabriel
Asked: 2025-01-22 16:59:13 +0800 CST

为什么 blazor select/inputselect 在新应用中不起作用？

  • 772

我刚刚创建了一个新的 .net blazor web 应用项目并添加了此代码

@page "/weather"

@attribute [StreamRendering] @rendermode InteractiveServer <PageTitle>Weather</PageTitle>

<h1>Weather</h1>

@using System.Diagnostics

<h3>Dropdown Example</h3>

<select @bind="SelectedSet" class="form-select">
    <option disabled selected value="">-- Select a Set --</option>
    @foreach (var set in Sets)
    {
        <option value="@set">@set</option>
    } </select> <p>You selected: @SelectedSet</p>

<div class="mb-3">
    <label for="SetType" class="form-label">Set Type</label>
    <InputSelect id="SetType" @bind-Value="CollectionSet" class="form-select">
        @foreach (var set in Sets)
        {
            <option value="@set">@set</option>
        }
    </InputSelect> </div> <p>You selected: @CollectionSet</p>

@code {
    private List<string> Sets = new List<string> { "Pad", "Leather", "Bronze" };
    private string SelectedSet { get; set; }
    private string CollectionSet { get; set; }

    private void OnSetChanged(ChangeEventArgs e)
    {
        Debug.WriteLine($"Selected value changed to: {SelectedSet}");
        // Additional logic can be added here
    } }

但是当我在方法上设置断点时，它就是不起作用。我不明白为什么事件没有触发。起初我使用枚举，我以为是因为这个原因，但对于一个简单的字符串，它仍然不起作用

asp.net-core

2 个回答

  1. Best Answer

    您的（第一个）代码应该已经可以工作了。如果不能，您可能没有设置交互性。将此行添加到文件顶部：

    @rendermode InteractiveServer

    UI 应该会随着选择而更新。但请注意，这OnParametersSet()不是跟踪此操作的有用位置，我预计 Debug.WriteLine() 只会发生一次。

    • 0

  2. @bind元素的指令自动<InputSelect>处理数据绑定，无需显式绑定ChangeEventArgs或相关事件。

    如果希望在值改变时运行一些额外的逻辑（比如调用ValueChanged方法），则需要明确绑定到该@onchange事件。

    这是我的测试代码，它会对您有所帮助。

    @page "/weather"
@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

@using System.Diagnostics

<h3>Dropdown Example</h3>

<select @onchange="OnSelectedSetChanged" class="form-select">
    <option disabled selected value="">-- Select a Set --</option>
    @foreach (var set in Sets)
    {
        <option value="@set">@set</option>
    }
</select>
<p>You selected: @SelectedSet</p>

<div class="mb-3">
    <label for="SetType" class="form-label">Set Type</label>
    <InputSelect id="SetType" @bind-Value="CollectionSet" @onchange="OnCollectionSetChanged" class="form-select">
        @foreach (var set in Sets)
        {
            <option value="@set">@set</option>
        }
    </InputSelect>
</div>
<p>You selected: @CollectionSet</p>

@code {
    private List<string> Sets = new List<string> { "Pad", "Leather", "Bronze" };

    private string SelectedSet { get; set; } = string.Empty;
    private string CollectionSet { get; set; } = string.Empty;

    private void OnSelectedSetChanged(ChangeEventArgs e)
    {
        SelectedSet = e.Value?.ToString(); 
        Debug.WriteLine($"SelectedSet changed to: {SelectedSet}");
    }
    // will not been invoked
    private void OnCollectionSetChanged(ChangeEventArgs e)
    {
        Debug.WriteLine($"CollectionSet changed to: {CollectionSet}");
    }
}

    相关链接：blazor中的ValueChanged和ValueEpression？

    • 0

相关问题