首页 > 解决方案 > Blazor输入+数据列表如何将选定的项目绑定到对象

问题描述

第一次接触 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 对象中 - 这听起来像一个糟糕的解决方法

标签: c#bindblazordatalist

解决方案


这是我能想到的最好的解决方案......由于输入元素绑定到 datalist 对象,因此数据绑定没有神奇的方法。我的解决方案或多或少与您建议的一样。这是代码:

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

}
}

推荐阅读