在jQuery的前提下，當然如果用Vue框架，問題會十分簡單

一、實體為簡單欄位

要保證input的name與Model的欄位名相同

Skill類，有Name,Description,Icon三個欄位

//實體Skill類
public class Skill : EntityBase<int>
{
        public Skill()
        {
            
        }
        [Display(Name = "名稱")]
        public virtual string Name { get; set; }
       
        [Display(Name = "描述")]
        public virtual string Description { get; set; }

        [Display(Name = "圖示")]
        public virtual string Icon { get; set; }
}
 

Create頁面

可以使用@Html幫助類系列，也可以直接input

<div class="form-group">
    <label class="control-label col-md-3">
        @Html.DisplayNameFor(m => m.Name) :
    </label>
    <div class="col-md-4 ">
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })//藉助@html
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 mylabel">
        圖示 :
    </label>
    <div class="col-md-4">
        <input class="form-control " id="Icon" name="Icon" /> //name與欄位名保持一致    
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">
        @Html.DisplayNameFor(m => m.Description) :
    </label>
    <div class="col-md-4 ">
        @Html.TextBoxFor(m => m.Description, new { @class = "form-control" })
    </div>
</div>
 

控制器

        /// <summary>
        /// 建立資料
        /// </summary>
        /// <param name="dto"></param>
        /// <returns></returns>

        [HttpPost]
     
        public ActionResult Create(Skill dto)
        {
            var result = _SkillContract.Insert(dto);//封裝的Insert方法
            return Json(result, JsonRequestBehavior.AllowGet);
        }
 

二、實體中含有實體

Skill類與Gallery類是一對多的關係，即一個skill可以關聯多個Gallery

//實體Skill類
public class Skill : EntityBase<int>
{
        public Skill()
        {
            
        }
        [Display(Name = "名稱")]
        [StringLength(20, ErrorMessage = "最大長度不能超過{1}個字元")]
        public virtual string Name { get; set; }
       
        [Display(Name = "描述")]
        public virtual string Description { get; set; }

        [Display(Name = "圖示")]
        public virtual string Icon { get; set; }

        public virtual ICollection<Gallery> Galleries { get; set; }

}

//實體Gallery類
public class Gallery : EntityBase<int>
{
        
        [Display(Name = "名稱")]
        public virtual string Name { get; set; }
       
        [Display(Name = "描述")]
        public virtual string Description { get; set; }

        public virtual int SkillId{ get; set; }

}

此時，控制器不變，

Create頁面，將Gallery的資料讀到一個list中，通過json形式post

html部分：

<div class="form-group">
    <label class="control-label col-md-3">
        @Html.DisplayNameFor(m => m.Name) :
    </label>
    <div class="col-md-4 ">
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 mylabel">
        @Html.DisplayNameFor(m => m.Icon) :
    </label>
    <div class="col-md-4">
        <input class="form-control " id="Icon" name="Icon"  />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3">
        @Html.DisplayNameFor(m => m.Description) :
    </label>
    <div class="col-md-4 ">
        @Html.TextBoxFor(m => m.Description, new { @class = "form-control" })
    </div>
</div>
/* Gallery部分*/
<ul id="GalleryDiv" >
        <li class="col-md-8" >                 
            <input name="Name" id="Name" />  
        </li>
        <li class="col-md-8" >                 
            <input name="Icon" id="Icon" />  
        </li>
</ul>

js部分：（ps:如果欄位很多，一個一個取值很麻煩，暫時沒找到好的方法） 

function GetSkill() {
            var name = $("#Name").val();
            var icon = $("#Icon").val();
          
            var list = [];
            $("#GalleryDiv").find('li').each(function () {
                var item = $(this);
                list.push({
                    Name: $("#Name").val(),
                    Icon: $("#Icon").val(),
                })
            })
            //skill實體
            var skill = {
                Name: name,
                Icon: icon,               
                Galleries:list,//對應的list部分

            }
            return skill;
        }

 $.ajax({
            url: "@Url.Action("Create")",
            type: "POST",
            data: { dto: GetSkill() },
            error: function (data) {
                 $.whiskey.web.alert({
                    type: "danger",
                    content: "建立失敗！",
                 });
           }
       })