iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
0
Modern Web

我的30天MVC從零到不知道多少學習筆記系列 第 19

從零開始的MVC開發-View對Controller的回應-ModelBinding(5)

  • 分享至 

  • xImage
  •  

這次要來講複雜一點點的viewModel內List的ModelBinding方法~

我們的Model長這樣~

public class Student
{
    public string Name{get;set;}
    public int Height{get;set;}
}
public class Class{
    public string className{get;set;}
}
public class ClassViewModel
{
    public Class classroom{get;set;}
    public List<Student> student{get;set;}
}

一個學生資料,一個班級資料,以及一個班級+學生的ViewModel
controller長這樣~
這個範例一樣需要兩個acion,一個塞資料給view,一個接收修改後的資料

public ActionResult Index()
{
    ClassViewModel Class = new ClassViewModel();
    Class.student = new List<Student>(){
        new Student(){Name = "野原新之助", Height = 110},
        new Student(){Name = "妮妮", Height = 105}
    };
    Class.classroom=new Class(){className = "向日葵小班"};
    return View(Class);
}

[HttpPost]
public ActionResult Index(ClassViewModel Class)
{
   //這邊我們嘗試讀取修改後的第一筆學生資料~並塞入ViewBag內
    var FirstPeople=Class.student.FirstOrDefault();
    if(FirstPeople!=default(Student)){
        ViewBag.Name=FirstPeople.Name;
        ViewBag.Height = FirstPeople.Height;
    }
    return View(Class);
}

最重要的View長這樣

@model HelloWorldMvcApp.ClassViewModel
@using(Html.BeginForm()){
<div>
	<p>
		班級名稱:
		@Html.EditorFor(m=>m.classroom.className)
	</p>
	<p>學生們</p>
	<table>
		<tr>
			<td>姓名</td>
			<td>身高</td>
		</tr>
	@for(int i=0;i<Model.student.Count;i++)
	{
		<tr>
		<td>@Html.EditorFor(m=>m.student[i].Name)</td>
		<td>@Html.EditorFor(m=>m.student[i].Height)</td>
		</tr>
	}
	</table>
	<p>
		<input type="submit" value="送出"/>
	</p>
</div>
}

@ViewBag.Name
@ViewBag.Height

重點是!我們在讀取List的時候要用for迴圈建立input
這樣他建立的input會長這樣
<input class="text-box single-line" id="student_0__Name" name="student[0].Name" type="text" value="野原新之助" />
重點是name="student[i].Name"傳回controller的時候才能binding到
如果把for改寫成foreach

@foreach(var item in Model.student){
    <tr>
        <td>@Html.EditorFor(Modelitem=>item.Name)</td>
        <td>@Html.EditorFor(Modelitem=>item.Height)</td>
    </tr>
}

這樣產生的出input就會是
<input class="text-box single-line" id="item_Name" name="item.Name" type="text" value="野原新之助" />
name="item.Name"這樣傳回controller的時候就會binding不到~

好的 今天的筆記就到這裡啦~
這個簡單範例的程式碼可以在這邊執行
https://dotnetfiddle.net/4hvRVq


上一篇
從零開始的MVC開發-View對Controller的回應-ModelBinding(4)
下一篇
從零開始的MVC開發-Model的資料驗證-部分類別
系列文
我的30天MVC從零到不知道多少學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言