当用户单击文本输入框时如何在@Html.EditorFor() 中显示下拉列表

Question

我正在使用 ViewData 将数据从控制器传递到视图
控制器中的代码：

public ActionResult Create()
        {
            ViewData["gN"] = new SelectList(db.gT, "id", "gN");
            return View();
        }

在视图中，我使用@Html.EditorFor() 为我们存储在数据库中的表创建新项目。

<div class="col-md-10">
     @Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control" } })
     @Html.ValidationMessageFor(model => model.groupid, "", new { @class = "text-danger" })
</div>

当我使用@Html.DropDownList 时，我们的 gN 列表完美地显示为下拉列表

 @Html.DropDownList("gN", null, htmlAttributes: new { @class = "form-control" })

我想使用 EditorFor() 以便当用户开始在输入框中输入时，下拉列表会出现在它的下方。如果用户正在输入的文本出现在下拉列表中，那么用户可以选择它。 我们应该如何在 EditorFor() HTML 元素中显示列表 gN（我们使用 Controller 中的 ViewData 获得）？

Answer 1

Html.EditorFor() 方法总是创建一个<input> 元素，尽管type 属性可能因模型属性类型而异。 HTML5 实际上通过 <datalist> 元素完全支持您想要的内容，您将其绑定到具有 list 属性的 <input> 元素。 <datalist> 元素采用子 <option> 元素，其中包含您想要在列表中出现的值。

在这里对您的模型进行一些猜测...

// Controller
public ActionResult Create()
{
    ViewData["gN"] = db.gT;
    return View();
}

// View
@Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control", list="gN-datalist" } })
<datalist id="gn-datalist">
    @foreach (var item in (gT)ViewData["gN"])
    {
        <option value="@item.id">@item.gN</option>
    }
</datalist>

您还可以创建一个 HtmlHelper 扩展方法来为您创建它。