ASP.NET Core MVC 快速產生輸入視窗 示範

在 ASP.NET Core MVC 中要在 cshtml 中增加輸入視窗可以使用 HtmlHelper 中的 Editor 方法

產生基礎輸入框

    
@Html.Editor("data")
    

執行後會自動產生的內容如下：

    
<input class="text-box single-line" id="data" name="data" type="text" value="">
    

會自動產生 input ，類型為 text，並將 id 和 name 設為傳入的字串內容

更改樣式

可以透過匿名類別的方式加入 class

    
@Html.Editor("data")
    

執行後會自動產生的內容如下：

    
<input class="form-control text-box single-line" id="data" name="data" type="text" value="">
    

依據資料型別自動產生輸入框

假設我們有一個 ViewModel:

    
    public class DataViewModel
    {
        public int IntData { get; set; }  
        public string StringData { get; set; }  
        public bool boolData { get; set; }
        public DateTime DateTimeData { get; set; }
    }
    

我們可以使用 EditorFor 的方式綁定對應的屬性:

    
@model WebApplicationTest.Controllers.DataController.DataViewModel

<div>@Html.EditorFor(m => m.IntData)</div>
<div>@Html.EditorFor(m => m.StringData)</div>
<div>@Html.EditorFor(m => m.boolData)</div>
<div>@Html.EditorFor(m => m.DateTimeData)</div>
    

執行後會自動產生的內容如下：

    
<div><input class="text-box single-line" data-val="true" data-val-required="The IntData field is required." id="IntData" name="IntData" type="number" value=""></div>
<div><input class="text-box single-line" data-val="true" data-val-required="The StringData field is required." id="StringData" name="StringData" type="text" value=""></div>
<div><input class="check-box" data-val="true" data-val-required="The boolData field is required." id="boolData" name="boolData" type="checkbox" value="true"><input name="boolData" type="hidden" value="false"></div>
<div><input class="text-box single-line" data-val="true" data-val-required="The DateTimeData field is required." id="DateTimeData" name="DateTimeData" type="datetime-local" value=""></div>

    

執行結果：

當然也可以加上樣式:

    
@Html.EditorFor(m => m.IntData, new { htmlAttributes = new { @class = "form-control" } })
    

參考資料：
Microsoft.Learn - HtmlHelperEditorExtensions.Editor Method
Microsoft.Learn - HtmlHelperEditorExtensions.EditorFor Method