Блог

У меня есть серия из 3 входных выборок, причем 2-й каскадируется из первого с помощью 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>
 

@раздел кода

  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?

Спасибо!

Два больших пальца вверх для элементов управления 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;
    }
}