Blazor 输入 + 数据列表如何将所选项目绑定到对象

Question

Kind of first touch on Blazor, and I have the following Component content:

<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>

and the code block:

@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();
}

How can I get the selected partner from the datalist into my SelectedPartner property? Can I achieve it simply with binding, or do I need a string property that I can bind="@..." in the input tag and then in code find the selected partner by name and save into my SelectedPartner object - which sounds like a bad workaround

Answer 1

This is the best solution I could come up with... There is no magic way to do it with data-binding as the input element is bound to the datalist object. My solution is more or less as the one you suggested. Here's the code:

 <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; }

}
}