Download - 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5
![Page 1: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/1.jpg)
ASP.NET MVC 4 WEB課程時間 :2016/3/23報告者 :賴怡君
![Page 2: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/2.jpg)
2
大綱• ViewModel• Razor• Model
![Page 3: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/3.jpg)
3
ViewModel 功能• 傳遞資料的物件• 只有 Properties • Don‘t do this
–在 viewModel寫方法–在 viewModel借接資料庫
• Do this–定義 Properties驗證格式
![Page 4: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/4.jpg)
4
如何設計一個 ViewModel
![Page 5: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/5.jpg)
5
The Answer is …
!要什麼資料就怎麼設計
![Page 6: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/6.jpg)
6
以學生綜合資料卡為例 (ViewModel)
1. 學號2. 姓名3. 班級4. 通訊地址5. 電子信箱6. 連絡電話
I need…
![Page 7: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/7.jpg)
7
建立 ViewModelpublic 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)
攻城屍
![Page 8: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/8.jpg)
8
標題….
攻城屍
![Page 9: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/9.jpg)
9
加入Display1. 學號 (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; }}
![Page 10: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/10.jpg)
10
姓名要必填啊 !!
電子信箱怎麼可以沒有@
連絡電話只填數字
攻城屍
![Page 11: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/11.jpg)
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; }}
![Page 12: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/12.jpg)
12
練習• 新增一個表單收集學生基本資料,包括學號、姓名、地址、電子信箱、連絡電話1. 建立一個 StudentControler
• 含 Create Action2. 建立一個 StudentViewModel• 含學號、姓名、地址、電子信箱、連絡電話3. 建立一個 Create View
![Page 13: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/13.jpg)
13
建立一個 StudentControler
![Page 14: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/14.jpg)
14
建立 Create Action
![Page 15: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/15.jpg)
15
建立一個StudentViewModel
![Page 16: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/16.jpg)
16
StudentViewModel內容
![Page 17: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/17.jpg)
17
建立 Create View
![Page 18: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/18.jpg)
18
建立 Create View
![Page 19: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/19.jpg)
19
Razor• 程式碼
@{int i=0;}
• Html [email protected]
• 混合程式碼@foreach (var item in collection){ <tr> <td> @item.ID </td> </tr>}
![Page 20: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/20.jpg)
20
Razor Html Helper• 密碼輸入框
– @Html.PasswordFor
• 單選– @Html.RadioButtonFor
• 輸入框– @Html.TextBoxFor
![Page 21: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/21.jpg)
21
Razor Html Helper• 核選方塊
– @Html.CheckBoxFor
• 隱藏欄位– @Html.HiddenFor
• 下拉選單– @Html.DropDownListFor
• 輸入區塊– @Html.TextAreaFor
![Page 22: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/22.jpg)
22
Razor Html Helper• 顯示內容
– @Html.DisplayFor• 標頭顯示
– @Html.LabelFor、@Html.• 錯誤訊息總覽
– @Html.ValidationSummary• 各別錯誤訊息
– @Html.ValidationMessageFor
![Page 23: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/23.jpg)
23
Razor• 超連結
– @Html.ActionLink • 嵌入部分檢視
– @Html.Partial
• DisplayTemplates• EditorTemplates
![Page 24: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/24.jpg)
24
Model介紹
![Page 25: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/25.jpg)
25
Model介紹• 何謂Model
– (廣義 )Controller與 View以外的就是Model
資料呈現(ViewModel)
邏輯運算(Logic)
資料庫操作(ORM)
![Page 26: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/26.jpg)
26
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 27: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/27.jpg)
27
Controller、 View與Model
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算(Logic)
Model
Request
(Service or method)
![Page 28: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/28.jpg)
28
Controller、 View與Model
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作(ORM)
Model
Request
Database
將資料庫結構 (Schema)轉換成Model直接進行操作
![Page 29: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/29.jpg)
29
What is Model ?
Model
View Controller
重
笨
輕
![Page 30: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/30.jpg)
表單應用表單 輸入邏輯程式
資料庫
送出儲存資料
輸出邏輯程式
應用程式
網頁 讀取資料顯示
Controller
![Page 31: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/31.jpg)
表單應用表單 輸入邏輯程式
資料庫
送出儲存資料
輸出邏輯程式
應用程式
網頁 讀取資料顯示
Controller
![Page 32: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/32.jpg)
32
ViewModel• Available Attributes
– DataTypeAttribute– DisplayAttribute– Validation
• RequiredAttribute• StringLengthAttribute• RegularExpressionAttribute• CompareAttribute
![Page 33: 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5](https://reader036.vdocuments.site/reader036/viewer/2022081418/58a562031a28ab20528b50d7/html5/thumbnails/33.jpg)