Blazor input + datalist Как привязать выбранный элемент к объекту - PullRequest
Новая
       61

Blazor input + datalist Как привязать выбранный элемент к объекту

0 голосов
/ 29 февраля 2020

Вид первого прикосновения к 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 - что звучит как плохой обходной путь

1 Ответ

0 голосов
/ 29 февраля 2020

Это лучшее решение, которое я мог бы придумать ... Нет волшебного c способа сделать это с привязкой данных, поскольку элемент ввода связан с объектом списка данных. Мое решение более или менее соответствует предложенному вами. Вот код: 

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

}
}
...