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

Case01

跟 Day06、Day08 范例差不多，重点差异如下：

• Controller

  於 Get 时，就给定 object colletion 的数量。

  注：之後的范例会改动态的 !

  [HttpGet]
  public IActionResult Case01()
  {
      var vm = new ViewModel
                  {
                      OrderDate = null,
                      Items     = Enumerable.Repeat(new OrderItem(), 3).ToArray()
                  };
  
      return View(vm);
  }
  

• ViewModel

  • 加上 Display Attribute

  /// <summary>
  /// 订单项目
  /// </summary>
  public class OrderItem
  {
      /// <summary>
      /// 名称
      /// </summary>
      [Display(Name = "名称")]
      public string Name { get; set; }
  
      /// <summary>
      /// 数量
      /// </summary>
      [Display(Name = "数量")]
      public int? Quantity { get; set; }
  }
  

• View

  改为使用 Html Helper

  ...
  <table>
      <thead>
      <tr>
          <th>@Html.LabelFor(m => m.Items.FirstOrDefault().Name)</th>
          <th>@Html.LabelFor(m => m.Items.FirstOrDefault().Quantity)</th>
      </tr>
      </thead>
      <tbody>
      @for (int i = 0; i < Model.Items?.Length; i++)
      {
          <tr>
              <td>
                  @Html.TextBoxFor(m => Model.Items[i].Name)
              </td>
              <td>
                  @Html.TextBoxFor(m => Model.Items[i].Quantity,  new { type = "number", step = 1, min = 0 })
              </td>
          </tr>
      }
      </tbody>
  </table>
  ...
  

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

...
<tbody>
    <tr>
        <td>
            <input id="Items_0__Name" name="Items[0].Name" type="text" value="a">
        </td>
        <td>
            <input id="Items_0__Quantity" min="0" name="Items[0].Quantity" step="1" type="number" value="1">
        </td>
    </tr>
    <tr>
        <td>
            <input id="Items_1__Name" name="Items[1].Name" type="text" value="b">
        </td>
        <td>
            <input id="Items_1__Quantity" min="0" name="Items[1].Quantity" step="1" type="number" value="2">
        </td>
    </tr>
    <tr>
        <td>
            <input id="Items_2__Name" name="Items[2].Name" type="text" value="c">
        </td>
        <td>
            <input id="Items_2__Quantity" min="0" name="Items[2].Quantity" step="1" type="number" value="3">
        </td>
    </tr>
</tbody>
...

整体来看，就是把 Html 控制项的 name，当成 存取 ViewModel 的路径

例：Items[1].Quantity 就是指 ViewModel 的 Items Array > Index 为 1 之物件 > 物件的 Quantity Property

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