如何在.NET 8 Razor页面中添加可编辑下拉框

原生HTML的<select>控件不支持直接编辑输入，你可以通过以下两种方案改造为支持选择/输入的可编辑下拉框：

方案一：使用HTML5 <datalist>（轻量原生实现） #

这是最简单的方案，无需额外依赖，利用HTML5原生控件实现基础的可编辑下拉功能。

前端页面改造（.chtml） #

替换原有的<select>为<input>，并关联<datalist>渲染数据库加载的选项：

<div class="form-group">
    <label asp-for="TransactionLine.Payee" class="control-label"></label>
    <!-- 可输入的文本框，关联datalist -->
    <input asp-for="TransactionLine.Payee" class="form-control" list="payeeList" />
    <!-- 从ViewBag渲染下拉选项 -->
    <datalist id="payeeList">
        @foreach (var item in ViewBag.PayeeName as SelectList)
        {
            <option value="@item.Value">@item.Text</option>
        }
    </datalist>
    <span asp-validation-for="TransactionLine.Payee" class="text-danger"></span>
</div>

后端代码无需修改 #

原OnGetAsync中的ViewData["PayeeName"]赋值逻辑保持不变，依然负责从数据库加载选项列表。

方案二：带实时过滤的可编辑下拉（原生JS增强） #

如果需要输入时自动过滤选项的交互，可以添加简单的原生JS实现实时筛选：

前端页面改造 #

<div class="form-group">
    <label asp-for="TransactionLine.Payee" class="control-label"></label>
    <input asp-for="TransactionLine.Payee" class="form-control" list="payeeList" id="payeeInput" />
    <datalist id="payeeList">
        @foreach (var item in ViewBag.PayeeName as SelectList)
        {
            <option value="@item.Value">@item.Text</option>
        }
    </datalist>
    <span asp-validation-for="TransactionLine.Payee" class="text-danger"></span>
</div>

<script>
    const payeeInput = document.getElementById('payeeInput');
    const payeeList = document.getElementById('payeeList');
    // 保存原始选项，用于过滤
    const originalOptions = Array.from(payeeList.options).map(opt => ({ value: opt.value, text: opt.text }));

    // 监听输入事件，实时过滤选项
    payeeInput.addEventListener('input', () => {
        const filterKeyword = payeeInput.value.toLowerCase();
        payeeList.innerHTML = '';
        
        originalOptions.forEach(opt => {
            if (opt.value.toLowerCase().includes(filterKeyword)) {
                const option = document.createElement('option');
                option.value = opt.value;
                option.textContent = opt.text;
                payeeList.appendChild(option);
            }
        });
    });
</script>

额外注意事项 #

1. 模型验证：原有的asp-validation-for验证逻辑依然生效，会对输入的内容进行校验。
2. 新增数据处理：如果允许用户输入数据库中不存在的Payee，需要在OnPostAsync中新增逻辑，检查输入值是否存在，不存在则写入数据库：

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        ViewData["PayeeName"] = new SelectList(_payeesService.GetPayees(), "Name", "Name");
        return Page();
    }

    // 检查输入的Payee是否存在，不存在则新增
    var existingPayee = await _payeesService.GetPayeeByName(TransactionLine.Payee);
    if (existingPayee == null)
    {
        await _payeesService.AddPayee(new Payee { Name = TransactionLine.Payee });
    }

    // 执行事务行保存逻辑
    await _transactionLineService.SaveTransactionLine(TransactionLine);
    return RedirectToPage("./Index");
}

内容的提问来源于stack exchange，提问作者Marcel Eric