ASP.NET MVC Input With Datalist

說明
相關連結

筆記 ASP.NET 開發如何使用 Html Datalist 讓 Input 輸入具有可以挑選 (Select) 的方便性，同時又可以彈性客製輸入內容，並且不需要寫 JavaScript 的方式。

說明

controller.cs

ViewBag.ManagementHint = string.Join(", ", db.Website.Select(i => i.Owner).Distinct().ToList());

傳入的方式不一定要用是字串，也可以是 List<String>，但因為是透過 ViewBag 所以沒有 Intellisense，除非是透過 ViewModel 的方式傳入 😅

view.cshtml

<div class="col-md-10">
    @Html.EditorFor(model => model.Owner, 
      new { htmlAttributes = new { @class = "form-control", @list= "managementUnit" } })
    @Html.ValidationMessageFor(model => model.Owner, "", new { @class = "text-danger" })
</div>
<datalist id="managementUnit">
    @foreach (string unit in ViewBag.ManagementHint.Split(','))
    {
        <option value="@(unit.Trim())"></option>
    }
</datalist>

對於原本的 Html.EditorFor 只需要在 htmlAttributes 加入 @list 對應到 datalist 的 id。

而定義 datalist 則只需要將 ViewBag 或 ViewModel 的資料，迴圈呈現為 <option value="..."></option> 即可。

datalist 的使用仰賴瀏覽器對這個功能的實作，而實際使用上如果透過 Tab 不會觸發提示，但也支援一定程度的模糊提示，更理想的方式是配合 Vue.js 去彈性變更 option 的構成。

說明

相關連結