2016逢甲大學資訊工程系 .Net C# MVC 教學 with ina lai

1. ASP.NET MVC 4 WEB課程
時間:2016/3/23
報告者:賴怡君

2. 大綱
• ViewModel
• Razor
• Model
2

3. ViewModel 功能
• 傳遞資料的物件
• 只有Properties
• Don‘t do this
– 在viewModel寫方法
– 在viewModel借接資料庫
• Do this
– 定義Properties驗證格式
3

4. 如何設計一個ViewModel
4

5. The Answer is …
5
要什麼資料就
怎麼設計

6. 以學生綜合資料卡為例(ViewModel)
6
1.學號
2.姓名
3.班級
4.通訊地址
5.電子信箱
6.連絡電話
I need…

7. 建立ViewModel
7
public class StudentViewModel
{
public string ID { get; set; }
public string NAME { get; set; }
public string ADDRESS { get; set; }
public string EMAIL { get; set; }
public string TEL { get; set; }
}
1.學號(ID)
2.姓名(NAME)
5.通訊地址(ADDRESS)
6.電子信箱(EMAIL)
7.連絡電話(TEL)
攻城屍

8. 8
標
題
….
攻城屍

9. 加入Display
9
1.學號(ID)
2.姓名(NAME)
3.通訊地址(ADDRESS)
4.電子信箱(EMAIL)
5.連絡電話(TEL)
我是說中文阿…
攻城屍
public class StudentViewModel
{
[DisplayName("學號")]
public string ID { get; set; }
[DisplayName("姓名")]
public string NAME { get; set; }
[DisplayName("通訊地址")]
public string ADDRESS { get; set; }
[DisplayName("電子信箱")]
public string EMAIL { get; set; }
[DisplayName("連絡電話")]
public string TEL { get; set; }
}

10. 10
姓名要必填啊!!
電子信箱怎麼可以沒有@
連絡電話只填數字
攻城屍

11. 加入驗證
11
姓名要必填
電子信箱驗證
連絡電話用正規
表達式
攻城屍
public class StudentViewModel
{
[DisplayName("學號")]
public string ID { get; set; }
[DisplayName("姓名")]
[Required]
public string NAME { get; set; }
[DisplayName("通訊地址")]
public string ADDRESS { get; set; }
[DisplayName("電子信箱")]
[EmailAddress]
public string EMAIL { get; set; }
[DisplayName("連絡電話")]
[RegularExpression(@"^[0-9]*$")]
public string TEL { get; set; }
}

12. 練習
• 新增一個表單收集學生基本資料，包括學
號、姓名、地址、電子信箱、連絡電話
1. 建立一個StudentControler
• 含Create Action
2. 建立一個StudentViewModel
• 含學號、姓名、地址、電子信箱、連絡電話
3. 建立一個Create View
12

13. 建立一個StudentControler
13

14. 建立Create Action
14

15. 建立一個StudentViewModel
15

16. StudentViewModel內容
16

17. 建立Create View
17

18. 建立Create View
18

19. Razor
• 程式碼
@{
int i=0;
}
• Html Encoded
@Model.ID
• 混合程式碼
@foreach (var item in collection)
{
<tr>
<td> @item.ID </td>
</tr>
}
19

20. Razor Html Helper
• 密碼輸入框
– @Html.PasswordFor
• 單選
– @Html.RadioButtonFor
• 輸入框
– @Html.TextBoxFor
20

21. Razor Html Helper
• 核選方塊
– @Html.CheckBoxFor
• 隱藏欄位
– @Html.HiddenFor
• 下拉選單
– @Html.DropDownListFor
• 輸入區塊
– @Html.TextAreaFor
21

22. Razor Html Helper
• 顯示內容
– @Html.DisplayFor
• 標頭顯示
– @Html.LabelFor、@Html.
• 錯誤訊息總覽
– @Html.ValidationSummary
• 各別錯誤訊息
– @Html.ValidationMessageFor
22

23. Razor
• 超連結
– @Html.ActionLink
• 嵌入部分檢視
– @Html.Partial
• DisplayTemplates
• EditorTemplates
23

24. Model介紹
24

25. Model介紹
• 何謂Model
– (廣義)Controller與View以外的就是Model
25
資料呈現
(ViewModel)
邏輯運算
(Logic)
資料庫操作
(ORM)

26. Model與View
26
@model WebApplication2.Models.Student
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.NAME)
</dt>
<dd>
@Html.DisplayFor(model => model.NAME)
</dd>
</dl>
Razor

27. Controller、View與Model
27
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算
(Logic)
Model
Request
(Service or method)

28. Controller、View與Model
28
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作
(ORM)
Model
Request
Database
將資料庫結構(Schema)
轉換成
Model直接進行操作

29. What is Model ?
29
Model
View Controller
重
笨
輕

30. 表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller

31. 表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller

32. ViewModel
• Available Attributes
– DataTypeAttribute
– DisplayAttribute
– Validation
• RequiredAttribute
• StringLengthAttribute
• RegularExpressionAttribute
• CompareAttribute
32