ASP.NET MVC Input With Datalist
2024-01-04
筆記 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 的構成。