如何在 Razor 页面中添加和可编辑组合框

Question

在 Razor 页面中，我需要一个组合框，允许用户选择或键入值。 组合框是从数据库加载的。 我正在使用 NET 8.0。

页面chtml摘录：

<div class="form-group">
    <label asp-for="TransactionLine.Payee" class="control-label"></label>
    <select asp-for="TransactionLine.Payee" class="form-control" asp-items="ViewBag.PayeeName"></select>
    <span asp-validation-for="TransactionLine.Payee" class="text-danger"></span>
</div>

模型摘录

public async Task<IActionResult> OnGetAsync(int? id)
{
    ...
    ViewData["PayeeName"] = new SelectList(_payeesService.GetPayees(), "Name", "Name");
    TransactionLine = transactionLine;
    return Page();
}

如何使组合框可编辑？

Answer 1

您可以尝试将

<input>

与

<datalist>

一起使用

@{

    List<string> namelist = new List<string>{"Tom","John","Nancy"};
}

<div class="form-group">
    <label class="control-label"></label>
    <input  class="form-control" list="payeenames"></input>
    <datalist id="payeenames">
        @foreach (var item in namelist)
        {
            <option>@item</option>
        }
    </datalist>
</div>

结果