Day14 - 动态 新增/删除 Collection 项目(二) - Html Helper

这篇调整的方向是

1. 透过 Partial View 来 Render Collection 项目
2. 透过 ajax 来取回 新增 所需的 html

Case01

Controller 新增 Action ：

• 用来直接回传 PartialView html
• 给定引数 index 直接套用至 html 中

[HttpPost, Route("api/[controller]/[action]")]
public IActionResult AddOrderItem([FromForm]int index)
{
    ViewData["OrderItemIndex"] = index;

    return PartialView("/Views/Day14/OrderItem.cshtml", new OrderItem() );
}

View

说明：

1. 将动态 render 的部份抽取成 partial view，该 partial view 会在以下二个时机点被存取，未来只需维护一份 html
   a. 进入页面时
   b. 新增项目时
2. 将 index 传入 partial view，让 partial view render 该 index 所需的 html
3. 上一篇新增的语法，改为 ajax 语法
   a. ajax 套用 CSRF Token 的修正，之後会提到 !

内容：

@using (Html.BeginForm(FormMethod.Post, htmlAttributes: new { autocomplete = "off" }))
{
    <p>
        @Html.LabelFor(model => model.OrderDate)
        @Html.EditorFor(m => m.OrderDate)
    </p>
    <div>
        @Html.LabelFor(model => model.Items)
        <table>
            <thead>
            <tr>
                <th>@Html.LabelFor(m => m.Items.FirstOrDefault().Name)</th>
                <th>@Html.LabelFor(m => m.Items.FirstOrDefault().Quantity)</th>
                <th>
                    <button type="button"
                            onclick="AddItem()">
                        新增
                    </button>
                </th>
            </tr>
            </thead>
            <tbody id="Items">
                @for (int i = 0; i < Model?.Items?.Length; i++)
                {
                    ViewData["OrderItemIndex"] = i;

                    @Html.Partial("OrderItem", Model?.Items[i], ViewData)
                }
            </tbody>
        </table>

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

<p>
    <a asp-action="Index">回上一层</a>
</p>

@section Scripts
{
    <script>

        window.ItemsCount = @(Model?.Items?.Length ?? 0);

        window.AddItemUrl = '@Url.Action("AddOrderItem")';

        window.AddItem = function () {

            const requestBody = new URLSearchParams();
            requestBody.append('index', ItemsCount);

            fetch(AddItemUrl, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: requestBody,
              })
            .then(response => response.text())
            .then(data => {
                $('#Items').append(data);
                ItemsCount++;
            })
        }

        window.DeleteItem = function (e) {
            const btnDom = e.target;

            const trDom = $(btnDom).parent().parent();

            trDom.remove();
        }
    </script>
}

Partial View OrderItem.cshtml

说明：

• 从 ViewData 取出所需的 index
• 因为 Html.TextBoxFor() 无法自订 name，所以改用 Html.TextBox()

内容：

@model Project.Models.Day14.OrderItem
@{
    var itemIndex = ViewData["OrderItemIndex"];
}
<tr>
    @Html.Hidden("Items.index", itemIndex)
    <td>
        @Html.TextBox($"Items[{itemIndex}].Name", Model.Name)
    </td>
    <td>
        @Html.TextBox($"Items[{itemIndex}].Quantity", Model.Quantity, new { type = "number", step = 1, min = 0 })
    </td>
    <td>
        <button type="button"
                onclick="DeleteItem(event)">
            删除
        </button>
    </td>
</tr>

实际执行後，不管如何动态新增/删除，在 submit 後，都可以确实传递页面上的资料 !

与上一篇文章的范例相比

• 多了 ajax 维护成本
• 少了维护二份 html 的功 !

这篇先到这里，下一篇来看 Tag Helper 的部份 !