MVC——View向Controller傳值(一)——通過實體
阿新 • • 發佈:2019-02-19
在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: "建立失敗!",
});
}
})