如果下拉列表中存在项目，是否有办法自行进入输入文本？

Question

我在Blazor .NET 5的一个系统上订票，当你第一次进入订票时在select下拉列表你会看到“Choose your name”和“New Passenger”。 例如：

如果列表中有一名或多名乘客，（在这种情况下“Testc Testc”是我们的测试乘客）我需要默认加载或将此数据自行绑定到输入文本，而无需在用户重新点击时单击- 进入订单系统，想为同一个订单添加更多的订单。

我尝试执行 function 来保存迭代列表（如果 passenger.Count() > 0）并传递给 @bind-value="myfunction()" 上的输入，但那样做是不可能的。 也许我需要使用 javascript？

Answer 1

这是一个相当详细的答案，我做了一些很大的猜测。 [我整个早上都坐在飞机上感到无聊]。

有几个设计考虑因素，主要是：

1. 您正在切换进出编辑模式，需要考虑如何跟踪数据 state。
2. 您可能正在与异步数据库上下文或 Web API 进行交互。

我创建了一个接口来描述我们需要与乘客数据存储交互的数据管道功能。 都是异步的。

public interface IDataBroker
{
    public ValueTask<IQueryable<Passenger>> GetPassengersAsync();
    public ValueTask<Passenger?> GetItemAsync(Guid uid);
    public ValueTask<bool> AddItemAsync(Passenger record);
    public ValueTask<bool> UpdateItemAsync(Passenger record);
    public ValueTask<bool> DeleteItemAsync(Passenger record);
}

我已经这样定义了 Passenger 记录：

public sealed record Passenger
{
    public Guid Uid { get; init; } = Guid.Empty;
    public string FirstName { get; set; } = "Not Set";
    public string LastName { get; set; } = "Not Set";
}

以及该记录的编辑上下文：

public sealed class PassengerEditContext
{
    public Passenger BaseRecord { get; private set; }
    public Guid Uid { get; private set; }
    public string? FirstName { get; set; }
    public string? LastName { get; set; }

    public PassengerEditContext(Passenger passenger)
    {
        this.BaseRecord = passenger;
        this.Load(passenger);
    }

    public void Load(Passenger? passenger)
    {
        passenger = passenger ?? new();
        this.BaseRecord = passenger;
        this.Uid = passenger.Uid;
        this.FirstName = passenger.FirstName;
        this.LastName = passenger.LastName;
    }

    public Passenger Record => new()
    {
        Uid = this.Uid,
        FirstName = this.FirstName ?? string.Empty,
        LastName = this.LastName ?? string.Empty
    };

    public bool IsDirty => this.BaseRecord != this.Record;
}

视图服务负责组件表单的所有数据管理：

public sealed class DataPresenterService
{
    private IDataBroker _dataBroker;
    public Task LoadingTask { get; private set; } = Task.CompletedTask;

    public DataPresenterService(IDataBroker dataBroker)
    {
        _dataBroker = dataBroker;
        LoadingTask = this.LoadData();
    }

    public readonly PassengerEditContext Passenger = new(new());

    public IEnumerable<Passenger> Passengers = Enumerable.Empty<Passenger>();

    public async Task LoadData()
        => this.Passengers = await _dataBroker.GetPassengersAsync();

    public async ValueTask GetPassengerAsync(Guid uid)
    {
        var passenger = await _dataBroker.GetItemAsync(uid);
        this.Passenger.Load(passenger);
    }

    public ValueTask ResetPassengerAsync()
    {
        this.Passenger.Load(this.Passenger.BaseRecord);
        return ValueTask.CompletedTask;
    }

    public async ValueTask SavePassengerAsync()
    {

        if (this.Passenger.Uid == Guid.Empty)
        {
            var passenger = this.Passenger.Record with { Uid = Guid.NewGuid() };
            await _dataBroker.AddItemAsync(passenger);
            this.Passenger.Load(passenger);
        }
        else
        {
            var passenger = this.Passenger.Record with { };
            await _dataBroker.UpdateItemAsync(passenger);
            this.Passenger.Load(passenger);
        }
        await LoadData();
    }

    public async ValueTask<bool> DeletePassengerAsync(Passenger passenger)
        => await _dataBroker.DeleteItemAsync(passenger);
}

和编辑表格：

@page "/"
@inject DataPresenterService Service
<PageTitle>Index</PageTitle>

<h1>Demo</h1>

