Day10 - 套用 Tag Helper - 复杂型别 object

这篇开始使用 Tag Helper 来 Render 出需要的 Html 控制项 name，方便在 Submit Form 时，将资料抛回後端 !

我个人比较喜欢 Tag Helper，与 Html 的相似度最为接近 !

Case01

跟 Day07 范例差不多：

• Controller

• View

  改用 Tag Helper

  <form asp-action="Case01" method="post">
      <p>
          <label asp-for="Id"></label>
          <input type="number"
                 step="1"
                 min="0"
                 asp-for="Id" />
      </p>
      <p>
          <label asp-for="Name"></label>
          <input type="text"
                 asp-for="Name" />
      </p>
      <p>
          <button type="submit">送出</button>
      </p>
  </form>
  

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

<form method="post" action="/Day10/Case01">
    <p>
        <label for="Id">编号</label>
        <input type="number" step="1" min="0" id="Id" name="Id" value="1">
    </p>
    <p>
        <label for="Name">姓名</label>
        <input type="text" id="Name" name="Name" value="A">
    </p>
    <p>
        <button type="submit">送出</button>
    </p>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8JZKsziTm_FAnuczkhH_uBoaJWyscDazUmXSOf1nAxIS5q63KAdcxzDoqhsxxMnLc41k9rELoicV4blf5e6FUPpdrUK3o7knd4iKfiCGS66dtHUXRemHX1WPtJ8zU2AVggfoWs7-xGV-0oMGj_9iBYc">
</form>

Case02

跟 Day07 Case02 及 上面的 Case 差不多，差异如下：

• Controller

• View

  套用 Tag Helper

  <div>
      <label asp-for="Address"></label>
      <p>
          <label asp-for="Address.City"></label>
          <input type="text"
                 asp-for="Address.City" />
      </p>
      <p>
          <label asp-for="Address.TownShip"></label>
          <input type="text"
                 asp-for="Address.TownShip" />
      </p>
      <p>
          <label asp-for="Address.Detail"></label>
          <input type="text"
                 asp-for="Address.Detail" />
      </p>
  </div>
  

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

<div>
    <label for="Address">地址</label>
    <p>
        <label for="Address_City">县市</label>
        <input type="text" id="Address_City" name="Address.City" value="b">
    </p>
    <p>
        <label for="Address_TownShip">乡镇</label>
        <input type="text" id="Address_TownShip" name="Address.TownShip" value="c">
    </p>
    <p>
        <label for="Address_Detail">详细</label>
        <input type="text" id="Address_Detail" name="Address.Detail" value="d">
    </p>
</div>

这篇先为 Tag Helper 暖身，下一篇来看 复杂型别 object + collection !