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