<div class="m-2 row">
    <div class="col-12 col-lg-4 mb-2">
        <label class="form-label text-muted small">Passenger</label>
        <select class="form-select" disabled="@_isDirty" value="@this.Service.Passenger.Uid" @onchange=OnChangePassenger>
            @if(this.Service.Passenger.Uid == Guid.Empty)
            {
                <option selected value="@Guid.Empty" > -- Add Passenger -- </option>
            }
            else
            {
                <option value="@Guid.Empty"> -- Add Passenger -- </option>
            }

            @foreach(var passenger in this.Service.Passengers)
            {
                <option value="@passenger.Uid">@passenger.FirstName @passenger.LastName</option>
            }
        </select>
    </div>
    <div class="col-12 col-lg-4 mb-2">
        <label class="form-label text-muted small">First Name</label>
        <input class="form-control" @bind=this.Service.Passenger.FirstName @bind:event="oninput" />
    </div>
    <div class="col-12 col-lg-4 mb-2">
        <label class="form-label text-muted small">Last Name</label>
        <input class="form-control" @bind=this.Service.Passenger.LastName @bind:event="oninput" />
    </div>
    <div class="col-12 text-end mb-2">
        <div class="btn-group">
            <button class="btn btn-primary btn-sm" disabled="@_isClean" @onclick=UpdatePassenger>@_saveText</button>
            <button class="btn btn-danger btn-sm" disabled="@_isClean" @onclick=ResetPassenger>Discard</button>
        </div>
    </div>

</div>


@code {
    private bool _isDirty => this.Service.Passenger.IsDirty;
    private bool _isClean => !this.Service.Passenger.IsDirty;
    private bool _isNew => this.Service.Passenger.Uid == Guid.Empty;
    private string _saveText => _isNew ? "Add" : "Update";

    protected async override Task OnInitializedAsync()
        => await this.Service.LoadingTask;

    private async Task OnChangePassenger(ChangeEventArgs e)
    {
        if (BindConverter.TryConvertTo<Guid>(e.Value, System.Globalization.CultureInfo.CurrentCulture, out Guid value))
        {
            await this.Service.GetPassengerAsync(value);
            return;
        }

        await this.Service.GetPassengerAsync(Guid.Empty);
    }

    private async Task UpdatePassenger()
        => await this.Service.SavePassengerAsync();

    private async Task ResetPassenger()
        => await this.Service.ResetPassengerAsync();
}

关键点：

1. 关注点分离。 数据从 UI 分离到视图和数据管道中。
2. 数据管道是只读的。 一切都是record 。 在编辑上下文中使用编辑 object，其跟踪 state。
3. 当数据脏时没有形式锁定。 您需要在 Net7.0 上使用该内置功能。

测试数据提供者

服务注册如下：

builder.Services.AddScoped<IDataBroker, DataProvider>();
builder.Services.AddTransient<DataPresenterService>();

public sealed class DataProvider : IDataBroker
{
    public async ValueTask<IQueryable<Passenger>> GetPassengersAsync()
    {
        await Task.Yield();
        var list = new List<Passenger>();
        passengers.ForEach(item => list.Add(item with { }));
        return list.AsQueryable();
     }

    public async ValueTask<Passenger?> GetItemAsync(Guid uid)
    {
        await Task.Yield();
        return this.passengers.SingleOrDefault(item => item.Uid == uid);
    }

    public async ValueTask<bool> AddItemAsync(Passenger record)
    {
        await Task.Yield();
        if (this.passengers.Any(item => item.Uid == record.Uid))
            return false;

        this.passengers.Add(record);
        return true;
    }

    public async ValueTask<bool> UpdateItemAsync(Passenger record)
    {
        await Task.Yield();
        if (!this.passengers.Any(item => item.Uid == record.Uid))
            return false;

        var oldRecord = this.passengers.Single(item => item.Uid == record.Uid);
        this.passengers.Remove(oldRecord);
        this.passengers.Add(record);
        return true;
    }

    public async ValueTask<bool> DeleteItemAsync(Passenger record)
    {
        await Task.Yield();
        if (!this.passengers.Any(item => item == record))
            return false;

        var rec = this.passengers.Single(item => item.Uid == record.Uid);
        this.passengers.Remove(record);
        return true;
    }

    private List<Passenger> passengers = new List<Passenger>
    {
        new() { Uid = Guid.NewGuid(), FirstName="John", LastName = "Doe"},
        new() { Uid = Guid.NewGuid(), FirstName="Fred", LastName = "Bloggs"},
        new() { Uid = Guid.NewGuid(), FirstName="Luke", LastName = "Skywalker"},
    };
}