Day03 - 纯 Html 复杂型别 object

复杂型别定义

复杂型别我拆成三篇

• object
• collection
• object + collection

这篇先提 object 部份

Case01

此范例跟上一篇范例 Case02 只差在 post Action 参数改用 class 来承接，其余没有明显差异 !

• Controller

  [HttpPost]
  public IActionResult Case01([FromForm]ViewModel01 vm)
  {
      return Ok(vm);
  }
  

• ViewModel

  public class ViewModel01
  {
      /// <summary>
      /// 编号
      /// </summary>
      public int Id { get; set; }
  
      /// <summary>
      /// 姓名
      /// </summary>
      public string Name { get; set; }
  }
  

• View

网站执行後，在该页面输入资料，并 submit form !

由下图可以看出 request body 的资料，以及後端可以正确回传原本 submit 的资料 !

注：关於 html tag name 大小写

浏览器在 submit form 时，是区分大小写的

而 Asp.Net Core MVC 预设的 Model Binding 行为，则是不区分大小写 !

有兴趣的人，可以自己试试 !

Case02

• ViewModel

  跟上面 Case 相比 多了一个 Property 为 Address Class

  public class ViewModel02
  {
      // ...
  
      /// <summary>
      /// 地址
      /// </summary>
      public Address Address { get; set; }
  }
  
  public class Address
  {
      /// <summary>
      /// 县市
      /// </summary>
      public string City { get; set; }
  
      /// <summary>
      /// 乡镇
      /// </summary>
      public string TownShip { get; set; }
  
      /// <summary>
      /// 详细
      /// </summary>
      public string Detail { get; set; }
  }
  

• View

  html 控制项 name 的格式就要以 外层 property name . 内层 propety name 这个格式来给定 !

  ...
  
  <div>
    <p>地址</p>
  
    <p>
      <label>县市：</label>
      <input type="text" name="address.city" />
    </p>
    <p>
      <label>乡镇：</label>
      <input type="text" name="address.township" />
    </p>
    <p>
      <label>详细地址：</label>
      <input type="text" name="address.detail" />
    </p>
  </div>
  
  ...
  

网站执行後，在该页面输入资料，并 submit form !

由下图可以看出 request body 的资料，以及後端可以正确回传原本 submit 的资料 !

这篇先到这里，下一篇来看复杂型别 collection 的 model binding