[英]Select box binding in blazor
我正在尝试将CountryId
中的 CountryId 绑定到 Blazor 中SelectList
的选定项的值。 所有国家/地区项目都在{CountryId, CountryName}
object 之类的列表中。 我这样做的代码是这样的:
<InputSelect @bind-Value="model.ByCountryId" class="form-control">
@if (model?.Countries != null)
{
@foreach (var cnt in model.Countries)
{
<option value="@cnt.Id">@cnt.Name</option>
}
}
</InputSelect>
和代码块:
@code {
BrandModel model = new BrandModel();
protected override async Task OnInitializedAsync()
{
model = new BrandModel
{
Id = 19,
ByCountryId = 1,
Countries = new List<ent.Country>
{
new ent.Country { Id = 1, Name = "Azerbaijan" },
new ent.Country { Id = 2, Name = "Turkey" }
},
IsActive = true,
Name = "Brand"
};
}
但是这个执行在浏览器中给了我这个错误:
blazor.webassembly.js:1 WASM:System.MissingMethodException:找不到类型“System.ComponentModel.ByteConverter”的构造函数。
在 Blazor 中绑定<select>
和model.data
的便捷方式是什么?
当我将<InputSelect>
放在<EditForm Model="@model">..</EditForm >
中时效果很好,并且您的数据绑定没有问题。
尝试使用以下代码在 csproj 文件中设置<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
。
<PropertyGroup>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>
参考https://github.com/aspnet/AspNetCore/issues/7784
更新:
使用<select>
标签而不是<InputSelect>
像
<select @bind="model.ByCountryId">
@if (model?.Countries != null)
{
@foreach (var cnt in model.Countries)
{
<option value="@cnt.Id">@cnt.Name</option>
}
}
</select>
我没有尝试解决您的问题,因为有很多。 相反,我编写了如何在 select 元素中显示国家/地区列表并检索所选国家/地区代码或 ID 的代码。 请看我如何定义 model 以及它是如何使用的。 此代码适合与其他 select 元素集成,形成级联下拉体验(选择国家后填充的城市列表等)。 只需将代码片段复制到您的 Index.razor 文件并执行它...
<select class="form-control" @bind="@SelectedCountryID">
<option value=""></option>
@foreach(var country in CountryList)
{
<option value = "@country.Code"> @country.Name </option >
}
}
</select>
<p>@SelectedCountryID</p>
@code {
string selectedCountryID;
string SelectedCountryID
{
get => selectedCountryID;
set
{
selectedCountryID = value;
}
}
List<Country> CountryList = new List<Country>() { new Country ("USA", "United States"),
new Country ("UK", "United Kingdom") };
public class Country
{
public Country(string code, string name)
{
Code = code;
Name = name;
}
public string Code { get; set; }
public string Name { get; set; }
}
}
<InputSelect>
在 .NET 5 中为我工作。对于每个输入(文本、数字、日期、select、复选框等),我将<EditForm>
与Model
一起使用。
<EditForm Model="item">
<InputSelect @bind-Value="item.CountryId">
<option value=""></option>
@foreach (var c in countries)
{
<option value="@c.Id">@c.Name</option>
}
</InputSelect>
</EditForm>
对于此示例: ItemModel item
至少具有属性CountryId
和List<CountryModel> countries
至少具有属性int Id
和string Name
这可能会导致很多问题,当我第一次尝试做这样的事情时,我花了几个小时找出哪里出错了。
1)您应该检查数据库级别的连接是否正确配置,因为这是一个很好的描述: https://www.learnentityframeworkcore.com/configuration/one-to-one-relationship-configuration
2)如果这里一切正常,您应该将国家/地区列表传递给 viewbag 中的视图,因为您的创建应该如下所示:
// GET: Reservations/Create
public IActionResult Create()
{
ViewData["Country"] = new SelectList(_context.Countries, "CountryID",
"CountryName");
return View();
}
3) 你的视图应该是这样的:
<select id="Country" asp-for="Country" class="form-control">
<option value="" selected disabled hidden>Choose country</option>
</select>
希望这可以帮助!
使用 blazor 中的 API 在 Core 6 中正常工作
<InputSelect @bind-Value="patientCreateDTO.DoctorId" class="form-
control" id="doctorid">
<option value="">--Select--</option>
@foreach(var doctor in doctorslist)
{
<option value="@doctor.Id">@doctor.Doctor_name</option>
}
</InputSelect>
这是代码
private List<DoctorReadDTO> doctorslist = new();
protected override async Task OnInitializedAsync()
{
var response = await dService.GetDoctor();
if(response.Success)
{
doctorslist = response.Data;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.