2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5
Download as PPTX, PDF1 like521 views
本文件是关于2015年4月30日举行的ASP.NET MVC 4网络课程的介绍，讲师信息包括赖怡君和谢政廷。课程涵盖MVC架构、控制器与模型、视图与前端开发、数据库及LINQ和Entity Framework等内容，同时还包括IIS的设置和工具使用等实作内容。文档详细列出了课程大纲与基本语法，包括View的创建、表单处理以及数据传递的方法，结合IIS的安装与配置，以及Entity Framework的基本使用。
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練5
- 1. ASP.NET MVC 4 WEB課程 時間:2015/4/30 報告者:賴怡君
- 2. 講師資料(I) 2 姓 名 謝政廷(Duran) 職 稱 高級工程師 部 門 凌網科技 智慧科技發展事業處 學 歷 逢甲大學資訊工程所 碩士 工作總年資 3年 專 長 程式開發 認 證 Oracle Certified Professional, Java SE 6 Programmer Programming in HTML5 with JavaScript and CSS3 Specialist
- 3. 講師資料(II) 姓 名 賴怡君(Ina) 職 稱 工程師 部 門 凌網科技 智慧科技發展事業處 學 歷 逢甲大學資訊工程所 碩士 工作總年資 5年 專 長 程式開發 認 證 The Sun Certified Java Programmer 5 Programming in HTML5 with JavaScript and CSS3 Specialist 3
- 4. 課程大綱 • MVC架構介紹(3/26) • Controller, Model(4/9) • View, CSS, JavaScript(4/23) • Database, Linq, Entity Framework(4/30) • 其他(IIS設定, 工具使用)(5/7) 4
- 5. 大綱 • 上週實作(續) • Linq • IIS設定 • Entity Framework 5
- 6. View (1) • 新增檢視一(從檔案目錄新增檢視) – 對View資料夾(或內部資料夾)點選右鍵 -> 加入 -> 檢視 6
- 7. View (2) • 新增檢視二(從Controller加入view) – 在Controller中的Action中點選右鍵 – 選擇加入檢視 7
- 8. View (3) • 新增檢視(設定) – 輸入名稱 – 選擇檢視引擎 – 選擇型別類型 – 選擇建立部分檢視 – 選擇主版 – 點選加入完成檢視 8
- 9. View (4) • Razor – 更輕量化且直覺的語法，減少在 View 中輸出資料時使用的語法， 讓 View 的指令更加簡潔， – 例如使用 "@" + 變數名稱 的方式，就可以輸出程式中的變數，不 必再用 <% %> 來設定。如果程式有多行，可以使用 @{ } 的方式 來設定。 – 容易學習。 – 可相容於現在的程式語言 (ex: C#)。 – 透過 Visual Studio，可享有 Intellisense 能力。 – 可混用 HTML 與程式語言指令。 • Razor基本語法 – 註解方法 @* *@ – 程式區塊 @{ }@ – 取得變數與內容 @ViewBag.Title 9
- 10. View (5) 10
- 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")'); 11
- 12. View (7) • 導引換頁： – @Html.ActionLink(“名稱", “action", “controller") • 超連結 • 參數一：顯示名稱 • 參數二：action • 參數三：controller 12
- 13. View(8) – @Url.Action(“action”,”controller”) • 參數一：action • 參數二：controller • 導向位置，可用於Button • <input type="button" value="重新填寫" onclick="javascript:window.location='@Url.Action(“ modify", “profile")'" /> 13
- 14. View(9) • 部份檢視 (partial view) 14
- 15. View(10) • 部份檢視 (partial view) 15
- 16. 實作 • 從Controller建立View • 使用ActionLink建立連結 • 使用Url.Action建立連結 16
- 17. 資料傳遞方法(1) • ViewData • ViewBag • TempData • ViewModel 17
- 20. Helper - 表單(1) • 表單(form) 20
- 21. Helper - 表單(2) • 表單(form) 21
- 22. Helper - 表單(3) • @using (Html.BeginForm("Index", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })){ } • 四個參數：Action , Controller , Form Method , 其他屬性 22 Action Controller Method(Get or Post) Other Attribute
- 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"> 23
- 24. Helper - 表單(5) • 加入送出按鈕 – <input type="submit" value="Create" /> 24 Controller裡的Create Action
- 25. Helper - 表單(6) • @using (Html.BeginForm(“Create", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { } 25
- 26. Helper - 表單(7) • 一般使用方法 – @Html.TextBox("name","1") – <input id="name" name="name" type="text" value="1"> 26
- 27. 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
- 28. Helper - 表單(9) • 一般使用方法 – @Html.TextBox("name", "1", new { Style="color:red;" }) 28
- 29. Helper - 表單(10) • 一般使用方法 – <input id="name" name="name" type="text" value="1"> 29
- 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=""> 30
- 31. Helper - 表單(12) • ViewModel綁定 @model WebApplication2.Models.Student @Html.TextBoxFor(model => model.ID) 31
- 32. Helper – 表單欄位製作(1) 32 • TextBox & TextArea – Html.TextBox("Textbox") – Html.TextAreaFor(model => model.textbox) – Html.TextArea("TextArea") – Html.TextAreaFor(model => model.textArea)
- 33. Helper – 其他表單欄位製作(2) 33 • Hidden – Html.Hidden(“Hidden") – Html.HiddenFor(model => model. Hidden)
- 34. Helper – 其他表單欄位製作(3) • Password – Html.Password(" Html.Password ") – Html.PasswordFor(model => model.Password) 34
- 35. Helper – 其他表單欄位製作(4) 35 • RadioButton – Html.RadioButton("RadioButton", 3) – Html.RadioButton(model => model.RadioButton, 3)
- 36. Helper – 其他表單欄位製作(5) 36 • CheckBox – Html.CheckBox("CheckBox1") – Html.CheckBoxFor(“model => model.CheckBox1")
- 37. Helper – 其他表單欄位製作(6) • Dropdownlist 37
- 38. Helper – 其他表單欄位製作(7) • Dropdownlist 38
- 39. 實作 • 使用Html BeginForm建立簡單表單 • 練習使用html helper，配合ViewModel建立 強型別表單 39
- 40. IIS(1) • 網 際 網 路 資 訊 服 務 (Internet Information Services,IIS) – 具有彈性、安全且容易管理的網頁伺服器。 40
- 41. IIS(2) 41
- 46. IIS(7) • 使用Visual Studio 2010進行專案發佈 46
- 47. IIS(8) 47
- 49. IIS(10) 49
- 50. IIS(11) 50
- 51. IIS(12) 51
- 52. IIS(13) 52
- 53. IIS(14) 53
- 54. IIS(15) 54
- 55. IIS(16) 55
- 56. IIS(17) 56
- 57. Entity Framework (1) • 物件關連對應(Object Relational Mapping,ORM) – 將不同資料轉換成 物件導向的技術 57
- 58. Entity Framework (2) • ADO 58
- 59. Entity Framework (3) • ORM 59
- 60. Entity Framework (2) • Database First • Model First • Code First 60
- 61. Entity Framework (3) • 利用資料庫產生模組 61
- 62. Entity Framework (4) • 利用資料庫產生模組 62
- 67. Entity Framework (9) • 利用模組直接產生相對應的Controller、 View與Model – DEMO： 67
Editor's Notes
- #10: 參考wiki說明 http://zh.wikipedia.org/wiki/ASP.NET_MVC_Framework#ASP.NET_MVC_Razor_Engine
- #11: 1.註解方法 @* *@ 2.程式區塊 @{ }@ 3.取得變數與內容 @ViewBag.Title
- #15: @Html.Partial() @Html.RenderPartial()
- #61: 使用Entity Framework的開發方式有三種：Code First、 Model First與Database First Database First：由資料庫產生模型，如果有DBA的角色存在，那就是DBA怎麼規劃資料庫，你就乖乖照著用 Model First：透過Entity Framework的工具設計模型後再建立資料庫 Code First：使用程式碼定義模型後再建立資料庫