Download - 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6
![Page 1: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/1.jpg)
ASP.NET MVC 4 WEB課程時間 :2016/3/23報告者 :賴怡君
![Page 2: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/2.jpg)
2
大綱• Razor
– 基本介紹– helper
• Model
![Page 3: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/3.jpg)
3
Razor (1/2)• Razor
– 更輕量化且直覺的語法,減少在 View 中輸出資料時使用的語法,讓 View 的指令更加簡潔,
– 例如使用 "@" + 變數名稱 的方式,就可以輸出程式中的變數,不必再用 <% %> 來設定。如果程式有多行,可以使用 @{ } 的方式來設定。
– 容易學習。– 可相容於現在的程式語言 (ex: C#) 。– 透過 Visual Studio ,可享有 Intellisense 能力。– 可混用 HTML 與程式語言指令。
• Razor 基本語法– 註解方法 @* *@– 程式區塊 @{ }@– 取得變數與內容 @ViewBag.Title
![Page 4: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/4.jpg)
4
Razor(2/2)• 程式碼
@{int i=0;}
• Html [email protected]
• 混合程式碼@foreach (var item in collection){ <tr> <td> @item.ID </td> </tr>}
![Page 5: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/5.jpg)
5
Helper - 表單 (1)• 表單 (form)
![Page 6: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/6.jpg)
6
Helper - 表單 (2)• 表單 (form)
![Page 7: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/7.jpg)
7
Helper - 表單 (3)
• @using (Html.BeginForm("Index", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })){ }
• 四個參數: Action , Controller , Form Method , 其他屬性
Action Controller
Method(Get or Post) Other Attribute
![Page 8: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/8.jpg)
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">
![Page 9: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/9.jpg)
9
Helper - 表單 (5)• 加入送出按鈕
– <input type="submit" value="Create" />
Controller 裡的 Create Action
![Page 10: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/10.jpg)
10
Helper - 表單 (6)• @using (Html.BeginForm(“Create", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { }
![Page 11: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/11.jpg)
11
Helper - 表單 (7)• 一般使用方法
– @Html.TextBox("name","1")
– <input id="name" name="name" type="text" value="1">
![Page 12: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/12.jpg)
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
![Page 13: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/13.jpg)
13
Helper - 表單 (9)• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
![Page 14: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/14.jpg)
14
Helper - 表單 (10)• 一般使用方法
– <input id="name" name="name" type="text" value="1">
![Page 15: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/15.jpg)
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="">
![Page 17: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/17.jpg)
17
Helper – 表單欄位製作 (1)• TextBox & TextArea
– Html.TextBox("Textbox")– Html.TextAreaFor(model => model.textbox)
– Html.TextArea("TextArea")– Html.TextAreaFor(model => model.textArea)
![Page 18: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/18.jpg)
18
Helper – 其他表單欄位製作 (2)
• Hidden– Html.Hidden(“Hidden")– Html.HiddenFor(model => model. Hidden)
![Page 19: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/19.jpg)
19
Helper – 其他表單欄位製作(3)
• Password– Html.Password(" Html.Password ")– Html.PasswordFor(model =>
model.Password)
![Page 20: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/20.jpg)
20
Helper – 其他表單欄位製作 (4)
• RadioButton– Html.RadioButton("RadioButton", 3)– Html.RadioButton(model =>
model.RadioButton, 3)
![Page 21: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/21.jpg)
21
Helper – 其他表單欄位製作 (5)
• CheckBox– Html.CheckBox("CheckBox1")– Html.CheckBoxFor(“model =>
model.CheckBox1")
![Page 22: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/22.jpg)
22
Helper – 其他表單欄位製作 (6)
• Dropdownlist
![Page 23: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/23.jpg)
23
Helper – 其他表單欄位製作(7)
• Dropdownlist
![Page 24: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/24.jpg)
24
Helper – 其他• 超連結
– @Html.ActionLink • 嵌入部分檢視
– @Html.Partial
• DisplayTemplates• EditorTemplates
![Page 25: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/25.jpg)
25
實作• 使用 Html BeginForm 建立簡單表單• 練習使用 html helper ,配合 ViewModel 建立強型別表單
![Page 26: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/26.jpg)
26
Model介紹
![Page 27: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/27.jpg)
27
Model介紹• 何謂 Model
– ( 廣義 )Controller 與 View 以外的就是 Model
資料呈現(ViewModel)
邏輯運算(Logic)
資料庫操作(ORM)
![Page 28: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/28.jpg)
28
Model與 View@model WebApplication2.Models.Student
<dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.NAME) </dt>
<dd> @Html.DisplayFor(model => model.NAME) </dd></dl>
Razor
![Page 29: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/29.jpg)
29
Controller、 View與Model
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算(Logic)
Model
Request
(Service or method)
![Page 30: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/30.jpg)
30
Controller、 View與Model
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作(ORM)
Model
Request
Database
將資料庫結構 (Schema)轉換成Model 直接進行操作
![Page 31: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/31.jpg)
31
What is Model ?
Model
View Controller
重
笨
輕
![Page 32: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/32.jpg)
表單應用表單 輸入邏輯程式
資料庫
送出儲存資料
輸出邏輯程式
應用程式
網頁 讀取資料顯示
Controller
![Page 33: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/33.jpg)
表單應用表單 輸入邏輯程式
資料庫
送出儲存資料
輸出邏輯程式
應用程式
網頁 讀取資料顯示
Controller
![Page 34: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/34.jpg)
34
ViewModel• Available Attributes
– DataTypeAttribute– DisplayAttribute– Validation
• RequiredAttribute• StringLengthAttribute• RegularExpressionAttribute• CompareAttribute
![Page 35: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練6](https://reader036.vdocuments.net/reader036/viewer/2022081502/58a561d21a28ab20528b5083/html5/thumbnails/35.jpg)