Blazor input + datalist 如何将所选项目绑定到对象

Question

第一次接触 Blazor，我有以下组件内容：

<div class="form-group row">

<label class="col-2 col-form-label" for="PartnerInput">Partner:</label>
<input id="PartnerInput" list="Partners" />
<datalist class="col-4" id="Partners" >
    @foreach (var partner in partners)
    {
        <option value="@partner.Name"></option>
    }
</datalist>

<label class="col-auto col-form-label">@($"Partner ID: {SelectedPartner.Id}")</label>

和代码块：

@code {

[Parameter]
public string companyName { get; set; }

private List<Partner> partners;

private Partner _selectedPartner;
public Partner SelectedPartner
{
    get { return _selectedPartner; }
    set { _selectedPartner = value; }
}


protected override async Task OnInitializedAsync()
{
    var company = await CompanyService.GetCompanyByNameAsync(companyName);
    partners = await DataService.GetPartnersAsync();
}

如何将数据列表中选定的合作伙伴添加到我的 SelectedPartner 属性？我可以简单地通过绑定来实现它，还是我需要一个字符串属性我可以在输入标签中绑定 =“@...” 然后在代码中按名称找到选定的合作伙伴并保存到我的 SelectedPartner 对象中- 这听起来像是一个糟糕的解决方法

Answer 1

这是我能想出的最佳解决方案...没有神奇的方法可以使用数据绑定来完成此操作，因为输入元素已绑定到数据列表对象。我的解决方案或多或少与您建议的一样。这是代码：

 <div class="form-group row">
    <label class="col-2 col-form-label" for="PartnerInput">Partner:</label>
    <input id="PartnerInput" list="Partners" @onchange="@((args) => name = args.Value.ToString())" />
    <datalist class="col-4" id="Partners">
        @foreach (var partner in partners)
        {
            <option value="@partner.Name"></option>

        }
    </datalist>

    @if (SelectedPartner != null)
    {
    <label class="col-auto col-form-label">@($"Partner Name: {SelectedPartner.Name}, Partner ID: {SelectedPartner.Code}")</label>
    }
</div>

@code {

private List<Partner> partners;
private string name;


private Partner SelectedPartner => 
                          partners.FirstOrDefault(a => a.Name == name);

protected override void OnInitialized()
{
    partners = Enumerable.Range(1, 10).Select(i => new Partner { Code = i.ToString(), Name = $"Partner {i.ToString()}" }).ToList();
}

public class Partner
{

    public string Code { get; set; }
    public string Name { get; set; }

}
}

Blazor input + datalist 如何将所选项目绑定到对象

Blazor input + datalist How to bind selected item to object

c#

bind

datalist

blazor