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

本篇 Controller、ViewModel 跟 Day08 范例差不多

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

Case01

• Controller

• View

  使用 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>
          @foreach(var item in Model.Items)
          {
              <p>
                  <input type="text"
                         name="Items"
                         asp-for="@item" />
              </p>
          }
      </div>
      <p>
          <button type="submit">送出</button>
      </p>
  </form>
  

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

<form method="post" action="/Day11/Case01">
    <p>
        <label for="OrderDate">订单日期</label>
        <input type="date" id="OrderDate" name="OrderDate" value="2021-05-12">
    </p>
    <div>
        <label for="Items">订单项目</label>
            <p>
                <input type="text" name="Items" id="item" value="i">
            </p>
            <p>
                <input type="text" name="Items" id="item" value="u">
            </p>
            <p>
                <input type="text" name="Items" id="item" value="y">
            </p>
    </div>
    <p>
        <button type="submit">送出</button>
    </p>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8JZKsziTm_FAnuczkhH_uBrkpOr7ADzb3TIFWYKLPUY1mp07qSXVSkR2a43i6HYJ2q_fl11RD3xBxb8u7LduvD1cJRlNvJb07jsppyMzE09ZCEtsL0a17vyefALhK89AX6GeMErYps9vqPUNppMCEZc"></form>

Case02

• Controller

• View

  使用 Tag Helper

  <div>
      <label asp-for="Items"></label>
      @for (int i = 0; i < Model.Items.Length; i++)
      {
          <p>
              <input type="text"
                     asp-for="Items[i]" />
          </p>
      }
  </div>
  

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

<div>
    <label for="Items">订单项目</label>
        <p>
            <input type="text" id="Items_0_" name="Items[0]" value="4">
        </p>
        <p>
            <input type="text" id="Items_1_" name="Items[1]" value="5">
        </p>
        <p>
            <input type="text" id="Items_2_" name="Items[2]" value="6">
        </p>
</div>

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

今天的 Case 完美解决 Html Helper 之前提到的二个问题 !

1. TextBoxFor / EditorFor 如果要自订 name，有时会失去原本变数的所代表的意义 !
2. TextBoxFor / EditorFor 如果指定了 Collection，只会给定 index 0 的值

相较於 Html Helper，这边可以看得出 Tag Helper 更有弹性的地方

针对特定的 html dom 的 asp-for 可以给定二种型态的格式

1. Model 的 Property
2. 以 @开头 给定变数

这篇先到这里，下一篇来看 复杂型别 object + object collection !