Day08 - 套用 Html Helper - 复杂型别 object + collection

Case01

跟 Day05 范例差不多，差异如下：

於 Get 时，先写死固定 3 个 Items !

[HttpGet]
public IActionResult Case01()
{
    var vm = new ViewModel
                {
                    OrderDate = null,
                    Items     = new string[3],
                };

    return View(vm);
}

ViewModel

加上 Attribute，让 Html Helper 做出更多调整

public class ViewModel
{
    [Display(Name                   = "订单日期")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [DataType(DataType.Date)]
    public DateTime? OrderDate { get; set; }

    [Display(Name = "订单项目")]
    public string[] Items { get; set; }
}

View

改为使用 Html Helper

@using (Html.BeginForm())
{
    <p>
        @Html.LabelFor(model => model.OrderDate)
        @Html.EditorFor(m => m.OrderDate)
    </p>
    <div>
        @Html.LabelFor(model => model.Items)
        @for (int i = 0; i < Model.Items.Length; i++)
        {
            <p>
                @Html.TextBoxFor(m => m.Items[i])
            </p>
        }
    </div>
    <p>
        <button type="submit">送出</button>
    </p>
}

输入资料 & Submit 後，View Render 出来的结果

<form action="/Day08/Case01" method="post">    
    <p>
        <label for="OrderDate">订单日期</label>
        <input id="OrderDate" name="OrderDate" type="date" value="2021-05-14">
    </p>
    <div>
        <label for="Items">订单项目</label>
            <p>
                <input id="Items_0_" name="Items[0]" type="text" value="a">
            </p>
            <p>
                <input id="Items_1_" name="Items[1]" type="text" value="b">
            </p>
            <p>
                <input id="Items_2_" name="Items[2]" type="text" value="c">
            </p>
    </div>
    <p>
        <button type="submit">送出</button>
    </p>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8A7ZajjSkvVDucDkty34oK65oUymqQEsOhpDvYoLy-ea7g0FL8lhRxPMhL5oJqcuOuOAS5mApO8RTk7jBgY0_3xvyJSjF3NFZxlikZUwq4dHQ04u78abz2-aDeriWaGtpxr8-QEynDDCO8z8Cepg18A">
</form>

额外测试

我曾经想用 foreach + Html Helper 来达成

@using (Html.BeginForm())
{
    <p>
        @Html.LabelFor(model => model.OrderDate)
        @Html.TextBoxFor(m => m.OrderDate)
    </p>
    <div>
        @Html.LabelFor(model => model.Items)
        @foreach(var Items in Model.Items)
        {
            <p>
                @Html.TextBoxFor(m => Items)
                @* @Html.TextBox(nameof(Model.Items), Items) *@
            </p>
        }
    </div>
    <p>
        <button type="submit">送出</button>
    </p>
}

Post 後，在 Action 内，值可以成功回传

但是一回到 View 之後，Collection 的值，就只会抓 index 0 的值放到 value 中

其实这突显了二个问题