Blazor 服务器：<InputSelect 和 @oninput 事件给出了奇怪的行为答案

【问题标题】：Blazor Server: <InputSelect and @oninput event is giving bizarre behaviorBlazor 服务器：<InputSelect 和 @oninput 事件给出了奇怪的行为
【发布时间】：2023-03-18 15:21:01
【问题描述】：

我有一系列 3 个 InputSelects，第二个通过 SQL 查询从第一个级联。当通过 oninput 事件选择第一个下拉列表时，我有额外的逻辑运行。（我知道 onchange 和 bind-Value 不能在同一个元素上声明）。

选择第一个后，我的值将填充，然后在瞬间从文本区域中消失，尽管数据实际上存在于模型中，并且其余逻辑正常工作，通过填充第二个框相关记录：

选择前：

选择后：

相关代码：

<EditForm Model="@plansold" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
            <FluentValidator />
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            @if (categories == null)
                            {<p><em>Loading ...</em></p>} //Null check
                            else
                            {                                   
                                <InputSelect TValue="string" class="form-control" @bind-Value="plansold.PlanCategoryDesc" @oninput="CategoryChange">
                                    <option value="Select..." selected disabled="disabled">(Select Plan Category)</option>
                                    @foreach (var c in categories)
                                    {
                                        <option value="@c.id"> @c.Description</option>
                                    }
                                </InputSelect>
                                <ValidationMessage For="@(() => plansold.PlanCategoryDesc)" class="text-danger" />

                            }
                        </div>
                    </div>

@code 部分

 private async Task CategoryChange(ChangeEventArgs e)
        {

            if (string.IsNullOrWhiteSpace(e.Value.ToString()) == false)
            {
                plansold.PlanCategory = Convert.ToInt32(e.Value.ToString());
                catid = plansold.PlanCategory; // int; model property
                plans = await plansService.GetPlanOptions(catid); //comes from SQL
                plandesc = await plansService.GetPlanDescByID(catid);  //comes from SQL
                plansold.PlanCategoryDesc = plandesc.Description; //string; model property
                
            }
            else
            {
                plansold.PlanCategory = 0;
            }
        }

最初，这些是普通元素，使用@onchange，它工作得很好，但是为了让验证消息像我的文本框一样消失，我切换到并在兔子洞中度过了一整天试图获得行为集正确的。我也试过 bind-Value:event="CategoryChange" 无济于事。

这是 Blazor 服务器 5.0。有谁知道如何在 oninput 事件后将显示持久保存在下拉元素中？

谢谢！

【问题讨论】：

标签： c# .net-core blazor

【解决方案1】：

为 Syncfusion 控件点赞：

          <div class="col-md-4">
                <div class="form-group">
                    @if (categories == null)
                    {<p><em>Loading ...</em></p>} //Null check
                    else
                    {
                        <div class="padding-top">
                            <SfDropDownList TItem="ITQA_CategoryModel" TValue="string" Placeholder="(Select Plan Category)" PopupHeight="auto" DataSource="@categories">
                                <DropDownListEvents TItem="ITQA_CategoryModel" TValue="string" ValueChange="@CategoryChange"></DropDownListEvents>
                                <DropDownListFieldSettings Text="Description" Value="id"></DropDownListFieldSettings>
                            </SfDropDownList>
                            <ValidationMessage For="@(() => plansold.PlanCategoryDesc)" class="text-danger" />
                        </div>
                    }
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <div class="padding-top">
                        <SfDropDownList Enabled="@PlansDetailEnabled" TItem="ITQA_PlansModel" TValue="string" Placeholder="(Select Plan Length)" PopupHeight="auto" DataSource="@plans">
                            <DropDownListEvents TItem="ITQA_PlansModel" TValue="string" ValueChange="@PlanChange"></DropDownListEvents>
                            <DropDownListFieldSettings Text="PlanLength" Value="id"></DropDownListFieldSettings>
                        </SfDropDownList>
                        <ValidationMessage For="@(() => plansold.PlanLength)" class="text-danger" />
                    </div>
                </div>
            </div>

 private async Task CategoryChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ITQA_CategoryModel> args)
{
    if (string.IsNullOrWhiteSpace(args.Value.ToString()) == false)
    {
        catid = Convert.ToInt32(args.Value);
        plans = await plansService.GetPlanOptions(catid);
        plansold.PlanCategory = Convert.ToInt32(args.Value);
        plansold.PlanCategoryDesc = args.ItemData.Description;
        PlansDetailEnabled = true;

    }
}

private void PlanChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ITQA_PlansModel> args)
{
    if (string.IsNullOrWhiteSpace(args.Value.ToString()) == false)
    {
        plansold.PlanLength = args.ItemData.PlanLength;
        plansold.PlanCost = args.ItemData.PlanCost;
    }
}

【讨论】：