Day12 - 套用 Tag Helper - 复杂型别 object + object collection

接下来开始着重使用 Tag Helper 在 Html 长出需要的 Html 控制项 name !

本篇 Controller、ViewModel 跟 Day09 一样

依照 View 的差异，拆成不同 Case 来看 !

Case01

Controller

使用 Tag Helper

<form asp-action="Case01"
    method="post">
    <p>
        <label asp-for="OrderDate"></label>
        <input type="date"
               asp-for="OrderDate" />
    </p>
    <div>
        <label asp-for="Items"></label>
        <table>
            <thead>
            <tr>
                <th>
                    <label asp-for="Items.FirstOrDefault().Name"></label>
                </th>
                <th>
                    <label asp-for="Items.FirstOrDefault().Quantity"></label>
                </th>
            </tr>
            </thead>
            <tbody>
            @for (int i = 0; i < Model.Items?.Length; i++)
            {
                <tr>
                    <td>
                        <input type="text"
                            asp-for="Items[i].Name" />
                    </td>
                    <td>
                        <input type="number"
                            step=1
                            min=0
                            asp-for="Items[i].Quantity" />
                    </td>
                </tr>
            }
            </tbody>
        </table>

    </div>
    <p>
        <button type="submit">送出</button>
    </p>
</form>

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

<form action="/Day12/Case01" method="post">    <p>
        <label for="OrderDate">订单日期</label>
        <input type="date" id="OrderDate" name="OrderDate" value="2021-05-07">
    </p>
    <div>
        <label for="Items">订单项目</label>
        <table>
            <thead>
            <tr>
                <th>
                    <label for="Name">名称</label>
                </th>
                <th>
                    <label for="Quantity">数量</label>
                </th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" id="Items_0__Name" name="Items[0].Name" value="b">
                    </td>
                    <td>
                        <input type="number" step="1" min="0" id="Items_0__Quantity" name="Items[0].Quantity" value="2">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="Items_1__Name" name="Items[1].Name" value="c">
                    </td>
                    <td>
                        <input type="number" step="1" min="0" id="Items_1__Quantity" name="Items[1].Quantity" value="3">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="Items_2__Name" name="Items[2].Name" value="d">
                    </td>
                    <td>
                        <input type="number" step="1" min="0" id="Items_2__Quantity" name="Items[2].Quantity" value="4">
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
    <p>
        <button type="submit">送出</button>
    </p>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8BeKebzmhD5Pmy2bGJRwhhKT8Kxj5cFT9TMWMe5MLg3hAZMQvqb7T2MN-fAXNlKuqMrFrAWmPJnMmBiBuDA9petFx_TTn_bQXytOG0TKwkg7CnhC44o112SHqQAJN7wsSXixA8jVjplVbvD6iEschHM">
</form>

再次强调
这个 Case 的缺点就是如果 index 不连续
则 index 不连续之後的资料，都会 Binding 失败 !

到这边先做个简单的整理：

当套用 Html Helper / Tag Helper，注意 Render 後的 Html 控制项 name，只要符合规则，在 Submit Form 後，後端进行 Model Binding 时，就不会有太大的问题 !

这篇先到这里，下一篇来看 动态新增/删除 Collection 项目 !

<<: 设定IAM

>>: Rust-变数