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