c# - 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 对象中 - 这听起来像一个糟糕的解决方法
解决方案
这是我能想到的最好的解决方案......由于输入元素绑定到 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; }
}
}
推荐阅读
- vuejs2 - 使用带有 css 特定复选框的 vue 和 v-model
- html - 将 div 高度扩展到它的孩子(iframe)
- reactjs - ReactJS-只有最新的文本行出现在网页中
- php - 如何使用 Laravel 获取以前的外部链接?
- sql-server - 使用 Entity Framework Core 在 SQL Server 中存储大字符串的最佳实践
- iis-7 - IIS 管理器中的停止服务器是否与 iisReset /stop 相同?
- java - 在 AWS Fargate 上运行时如何确定当前可用区
- java - 坚持使用这个单词搜索程序
- python - Django 测试客户端:轮询应用程序第 5 部分 NoReverseMatch
- python - 使用 tox 的虚拟环境 PYTHONPATH