У меня есть страница заказа в моем приложении Blazor, которая принимает детали заказа, с таблицей, в которую добавляются строки заказа. У меня есть функция «CalculateTotals ()», которую необходимо вызывать каждый раз при изменении поля, например количества или цены за единицу, для обновления итогов в пользовательском интерфейсе, прежде чем пользователь отправит форму заказа.
Кажется, что все функции работают отлично для любых элементов управления, кроме <select>. В каждой строке заказа также есть набор «налогов». Это представлено циклом по налоговым строкам для каждой строки заказа и отображением раскрывающегося списка, в котором пользователь выбирает налоговый код. Когда выбор сделан, кажется, что @onchange сработал, поскольку я вижу изменение значения в выводе json модели, но функция CalculateTotals никогда не вызывается, поэтому событие onfieldchanged в моем коде не выполняется. срабатывает. Кажется, что он делает это для любого <select>, который я использую, независимо от того, где он находится в форме редактирования. Я использую вместо <InputSelect>, поскольку мои значения выпадающего списка - Guids. У кого-нибудь есть идея, почему событие onFieldChange не будет вызвано изменением поля модели? Ниже приведен фрагмент моего кода.
<EditForm EditContext="@formContext">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="row">
<div class="col-12">
<div class="card">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="table mt-4" ondragover="event.preventDefault();">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Cost</th>
<th>Taxes</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
@if (order.OrderLines != null)
{
foreach (var line in order.OrderLines.OrderBy(x => x.LineNumber))
{
<tr >
<div id="dragdiv" class="dragula-handle" draggable="true" @ondrop="@(()=> Drop(line))" @ondrag="@(()=> StartDrag(line))" @key="line.Id"></div>
<td>
<InputText id="item-desc" @bind-Value="line.Description" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Description" />
</td>
<td>
<InputNumber id="item-qty" @bind-Value="line.Quantity" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Qty" />
</td>
<td>
<InputNumber id="item-unit-cost" @bind-Value="@line.AmountPerUnit" class="form-control form-control-sm" disabled="@FormDisabled" placeholder="Unit Cost" />
<ValidationMessage For="@(() => line.AmountPerUnit)" />
</td>
<td>
@if (line.Taxes != null)
{
foreach (var tax in line.Taxes)
{
<select id="tax-@tax.TaxCodeId" @bind="tax.TaxCodeId" class="form-control">
@if (taxCodes != null)
{
foreach (var taxcode in taxCodes)
{
<option value="@taxcode.Id">@taxcode.Name</option>
}
}
</select>
}
}
</td>
</tr>
}
}
</tbody>
</table>
</div> <!-- end table-responsive-->
</div> <!-- end col -->
</div>
<!-- end row -->
</div> <!-- end card-body-->
</div> <!-- end card -->
</div> <!-- end col-->
</div>
</EditForm>
@code {
protected override async Task OnInitializedAsync()
{
await Load();
formContext = new EditContext(order);
formContext.OnFieldChanged += EditContext_OnFieldChanged;
await base.OnInitializedAsync();
}
private void EditContext_OnFieldChanged(object sender,FieldChangedEventArgs e)
{
Console.WriteLine(e.FieldIdentifier.FieldName);
if (formContext.Validate())
{
// You can validate the EditContext here, and do necessary
CalculateTotals();
}
}
}