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

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

2. 大綱
• Razor
– 基本介紹
– helper
• Model
2

3. Razor (1/2)
• Razor
– 更輕量化且直覺的語法，減少在 View 中輸出資料時使用的語法，
讓 View 的指令更加簡潔，
– 例如使用 "@" + 變數名稱 的方式，就可以輸出程式中的變數，不
必再用 <% %> 來設定。如果程式有多行，可以使用 @{ } 的方式
來設定。
– 容易學習。
– 可相容於現在的程式語言 (ex: C#)。
– 透過 Visual Studio，可享有 Intellisense 能力。
– 可混用 HTML 與程式語言指令。
• Razor基本語法
– 註解方法 @* *@
– 程式區塊 @{ }@
– 取得變數與內容 @ViewBag.Title
3

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

5. Helper - 表單(1)
• 表單(form)
5

6. Helper - 表單(2)
• 表單(form)
6

7. Helper - 表單(3)
• @using (Html.BeginForm("Index", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" ,
id="CityId" })){ }
• 四個參數：Action , Controller , Form Method , 其他屬性
7
Action Controller
Method(Get or Post)
Other Attribute

8. Helper - 表單(4)
• @using (Html.BeginForm(“Create", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" ,
id="CityId" })) { }
• <form action="/Student/Create" enctype="multipart/form-
data" id="CityId" method="post">
8

9. Helper - 表單(5)
• 加入送出按鈕
– <input type="submit" value="Create" />
9
Controller裡的Create Action

10. Helper - 表單(6)
• @using (Html.BeginForm(“Create", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" ,
id="CityId" })) { }
10

11. Helper - 表單(7)
• 一般使用方法
– @Html.TextBox("name","1")
– <input id="name" name="name" type="text"
value="1">
11

12. Helper - 表單(8)
• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
– <input id="name" name="name" type="text"
value="1" style="color:red;">
12
NAME VALUE Other attribute

13. Helper - 表單(9)
• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
13

14. Helper - 表單(10)
• 一般使用方法
– <input id="name" name="name" type="text" value="1">
14

15. Helper - 表單(11)
• ViewModel綁定
– @model WebApplication2.Models.Student
– @Html.TextAreaFor(model => model.ID)
– <input class="text-box single-line" id="ID"
name="ID" type="text" value="">
15

16. Helper - 表單(12)
• ViewModel綁定
@model WebApplication2.Models.Student
@Html.TextBoxFor(model => model.ID)
16

17. Helper – 表單欄位製作(1)
17
• TextBox & TextArea
– Html.TextBox("Textbox")
– Html.TextAreaFor(model => model.textbox)
– Html.TextArea("TextArea")
– Html.TextAreaFor(model => model.textArea)

18. Helper – 其他表單欄位製作(2)
18
• Hidden
– Html.Hidden(“Hidden")
– Html.HiddenFor(model => model. Hidden)

19. Helper – 其他表單欄位製作(3)
• Password
– Html.Password(" Html.Password ")
– Html.PasswordFor(model => model.Password)
19

20. Helper – 其他表單欄位製作(4)
20
• RadioButton
– Html.RadioButton("RadioButton", 3)
– Html.RadioButton(model =>
model.RadioButton, 3)

21. Helper – 其他表單欄位製作(5)
21
• CheckBox
– Html.CheckBox("CheckBox1")
– Html.CheckBoxFor(“model =>
model.CheckBox1")

22. Helper – 其他表單欄位製作(6)
• Dropdownlist
22

23. Helper – 其他表單欄位製作(7)
• Dropdownlist
23

24. Helper – 其他
• 超連結
– @Html.ActionLink
• 嵌入部分檢視
– @Html.Partial
• DisplayTemplates
• EditorTemplates
24

25. 實作
• 使用Html BeginForm建立簡單表單
• 練習使用html helper，配合ViewModel建立
強型別表單
25

26. Model介紹
26

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

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

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

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

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

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

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

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