如何用过滤结果的能力将模型绑定到下拉列表输入？
如何用过滤结果的能力将模型绑定到下拉列表输入？
提问于 2020-11-15 08:33:46
我想在asp.net核心中设计一个表单，它有一个下拉列表。我希望将模型绑定到这个下拉列表中，该模型的所有列都显示在下拉列表中，用户可以选择一行，并过滤结果。
在asp.net核心或css或js中是否有此功能？
这是我的模型: Company.cs
public class Company
{
public int Id { get; set; }
public string CompanyCode { get; set; }
public string CompanyName { get; set; }
public string SubCompanyName { get; set; }
}这是我的表单视图: Insert.cshtml
<form asp-action="Insert">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="ErrorReportCode" class="form-control" , placeholder="RequestCode" id="txtErrorReportCode" />
<span asp-validation-for="ErrorReportCode" class="text-danger"></span>
</div>
<div class="form-group">
<input asp-for="ErrorReportDateReport" class="form-control datePicker" type="text" id="txtErrorReportDateReport" placeholder="RequestDate" />
<span asp-validation-for="ErrorReportDateReport" class="text-danger"></span>
</div>
<div class="form-group">
@Html.DropDownListFor< ????? >
</div>
<div class="form-group">
<input type="submit" value="Insert" class="btn-red pull-left" />
</div>
</form>我想有一个下拉列表在我的形式，用户可以选择一个公司根据其规格，如CompanyCode，CompanyName和SubcompanyName。换句话说，我想要一个多列的DropDownList。
此外，当用户在此下拉列表的文本区域中键入一个单词时，在Company表中显示结果会动态更改。事实上，数据会过滤。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-16 04:15:30
首先，下拉列表值不能绑定模型，我认为公司的绑定Id是一个很好的choice.If，您想要显示多个列，可以将它们放在选项值中。下面是一个演示(我使用假数据进行测试)：
动作
public IActionResult Insert() {
List<Company> l = new List<Company> { new Company { Id=1, CompanyCode="c1", CompanyName="company1", SubCompanyName="subcompany1"},
new Company { Id = 2, CompanyCode = "c2", CompanyName = "company2", SubCompanyName = "subcompany2" },
new Company { Id=3, CompanyCode="c3", CompanyName="company3", SubCompanyName="subcompany3"}};
List<SelectListItem> l1 = new List<SelectListItem>();
foreach(Company c in l) {
l1.Add(new SelectListItem { Text = c.CompanyCode + " | " + c.CompanyName + " | " + c.SubCompanyName, Value = c.Id + "" });
}
ViewBag.Select = l1;
return View();
}查看：
<input type="text" list="cars" />
<datalist id="cars">
@foreach (var i in ViewBag.Select)
{
<option id=@i.Value>@i.Text</option>
}
</datalist>结果：
如果你喜欢更好的风格，你可以找一些第三插件。更新(在数据表中添加<option>CompanyCode | CompanyName | SubCompanyName </option> )：
<input type="text" list="cars" />
<datalist id="cars">
<option>CompanyCode | CompanyName | SubCompanyName </option>
@foreach (var i in ViewBag.Select)
{
<option id=@i.Value>@i.Text</option>
}
</datalist>结果：
Update2：
您还可以使用占位符:视图：
<input type="text" list="cars" placeholder="CompanyCode | CompanyName | SubCompanyName" style="width:400px"/>
<datalist id="cars">
@foreach (var i in ViewBag.Select)
{
<option id=@i.Value>@i.Text</option>
}
</datalist>结果：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64842522
复制相关文章
相似问题
腾讯云开发者
