iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

Asp.Net Core 從 Post FormData 走到 輕前端 Vue系列 第 3

Day03 - 純 Html - 複雜型別 object

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 的資料 !

Image


註:關於 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 的資料 !

Image


這篇先到這裡,下一篇來看複雜型別 collection 的 model binding


上一篇
Day02 - 純 Html - 簡單型別 + 字串
下一篇
Day04 - 純 Html - 複雜型別 collection
系列文
Asp.Net Core 從 Post FormData 走到 輕前端 Vue30

尚未有邦友留言

立即登入留言