MVC——View向Controller传值（一）——通过实体

 

在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: "创建失败！",
                 });
           }
       })