Day07 - 套用 Html Helper - 复杂型别 object

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

为求简单验证，当後端收到前端抛回的资料後，就直接放回原页面，来确认所输入的资料是否正确 !

接下来，直接来看 Html Helper 复杂型别 object !

Case01

大致上跟 Day03 Case01 范例差不多

• Controller

• ViewModel

  加上 Display Attribute，让 LabelFor 可以取出对应的 Name

  public class ViewModel
  {
      [Display(Name = "编号")]
      public int Id { get; set; }
  
      [Display(Name = "姓名")]
      public string Name { get; set; }
  }
  

• View

  套用 Html Helper

  @using (Html.BeginForm())
  {
      <p>
          @Html.LabelFor(model => model.Id)
          @Html.TextBoxFor(m => m.Id, new { type = "number", step = 1, min = 0 })
      </p>
      <p>
          @Html.LabelFor(model => model.Name)
          @Html.TextBoxFor(m => m.Name)
      </p>
      <p>
          <button type="submit">送出</button>
      </p>
  }
  

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

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

Case02

大致上跟 Day03 Case02 范例差不多

• Controller

• ViewModel

  加上 Display Attribute，让 LabelFor 可以取出对应的 Name

  public class ViewModel02
  {
      // ...
  
      /// <summary>
      /// 地址
      /// </summary>
      [Display(Name = "地址")]
      public Address Address { get; set; }
  }
  
  public class Address
  {
      /// <summary>
      /// 县市
      /// </summary>
      [Display(Name = "县市")]
      public string City { get; set; }
  
      /// <summary>
      /// 乡镇
      /// </summary>
      [Display(Name = "乡镇")]
      public string TownShip { get; set; }
  
      /// <summary>
      /// 详细
      /// </summary>
      [Display(Name = "详细")]
      public string Detail { get; set; }
  }
  

• View

  套用 Html Helper

  ...
  
  <div>
      @Html.LabelFor(model => model.Address)
      <p>
          @Html.LabelFor(model => model.Address.City)
          @Html.TextBoxFor(m => m.Address.City)
      </p>
      <p>
          @Html.LabelFor(model => model.Address.TownShip)
          @Html.TextBoxFor(m => m.Address.TownShip)
      </p>
      <p>
          @Html.LabelFor(model => model.Address.Detail)
          @Html.TextBoxFor(m => m.Address.Detail)
      </p>
  </div>
  
  ...
  

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

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

可以看到 Html Helper 所指定的 Expression 会在 Render 为 Html 後给定的 Expression 内所指定的 property name，这样可以方便 submit form 时，将资料抛回後端 !

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