ASP.NET 核心和 Bootstrap : 如何将下拉列表放入表单组中？

Question

我在表单中使用 <label asp-for 和 <input asp-for 标签来执行“创建表单”操作以及 Bootstrap 外观。我该如何修复这个错误，它正在与 asp-for 一起使用，我可以通过这些字段成功创建和编辑，但它看起来很扭曲而不是用户友好的。

<div class="form-group">
    <label asp-for="City" class="control-label"></label>
    <input asp-for="City" class="form-control" />
    <span asp-validation-for="City" class="text-danger"></span>
</div>

<div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu">
                <label asp-for="Department" class="dropdown-item">HR</label>
                <input asp-for="Department" class="form-control" />
                <label asp-for="Department" class="dropdown-item">Sales</label>
                <input asp-for="Department" class="form-control" />
            </div>
            <span asp-validation-for="Department" class="text-danger"></span>
        </div>
</div>

结果如下：

之前 select

select期间

select

之后

如您所见，它没有填充在文本字段中，而是填充在那里，我对其进行了测试。也许还有其他方法可以使用 HTML 标签？

Answer 1

你想要这样的东西，你可以使用<select>标签来实现下拉：

<div class="form-group">
    <label asp-for="City" class="control-label"></label>
    <input asp-for="City" class="form-control" />
    <span asp-validation-for="City" class="text-danger"></span>
</div>

<div class="form-group">
    <label asp-for="Department" class="control-label"></label>
    <select asp-for="Department" class="form-control">
        <option selected>Choose Department</option>
        <option value="HR">HR</option>
        <option value="Sales">Sales</option>
        <option value="Other">Other</option>
    </select>
</div>

结果：

ASP.NET 核心和 Bootstrap : 如何将下拉列表放入表单组中？

ASP.NET Core and Bootstrap : how to put dropdown inside form group?

forms

html-select

razor

asp.net-core-mvc

bootstrap-4