(Fcu2)mvc 4 net 教育訓練5
-
Upload
duran-hsieh -
Category
Education
-
view
35 -
download
9
Transcript of (Fcu2)mvc 4 net 教育訓練5
![Page 1: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/1.jpg)
ASP.NET MVC 4 WEB 課程
時間 :2015/4/30報告者 : 賴怡君
![Page 2: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/2.jpg)
2
講師資料 (I)
姓 名 謝政廷 (Duran) 職 稱 高級工程師
部 門 凌網科技 智慧科技發展事業處
學 歷 逢甲大學資訊工程所 碩士
工作總年資 3 年
專 長 程式開發
認 證Oracle Certified Professional, Java SE 6 Programmer
Programming in HTML5 with JavaScript and CSS3 Specialist
![Page 3: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/3.jpg)
3
講師資料 (II)
姓 名 賴怡君 (Ina) 職 稱 工程師
部 門 凌網科技 智慧科技發展事業處
學 歷 逢甲大學資訊工程所 碩士
工作總年資 5 年
專 長 程式開發
認 證The Sun Certified Java Programmer 5
Programming in HTML5 with JavaScript and CSS3 Specialist
![Page 4: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/4.jpg)
4
課程大綱• MVC 架構介紹 (3/26)• Controller, Model(4/9)• View, CSS, JavaScript(4/23)• Database, Linq, Entity Framework(4/30)• 其他 (IIS 設定 , 工具使用 )(5/7)
![Page 5: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/5.jpg)
5
大綱
• 上週實作 ( 續 )• Linq• IIS 設定• Entity Framework
![Page 6: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/6.jpg)
6
View (1)• 新增檢視一 ( 從檔案目錄新增檢視 )
– 對 View 資料夾 ( 或內部資料夾 ) 點選右鍵 -> 加入 -> 檢視
![Page 7: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/7.jpg)
7
View (2)• 新增檢視二 ( 從 Controller 加入 view)
– 在 Controller 中的 Action 中點選右鍵– 選擇加入檢視
![Page 8: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/8.jpg)
8
View (3)• 新增檢視 ( 設定 )
– 輸入名稱– 選擇檢視引擎– 選擇型別類型– 選擇建立部分檢視– 選擇主版– 點選加入完成檢視
![Page 9: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/9.jpg)
9
View (4)• Razor
– 更輕量化且直覺的語法,減少在 View 中輸出資料時使用的語法,讓 View 的指令更加簡潔,
– 例如使用 "@" + 變數名稱 的方式,就可以輸出程式中的變數,不必再用 <% %> 來設定。如果程式有多行,可以使用 @{ } 的方式來設定。
– 容易學習。– 可相容於現在的程式語言 (ex: C#) 。– 透過 Visual Studio ,可享有 Intellisense 能力。– 可混用 HTML 與程式語言指令。
• Razor 基本語法– 註解方法 @* *@– 程式區塊 @{ }@– 取得變數與內容 @ViewBag.Title
![Page 10: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/10.jpg)
10
View (5)
![Page 11: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/11.jpg)
11
View (6)• 引入檔案
– Url.Content()– 相對路徑轉絕對路徑– 能用於引入 js 、影像檔案、音樂檔案… etc
– <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
– background-image: url('@Url.Content("~/Content/Images/seizurerobots.gif")');
![Page 12: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/12.jpg)
12
View (7)• 導引換頁:
– @Html.ActionLink(“ 名稱 ", “action", “controller")• 超連結• 參數一:顯示名稱• 參數二: action• 參數三: controller
![Page 13: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/13.jpg)
13
View(8)– @Url.Action(“action”,”controller”)
• 參數一: action• 參數二: controller• 導向位置,可用於 Button• <input type="button" value=" 重新填寫 "
onclick="javascript:window.location='@Url.Action(“modify", “profile")'" />
![Page 14: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/14.jpg)
14
View(9)• 部份檢視 (partial view)
![Page 15: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/15.jpg)
15
View(10)• 部份檢視 (partial view)
![Page 16: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/16.jpg)
16
實作• 從 Controller 建立 View• 使用 ActionLink 建立連結• 使用 Url.Action 建立連結
![Page 17: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/17.jpg)
17
資料傳遞方法 (1)• ViewData• ViewBag• TempData• ViewModel
![Page 18: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/18.jpg)
18
資料傳遞方法 (2)
Controller加入
ViewBag.message=“message test”
View加入
@ViewBag.message
![Page 19: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/19.jpg)
19
實作• 練習 ViewBag
![Page 20: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/20.jpg)
20
Helper - 表單 (1)• 表單 (form)
![Page 21: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/21.jpg)
21
Helper - 表單 (2)• 表單 (form)
![Page 22: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/22.jpg)
22
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 23: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/23.jpg)
23
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 24: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/24.jpg)
24
Helper - 表單 (5)• 加入送出按鈕
– <input type="submit" value="Create" />
Controller 裡的 Create Action
![Page 25: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/25.jpg)
25
Helper - 表單 (6)• @using (Html.BeginForm(“Create", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { }
![Page 26: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/26.jpg)
26
Helper - 表單 (7)• 一般使用方法
– @Html.TextBox("name","1")
– <input id="name" name="name" type="text" value="1">
![Page 27: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/27.jpg)
Helper - 表單 (8)• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
– <input id="name" name="name" type="text" value="1" style="color:red;">
27
NAME VALUE Other attribute
![Page 28: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/28.jpg)
28
Helper - 表單 (9)• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
![Page 29: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/29.jpg)
29
Helper - 表單 (10)• 一般使用方法
– <input id="name" name="name" type="text" value="1">
![Page 30: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/30.jpg)
30
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 31: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/31.jpg)
31
Helper - 表單 (12)• ViewModel 綁定
@model WebApplication2.Models.Student
@Html.TextBoxFor(model => model.ID)
![Page 32: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/32.jpg)
32
Helper – 表單欄位製作 (1)• TextBox & TextArea
– Html.TextBox("Textbox")– Html.TextAreaFor(model => model.textbox)
– Html.TextArea("TextArea")– Html.TextAreaFor(model => model.textArea)
![Page 33: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/33.jpg)
33
Helper – 其他表單欄位製作 (2)
• Hidden– Html.Hidden(“Hidden")– Html.HiddenFor(model => model. Hidden)
![Page 34: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/34.jpg)
34
Helper – 其他表單欄位製作(3)
• Password– Html.Password(" Html.Password ")– Html.PasswordFor(model =>
model.Password)
![Page 35: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/35.jpg)
35
Helper – 其他表單欄位製作 (4)
• RadioButton– Html.RadioButton("RadioButton", 3)– Html.RadioButton(model =>
model.RadioButton, 3)
![Page 36: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/36.jpg)
36
Helper – 其他表單欄位製作 (5)
• CheckBox– Html.CheckBox("CheckBox1")– Html.CheckBoxFor(“model =>
model.CheckBox1")
![Page 37: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/37.jpg)
37
Helper – 其他表單欄位製作 (6)
• Dropdownlist
![Page 38: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/38.jpg)
38
Helper – 其他表單欄位製作(7)
• Dropdownlist
![Page 39: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/39.jpg)
39
實作• 使用 Html BeginForm 建立簡單表單• 練習使用 html helper ,配合 ViewModel 建
立強型別表單
![Page 40: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/40.jpg)
40
IIS(1)• 網 際 網 路 資 訊 服 務 (Internet Information
Services,IIS)– 具有彈性、安全且容易管理的網頁伺服器。
![Page 41: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/41.jpg)
41
IIS(2)
![Page 42: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/42.jpg)
42
IIS(3)
IIS安裝1. 控制台 -> 程式集
![Page 43: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/43.jpg)
43
IIS(4)
IIS安裝2. 開啟或關閉Windows 功能
![Page 44: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/44.jpg)
44
IIS(5)
IIS安裝3. 勾選安裝套件
![Page 45: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/45.jpg)
45
IIS(6)
IIS安裝4. 安裝5. 完成安裝
![Page 46: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/46.jpg)
46
IIS(7)• 使用 Visual Studio 2010 進行專案發佈
![Page 47: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/47.jpg)
47
IIS(8)
![Page 48: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/48.jpg)
48
IIS(9)• Web Deploy 、 WebDeploy 、 FTP
、檔案系統
![Page 49: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/49.jpg)
49
IIS(10)
![Page 50: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/50.jpg)
50
IIS(11)
![Page 51: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/51.jpg)
51
IIS(12)
![Page 52: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/52.jpg)
52
IIS(13)
![Page 53: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/53.jpg)
53
IIS(14)
![Page 54: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/54.jpg)
54
IIS(15)
![Page 55: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/55.jpg)
55
IIS(16)
![Page 56: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/56.jpg)
56
IIS(17)
![Page 57: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/57.jpg)
57
Entity Framework (1)• 物件關連對應 (Object Relational Mapping,ORM)
– 將不同資料轉換成 物件導向的技術
![Page 58: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/58.jpg)
58
Entity Framework (2)• ADO
![Page 59: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/59.jpg)
59
Entity Framework (3)• ORM
![Page 60: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/60.jpg)
60
Entity Framework (2)• Database First• Model First• Code First
![Page 61: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/61.jpg)
61
Entity Framework (3)• 利用資料庫產生模組
![Page 62: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/62.jpg)
62
Entity Framework (4)• 利用資料庫產生模組
![Page 63: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/63.jpg)
63
Entity Framework (5)
![Page 64: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/64.jpg)
64
Entity Framework (6)
![Page 65: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/65.jpg)
65
Entity Framework (7)
![Page 66: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/66.jpg)
66
Entity Framework (8)
![Page 67: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/67.jpg)
67
Entity Framework (9)• 利用模組直接產生相對應的
Controller 、 View 與 Model– DEMO :
![Page 68: (Fcu2)mvc 4 net 教育訓練5](https://reader035.fdocument.pub/reader035/viewer/2022062216/55d2e64dbb61eb68158b45ae/html5/thumbnails/68.jpg)