#c# #.net-core #blazor
#c# #.net-ядро #blazor
Вопрос:
У меня есть серия из 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?
Спасибо!
Ответ №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;
}
}