【发布时间】:2023-04-03 14:21:01
【问题描述】:
我正在构建酒店服务 Web 应用程序,我想使用名为 MatAutocompleteList 的 MatBlazor 组件来选择客户进行预订我在屏幕上选择客户时遇到了问题
我删除了这个值,将其留空,然后按 Enter 应用程序会引发异常:
System.ArgumentNullException: Value cannot be null. (Parameter 'model')
at Microsoft.AspNetCore.Components.Forms.FieldIdentifier..ctor(Object model, String fieldName)
at Microsoft.AspNetCore.Components.Forms.FieldIdentifier.Create[TField](Expression`1 accessor)
at Microsoft.AspNetCore.Components.Forms.ValidationMessage`1.OnParametersSet()
at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
组件的用法如下:
@using HotelServiceSystem.Entities
@using HotelServiceSystem.Features
@using HotelServiceSystem.Interfaces.Services
@using HotelServiceSystem.Core
@inject IHotelReservationService hotelReservationService
@inject IClientService clientService
@inject IRoomService roomService
<EditForm Model="@ReservationModel" OnValidSubmit="@SaveReservation">
<FluentValidationValidator/>
@if (ClientList != null && ClientList.Any())
{
<MatAutocompleteList Items="@ClientList.ToArray()" TItem="Client" CustomStringSelector="@(i => i.FirstName + " " + i.LastName)" Label="Choose client" @bind-Value="@ReservationModel.Client" FullWidth="@true" ShowClearButton="@true">
<ItemTemplate Context="template">
<div style="display: flex; flex-direction: row; width: 100%;">
<div>@template.FirstName @template.LastName @template.PhoneNumber</div>
</div>
</ItemTemplate>
</MatAutocompleteList>
}
else
{
<p>First u need to add clients</p>
}
<ValidationMessage For="@(()=> ReservationModel.Client.Id)"></ValidationMessage>
<HssInputCustom Caption="Number of guests" @bind-Value="ReservationModel.NumberOfGuests"/>
<div class="col-12 row">
<label class="col-2">Date From</label>
<MatDatePicker class="form-control col-3" @bind-Value="ReservationModel.DateFrom"/>
</div>
<div class="col-12 row">
<label class="col-2">Date to</label>
<MatDatePicker class="form-control col-3" @bind-Value="ReservationModel.DateTo"/>
<ValidationMessage For="@(() => ReservationModel.DateTo)"></ValidationMessage>
</div>
<div class="form-group">
<HSSMultiSelector Selected="@_selected" NotSelected="@_notSelected"/>
</div>
<HssInputCustom Caption="Price" @bind-Value="ReservationModel.Price"/>
<HssInputCustom Caption="Discount" @bind-Value="ReservationModel.Discount"/>
<div class="col-12 row">
<span class="col-2"></span>
<input type="submit" class="form-control col-1 btn btn-primary" value="Submit"/>
</div>
</EditForm>
@code {
private HotelReservation ReservationModel { get; set; }
private readonly List<MultiSelector> _selected = new List<MultiSelector>();
private List<MultiSelector> _notSelected = new List<MultiSelector>();
private List<Room> _selectedRooms = new List<Room>();
private List<Room> RoomList { get; set; }
private List<Client> ClientList { get; set; }
private List<string> ClientIdList { get; set; }
[Parameter]
public EventCallback<HotelReservation> OnReservationAdd { get; set; }
protected override async Task OnInitializedAsync()
{
RoomList = roomService.GetAllRoomsAsync();
ClientList = clientService.GetAllClients();
ReservationModel = new HotelReservation {Client = new Client()};
_notSelected = RoomList.Select(x => new MultiSelector(x.Id.ToString(), $"Room Number : {x.RoomIdentifier}")).ToList();
await base.OnInitializedAsync();
}
private async Task SaveReservation()
{
_selectedRooms = RoomList.Where(x => _selected.Any(y => y.Key == x.Id.ToString())).ToList();
_selectedRooms.ForEach( x=> ReservationModel.RoomReservations.Add(new RoomReservation
{
Reservation = ReservationModel,
Room = x
}));
await hotelReservationService.AddHotelReservationAsync(ReservationModel);
await OnReservationAdd.InvokeAsync(ReservationModel);
ReservationModel = new HotelReservation() {Client = new Client()};
}
}
我绑定值的模型也被正确创建。
private Client _selectedClient = new Client();
我不知道如何阻止用户这样做,或者我是否能以某种方式捕获此异常。也许有人有类似的问题。非常有用的帮助!
【问题讨论】:
-
"然后按回车"...这就是问题所在。请发布更多上下文。
-
@enet 我可以按回车键或单击退出此控件,然后发生此异常
-
让我猜猜...您的代码在 EditForm 组件中,对吧?当用户按下回车键时,无论您是否使用 EditForm,都会发生发布请求......问题是按下回车键会触发表单的提交。现在,如果你想让你的病人得到治疗,请给他看。
-
@enet EditForm 不是这里的问题,我已经测试过了。当我离开空白并单击此表单时也会发生这种情况,然后抛出异常
-
没有看到你的代码就不能说什么了......
标签: c# asp.net-core web-applications blazor matblazor