ASP.Net MVC Framework
Download as PPTX, PDF9 likes1,496 views
本文探讨了ASP.NET MVC框架的特点，包括与Web Form的区别、开发习惯的重要性、Scrum和极限编程的关键要素。它详细介绍了MVC模式的结构（模型、视图、控制器）及其功能，并讨论了LINQ和ORM技术的运用，以及Entity Framework的开发模式和数据库迁移的概念。文档还包含了对数据库表结构的多种设计方式和关系的描述。
![Code First資料庫移轉
• 啟用資料庫移轉
• Enable-Migrations –ContextTypeName [Context完整類別名稱]
• 增加一個更新版本
• Add-Migration [版本名稱]
• 更新資料庫
• Update-Database
• Update-Database –SourceMigration [來源版本名稱]
• Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱]
• Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱] –Script
• Update-Database –TargetMigration: $InitialDatabase](https://image.slidesharecdn.com/bn98axrethuosqbuiw7f-signature-1e78f41c329201adf4cd7ea6d687decad43e55c3e8fe06d844c6bf96b5fa9a74-poli-151127121252-lva1-app6892/85/ASP-Net-MVC-Framework-69-320.jpg)
![Help輔助類別-
載入部份檢視
使用方式 使用範例
Html.Partial(String) Html.Partial("Hello")
Html.Partial(String,Object) Html.Partial("Hello",Model)
Html.Partial(String, ViewData Dictionary) Html.Partial("Hello", ViewData["Hi"])
Html(String, Object, ViewData Dictionary) Html.Partial("Hello",Model,ViewData["Hi"])](https://image.slidesharecdn.com/bn98axrethuosqbuiw7f-signature-1e78f41c329201adf4cd7ea6d687decad43e55c3e8fe06d844c6bf96b5fa9a74-poli-151127121252-lva1-app6892/85/ASP-Net-MVC-Framework-126-320.jpg)
![jQuery動畫
• 顯示:
• show()show(speed[,callback])
• 隱藏:
• hide()hide(speed[,callback])
• toggle()toggle(speed[,callback])
• 滑動:
• slideUp()slideUp(speed[,callback])slideDown()slideDown(speed[,callback])
• 淡化:
• fadeIn(speed[,callback])fadeout(speed[,callback])faceTo(speed,opacity[,callback])
• 自訂
• animate(params[,duration[,easing[,callback]]])](https://image.slidesharecdn.com/bn98axrethuosqbuiw7f-signature-1e78f41c329201adf4cd7ea6d687decad43e55c3e8fe06d844c6bf96b5fa9a74-poli-151127121252-lva1-app6892/85/ASP-Net-MVC-Framework-145-320.jpg)
![jQuery Ajax
• 基本的jQuery Ajax型態:
jQuery.ajax(url[,settings])](https://image.slidesharecdn.com/bn98axrethuosqbuiw7f-signature-1e78f41c329201adf4cd7ea6d687decad43e55c3e8fe06d844c6bf96b5fa9a74-poli-151127121252-lva1-app6892/85/ASP-Net-MVC-Framework-146-320.jpg)
![jQuery Ajax簡短方法
• jQuery.get(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入資料
• jQuery.getJson(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入Json格式資料
• jQuery.getScript(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入Js檔案
• jQuery.post(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Post request從伺服器載入資料
• jQuery.load(url[,data][,complete(reponseText,textStatus,XMLHttpRequest)])
• 從伺服器取得Html資料,並將其放置到匹配的元素中](https://image.slidesharecdn.com/bn98axrethuosqbuiw7f-signature-1e78f41c329201adf4cd7ea6d687decad43e55c3e8fe06d844c6bf96b5fa9a74-poli-151127121252-lva1-app6892/85/ASP-Net-MVC-Framework-147-320.jpg)
ASP.Net MVC Framework
- 2. MVC與Web Form的不同 • MVC沒有控制項 • MVC沒有ViewState • MVC沒有讓你昏倒的一堆事件 • MVC是開放原始碼 • MVC注重開發習慣
- 5. Scrum
- 7. 要點 故事描述要以業務層面出發 要有範圍,估算,重要性 , 並且顧及品質 故事內容要明確, 並且符合產品負責人所要求 太大的故事可拆成小故事 故事拆分成任務 技術故事盡量用可衡量業務價值說明 產品負責人需定義驗收標準,並對重要項目估算 估算不是承若 紀錄項目 (索引卡) 識別碼 名稱 重要性 估算 如何展示 註解 , 其他… 估算方式 本能估算 生產率計算 使用計畫撲克
- 10. 真的在執行Scrum嗎? • 1. 你們有固定的反覆運算週期麼？你們的反覆運算週期是否以某個特定的 時間開始並以某個固定的時間結束，且反覆運算週期必須少於6周？（回答 否定的則不符合反覆運算開發原則） • 2. 在每個反覆運算週期結束時，你們能提供可以工作的軟體麼？（回答否 定的則不符合反覆運算開發原則） • 3. 在反覆運算開始之前，你們是否需要必須有一個完整細緻的需求說明？ （回答肯定的則不符合反覆運算開發原則） • 4. 是否將測試作為反覆運算增量開發的一部分，在開發過程中進行測試？ （回答否定的則不符合反覆運算開發原則）
- 11. XP(極限編程) • 規劃策略(The Planning Game)； 結對程式設計(Pair programming) 測試(Testing) 重構(Refractoring) 簡單設計(Simple Design) 代碼集體所有權(Collective Code Ownership) 持續集成(Continuous Integration) 現場客戶(On-site Customer) 小型發佈（Small Release） 每週40小時工作制（40-hour Week） 編碼規範（Code Standards） 系統隱喻（System Metaphor）
- 12. MVC
- 13. MVC長成什麼樣?
- 17. 物件導向
- 19. MVC的好處 好寫 好改 好簡單
- 20. 進入正題 MVC各由三個名詞取第一個字母拼裝而成 • M->Model • V->View • C->Controller
- 21. Model • 負責定義資料格式與資料存取的介面。主要任務如下: • 定義資料結構 • 負責與資料來源溝通 • 資料格式驗證 • 對資料進行加工處理 簡單來說… Model就是在處理資料的物件。
- 22. View • 負責使用者介面相關呈現,包括輸出入。 • 輸出 • 從Controller取得資料,並顯示在用戶端介面上。 • 參考Model中所定義的資料格式。 • 輸入 • 基本資料格式驗證。 • 利用Get/Post與Controller互動。 簡單來說… View就是在處理畫面的物件。
- 23. Controller • 負責控制系統運行的流程,決定網頁操作的流程與動線,主要任務如下: • 決定與用戶端溝通的協定。 • 決定系統運作的流程。 • 從Model取得資料。 • 決定該顯示那一個View。 簡單來說… Controller就是在決定系統好不好用的物件。
- 24. MVC應該要的長相
- 25. MVC的運作方式
- 26. Model
- 27. Model討論的議題 • Linq • ORM • Entity Framework • Repository Pattern
- 28. Linq • 全名: Language-Integrated Query • .Net Framework 3.5引進的技術 • 徹底解決以一種語法存取各種不同資料來源。 • 有兩種Style: • Function • 類SQL 參考網站: http://msdn.microsoft.com/zh-tw/library/bb397926.aspx
- 29. Sample
- 30. 概觀 • 共分幾種: • Linq to Object • Linq to XML • Ling to Entity • Linq to XXX • Linq開放Provider,任何人都可以設計出自己所需要的Linq資料來源。
- 33. Linq的查詢作業 1. 取得資料來源 2. 篩選(Where) 3. 排序(Order) 4. 群組(Group) 5. 聯結(Join) 6. 投影(Projection)
- 35. 複雜型別的應用
- 36. 兩種Style,相同的結果
- 37. 使用Let讓Linq更簡單
- 38. 排序資料 方法名稱 描述 OrderBy 將值依遞增順序排序 OrderByDescending 將值依遞減順序排序 ThenBy 以遞增序執行次要排序 ThenByDescending 以遞減順序執行次要排序 Reverse 反轉集合中項目的順序 http://msdn.microsoft.com/zh-tw/library/bb546145.aspx
- 39. 設定作業 方法名稱 描述 Distinct 移除集合中的重複值 Except 傳回集合差異,表示出現在某個集合中,但沒有 出現在另一個集合中的項目 Intersect 傳回集合交集,表示同時出現在兩個集合中的 項目 Union 傳回集合聯集,表示將兩個集合集結後的項目 (去除重複值) http://msdn.microsoft.com/zh-tw/library/bb546153.aspx
- 40. 篩選 方法名稱 描述 OfType 根據是否可以轉換為指定的型別來選取值 Where 根據述詞函式來選取值 http://msdn.microsoft.com/zh-tw/library/bb546161.aspx
- 41. 集合判斷 方法名稱 描述 All 判斷序列中的項目是否全都符合條件 Any 判斷序列中是否有任何項目會符合條件 Contain 判斷序列是否包含指定的項目 http://msdn.microsoft.com/zh-tw/library/bb546128.aspx
- 42. 選取 方法名稱 描述 Select 投影以轉換函式為基礎的值 SelectMany 投影以轉換函式為基礎的值序列,然後將它們 簡化成單一序列 http://msdn.microsoft.com/zh-tw/library/bb546168.aspx
- 43. 分割 方法名稱 描述 Skip 略過序列中的項目,直到指定的位置為止 SkipWhile 根據述詞函式略過項目,直到項目不符合條件 為止 Take 取用佇列中的項目,直到指定的位置為止 TakeWhile 根據述詞函式取用項目,直到項目不符合條件 為止 http://msdn.microsoft.com/zh-tw/library/bb546164.aspx
- 44. 聯結 方法名稱 描述 Join 根據索引鍵選取器函式聯結兩個序列,並擷取 值組 GroupJoin 根據索引鍵選取器函式聯結兩個序列,並將每 個項目產生的相符項目分組 http://msdn.microsoft.com/zh-tw/library/bb397908.aspx
- 45. 分組 方法名稱 描述 GroupBy 將擁有共同屬性的項目分組。每個群組都由一 個Igrouping<Tkey,Telement>物件代表 ToLookup 根據索引鍵選取器函式,將項目插入至 Lookup<Tkey,Telement> http://msdn.microsoft.com/zh-tw/library/bb546139.aspx
- 46. 產生 方法名稱 描述 DefaultIfEmpty 將空集合取代為填入預設值的單一集合 Empty 傳回空集合 Range 產生包含一串數字的集合 Repeat 產生包含一個重複值的集合
- 48. 項目 方法名稱 描述 ElementAt 傳回位於集合中所指定索引處的項目 ElementAtOrDefault 傳回位於集合中所指定索引處的項目,如果索 引超出範圍,則會傳回預設值 First 傳回集合中的第一個項目,或符合條件的第一 個項目 FirstOrDefault 傳回集合中的第一個項目,或符合條件的第一 個項目。如果沒有,則會傳回預設值。 Last 傳回集合中的最後一個項目,或符合條件的最 後一個項目 LastOrDefault 傳回集合中的最後一個項目,或符合條件的最 後一個項目。如果沒有,則會傳回預設值。 Single 傳回集合的唯一一個項目,或符合條件的唯一 項目。 SingleOrDefault 傳回集合的唯一一個項目,或符合條件的唯一 一個項目,如果沒有,則會傳回預設值。 http://msdn.microsoft.com/zh-tw/library/bb546140.aspx
- 49. 轉換(1) 方法名稱 描述 AsEnumerable 傳回型別為IEnumerable<T>的物件 AsQueryable 將IEnumerable轉換成IQueryable Cast 將集合的項目轉換為指定的型別 OfType 根據是否可以轉換為指定的型別來篩選值 http://msdn.microsoft.com/zh-tw/library/bb546162.aspx
- 50. 轉換(2) 方法名稱 描述 ToArray 將集合轉換為陣列。這個方法會強制執行查詢。 ToDicionary 根據索引鍵選取函式,將項目放入 Dictionary<Tkey, Tvalue>。這個方法會強制執 行查詢。 ToList 將集合轉換為List<T>。這個方法會強制執行 查詢 ToLookup 根據索引鍵選取器函式,將項目放入 Lookup<Tkey,Telement>。這個方法會強制執行 查詢 http://msdn.microsoft.com/zh-tw/library/bb546162.aspx
- 51. 彙總 方法名稱 描述 Aggregate 對集合中的值執行自訂彙總作業 Average 將集合中的值計算平均值 Count 計算集合中的項目個數,可以選擇性地僅計算 滿足述詞函式的項目的個數 LongCount 計算大型集合中的項目個數,可能選擇地僅計 算滿足述詞函式的項目 Max 判斷集合中的最大值 Min 判斷集合中的最小值 Sum 計算集合中所有值的總合 http://msdn.microsoft.com/zh-tw/library/bb546138.aspx
- 52. ORM • 全名: Object Relational Mapping • 用來實現物件導向設計中不同類型資料庫之間的轉換。
- 54. ORM帶來的優點 • 提供系統設計在資料存取方面的可適用性。 • 以物件導向程式語言操作資料庫。 • 提供可預測的資料庫存取效能。
- 55. ORM帶來的缺點 • 無法控制SQL語法。 • 資料存取層變得更厚重。 • 與一般資料存取(ADO.Net)效能相差:10倍。
- 56. 資料庫中放的是什麼?
- 59. 不用先設計資料表也能寫程式
- 60. 三種開發模式 • 資料庫優先 • 模型優先 • 程式碼優先
- 61. POCO • 全名:Plain-Old CRL Object
- 62. 屬性標籤 屬性標籤 說明 Server端 Client端 Compare 是否與另一個欄位的值相同 CreditCard 使用信用卡公式驗證是否為合法卡號 CustomValidation 使用自訂的Method驗證 EmailAddress 設定欄位為Email格式 MaxLength 設定欄位的最大長度 MinLength 設定欄位的最小長度 Phone 設定欄位為電話格式 Range 設定欄位的合法範圍 RegularExpression 指定欄位順序與資料型別 Remote 設定Client端驗證時呼叫Server端的服務做驗證。 Required 設定欄位為必填 StringLength 設定字串的最大和最小長度 Url 設定欄位為網址格式
- 63. 用於Scaffold的屬性標籤 屬性標籤 說明 Key 影響Edit樣版,在使用Edit樣版產生View Page時 設定的屬性會變成Hidden欄位 Scaffold 影響Scaffold樣版產生View Page時是否忽略 Model的屬性
- 64. 套用屬性標籤
- 65. • 一個Context內含一個User Case所需要的Entity。 Entity 與 Context
- 66. Context
- 67. 資料庫建構的方式 • DropCreateDatabaseAlways • DropCreateDatabaseIfModelChanges • CreateDatabaseIfNotExists
- 68. Fluent API • 可針對細部做更進一步的設定。 • 覆寫Context中的OnModelCreating方法。
- 69. Code First資料庫移轉 • 啟用資料庫移轉 • Enable-Migrations –ContextTypeName [Context完整類別名稱] • 增加一個更新版本 • Add-Migration [版本名稱] • 更新資料庫 • Update-Database • Update-Database –SourceMigration [來源版本名稱] • Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱] • Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱] –Script • Update-Database –TargetMigration: $InitialDatabase
- 70. 啟用資料庫移轉後 • 多了一個資料夾-Migrations • Configuration.cs是資料庫移轉時所參考的內容; • 建構子 設定是否要自動移轉。 • Seed方法 用於設定成功移轉後的後置處理。 • 除了Configurations.cs外,還會有此次Model版本的異動設 定檔。
- 71. 異動設定檔的程式碼
- 72. 繼承 • TPH(Table Per Hierarchy) • TPC(Table Per Concrete Class) • TPT(Table Per Type)
- 74. TPH- Model
- 76. TPH的資料表
- 77. TPC • 資料庫中僅有子類別的資料表。 • 父類別會將自己的屬性各別放置到子類別的資料表中。 • 要注意的部份是鍵值同步的問題。
- 78. TPC- Model
- 79. TPC- Fluent API
- 80. TPC的資料表
- 82. TPT- Model
- 83. TPT- Fluent API
- 84. TPT的資料表
- 85. 關聯 • 一對零/一 • 一對多 • 多對多
- 86. 一對一 • 兩個實體之間一對一關係: • 實體參照另一個實體的某個鍵值 • 需特別指定主從角色。
- 87. 一對一 Model
- 88. 一對一 Fluent API 主為: Department , 從為: Employee
- 90. 一對零 Fluent API 主為: Department , 從為: Employee
- 92. 一對多 Model方式
- 93. 一對多 FluentAPI方式
- 94. 多對多 • 這種實體關係不常見,但仍需要瞭解 • 通常在資料表中,會另起一表。 • 可使用Model的方式,或是使用FluentAPI。
- 95. 多對多 Model方式
- 96. 多對多 FluentAPI
- 97. Repository樣式 • 過去在撰寫系統時,總會遇到需要去存取資料庫或是外部資料來源,而 總是在最後發現到下列狀況: • 重覆的程式碼 • 隱含高潛在問題的錯誤在程式碼中 • 弱型別造成撰寫上的負擔 • 資料存取輔助機制有設計的困難度 • 難以為其撰寫單元測試
- 98. Repository介面
- 99. Repository父類別
- 100. Repository父類別 - 建構子
- 103. Repository父類別- Add方法
- 105. Patch
- 107. Repository子類別
- 109. View
- 111. ActionResult ActionResult格式 用途說明 ViewResult 使用ASP.Net MVC的View機制,產生Html PartialViewResult 使用ASP.Net MVC的View機制,產生Html ContentResult 純文字格式內容輸出 EmptyResult 空白的內容輸出 FileContentResult 以傳送Byte Array的方式輸出檔案 FilePathResult 以傳送檔案路徑的方式輸出檔案 FileStreamResult 以傳送Stream內容的方式輸出檔案,與 FilePathResult和FileContentResult的差異為傳遞 的參數不同,而此三個類別都是繼承自FileResult HttpStatusCodeResult 自訂回傳HttpResponse的Status JavaScriptResult 輸出JavaScript格式的內容 JsonResult 輸出JSON格式的內容 RedirectResult 傳入網址參數做網址轉換 RedirectToActionResult 傳入Controller與Action名稱做網址轉換
- 112. 資料容器 特色 ViewData TempData SessionState Cookie ApplicationState 生命週期 非常短,僅一個 Action 非常短,僅1~2個 Request 長,預設可以20 分鐘 長,預設可以直 到關閉Browser 長,直到應用程 式結束 隔離性 有 有 有 有 無,所有的使用 者都共用 儲存端 Server Server Server Client Server 跨多台Server 無,但ViewData 不需要 儲存在Session中, 所以與Session相 同 預設是InProcess 機制,無法跨多 台伺服器,但可 以修改成放置在 SQL Server 可以設定 Domain讓同一 個Domain Server 都能使用 無 序列化 不需要 同Session 若不是放在 InProcess就需要 不需要 不需要
- 113. Razor語法 • 可動態編譯 • 使用@作為語法標記 • 允許擴充既有的Html方法
- 114. Razor基本語法 • <p> 現在時刻: @Datetime.Now </p> <p> 會員名稱: @(User.Identity.Name + Model.MemberLevel) 啟用狀態: @(ViewBag.IsEnabled ? “啟用”:”停用” </p>
- 115. Razor程式區段 • @{ var name= “Good”; @:你好, 我是 @name }
- 116. 註解 • @* <p> ~ </> *@
- 117. If • @if(ViewBag.IsEnabled) { 啟用 } else { 不啟用 }
- 118. foreach • <ul> @foreach(var myItem in Request.ServerVariables) { <li>@myItem</li> } </ul>
- 119. 自訂函數 @functions { public IHtmlString GetYesterday() { var theDay = Datetime.Now.AddDays(-1); return new HtmlString(theDay.ToShortDateString()); } }
- 122. Help輔助類別- 超鏈結 語法範例 說明 @Html.ActionLink("連結文字", "ActionName") 指向這個View所屬的Controller中的ActionName @Html.ActionLink("連結文字", "ActionName", "ControllerName") 連結到名稱為ControllerName的Controller中的 Action名稱為ActionName @Html.ActionLink("連結文字", "ActionName", new {id=123, page=5}) 設定額外的RouteValue @Html.ActionLink("連結文字", "ActionName",null, new {@class="btn"}) 針對超鏈結設定CSS類別名稱
- 123. Help輔助類別- 輸出表單 @using(Html.BeginForm("ActionName", "ControllerName",FormMethod.Get,new {enctype="multipart/form-data"})) { <p>~</p> <input type="submit" value="註冊" /> }
- 124. Help輔助類別- 輸入欄位 Html輔助方法 說明 Html.Label() /Html.LabelFor() 輸出<label>標籤 Html.TextBox()/Html.TextBoxFor () 輸出<input type="text">標籤 Html.TextArea()/Html.TextAreaFor () 輸出<textarea>標籤 Html.Password()/Html.PasswordFor () 輸出<input type="password">標籤 Html.Checkbox()/Html.CheckboxFor () 輸出<input type="checkbox">標籤 Html.RadioButton()/Html.RadioButtonFor () 輸出<input type="radio">標籤 Html.DropDownList()/Html.DropDownListFor () 輸出<select>標籤 Html.ListBox()/Html.ListBoxFor () 輸出<select multiple>標籤 Html.Hidden()/Html.HiddenFor () 輸出<input type="hidden">標籤 Html.ValidationSummary 輸出表單驗證失敗時的錯誤訊息
- 126. Help輔助類別- 載入部份檢視 使用方式 使用範例 Html.Partial(String) Html.Partial("Hello") Html.Partial(String,Object) Html.Partial("Hello",Model) Html.Partial(String, ViewData Dictionary) Html.Partial("Hello", ViewData["Hi"]) Html(String, Object, ViewData Dictionary) Html.Partial("Hello",Model,ViewData["Hi"])
- 127. 從Controller載入 • @Html.Action("PartialView名稱") • @{Html.RenderAction("PartialView名稱");} • 這種通常用於全網站都會出現的固定頁,但是會因為一些特殊狀況而 有小變化。 • 例:功能清單
- 128. Ajax輔助類別 方法 用途 ActionLink 回傳有Ajax設定的<a>標籤,其中href是使用 ActionName與ControllerName RouteLink 回傳有Ajax設定的<a>標籤,其中href是使用 RouteValues產生 BeginForm 回傳MvcForm並產生有Ajax設定的<form>標籤 BeginRouteForm 回傳MvcForm並產生有Ajax設定的<form>標籤, 但form的action是使用RouteValues產生
- 129. AjaxOptions(1) 名稱 說明 UpdateTargetId 執行Ajax後,要更新的目標Html DOM Id,必填 Confirm 設定在送出資料前,要顯示的確認訊息,確認後才會送出資料,預設為null HttpMethod 設定送出Http要求的方法,預設為Post InsertionMode 對設定UpdateTargetId的Html Element處理模式,有三種: • Replace:取代原本內容 • InsertBefore:在之前增加Ajax下載的內容 • InsertAfter:在之後增加Ajax下載的內容 • 預設值Replace
- 130. AjaxOptions(2) 名稱 說明 LoadingElementDuration 顯示載入動畫的持續時間(以毫秒為單位) LoadingElementId 載入動畫Html DOM Id OnBegin 在執行Ajax之前呼叫的JavaScript函式名稱 OnComplete 在執行Ajax之後,成功或失敗都會呼叫的 JavaScript函式名稱 OnFailure 在執行Ajax之後,失敗時呼叫的JavaScript函式名 稱 OnSuccess 在執行Ajax之後,成功時呼叫的JavaScript函式名 稱 Url Ajax執行時送出要求的Url,預設會使用<a>的 href或<form>的action值
- 131. Url輔助類別 方法 用途 Action 使用ActionName與ControllerName產生Url RouteUrl 使用RouteValue產生Url HttpRouteUrl 使用RouteValue產生WebApi用的Url Content 將虛擬路徑轉成相對路徑 Encode 使用Url編碼 IsLocalUrl 判斷是否為本地路徑
- 132. 檢視範本 • 共有: • 編輯器範本 • 顯示範本
- 133. 檢視範本 • 指定編輯器範本: • Model的屬性加上標籤:DataType(針對編輯器範本)、Display (針對顯示範本) • 依屬型別選擇範本 • Html輔助方法使用 @Html.EditorFor/ @Html.DisplayFor來顯示特定型 別的編輯器範本。 • 可自訂範本,若沒有自訂的範本,系統會自動詢找內建的範本。
- 134. 內建範本 • 目前可以對應的型別: HiddenInput, MultilineText, Password, Text, Collection, PhoneNumber, Url, EmailAddress, DateTime, Date, Time, Color, Byte, Sbyte, Int32, UInt32, Int64, UInt64, Boolean, Decimal, String, Object 檢視範本 檔案路徑 顯示範本(Display Template) /Views/{ControllerName} /DisplayTemplates /Views/Shared/DisplayTemplates 編輯器範本(Editor Template) /Views/{ControllerName}/EditorTemplates /Views/Shared/EditorTemplates
- 135. jQuery • Write less, Do more • 不須擔心跨瀏覽器的問題,jQuery已經做好了 • 採用CSS3選擇器
- 136. jQuery選取器 標籤 $("a") 依Id $("#btn") 依類別 $(".btn")
- 137. jQuery選擇器- 篩選(1) 範例 說明 eq(index) $("p").eq(2) 取得匹配的第3個元素(註:index從0開始) filter(expr) $("p").filter(".highlight"); 取得類別為highlight的p元素 not $("p").not(".green, #blueone"); 剃除類別為green且id為blueone的p元素 範例 說明 parent(expr) $("p").parent("#btn") 取得上一層父元素id為btn的元素 parents(expr) $("p").parents("#btn") 取得所有的父/祖先元素id為btn的元素 children(expr) $("p").children("#btn") 取得下一層所有子元素id為btn的元素(不含text node) contents(expr) $("p").contents("#btn") 取得全部元素(含text node,若p成iframe則會取得 document元素)
- 138. jQuery選擇器- 篩選(2) 範例 說明 next(expr) $("p").next("#btn") 取得p元素其後緊鄰的兄弟元素id為btn的元素 nextAll(expr) $("p").nextAll("#btn") 取得p元素其後所有的兄弟元素id為btn的元素 prev(expr) $("p").prev("#btn") 取得p元素其前緊鄰的兄弟元素id為btn的元素 prevAll(expr) $("p").prevAll("#btn") 取得p元素其前所有的兄弟元素id為btn的元素 siblings(expr) $("p").siblings("#btn") 取得p元素其所有的兄弟元素id為btn的元素 範例 說明 find(expr) $("p").find("#btn") 取得p元素底下符合id為btn的元素
- 139. jQuery修改內容 範例 說明 html()/html(val) $("p").html(); $("p").html("<label>a</label>") 取得/設定 Html內容 text()/text(val) $("p").text(); $("p").text("<label>a</label>") 取得/設定 文字內容
- 140. jQuery插入元素 範例 說明 append(content) $("p").append("<b>hello</b>") 在每個匹配的元素內部最後面加入內容 prepend(content) $("p").prepend("<b>hello</b>") 在每個匹配的元素內部最前面加入內容 before(content) $("p").before("<b>hello</b>") 在每個匹配的元素前面加入內容 after(content) $("p").after("<b>hello</b>") 在每個匹配的元素後面加入內容 範例 說明 wrap(html) $("p").wrap("<div></div>") 新增一個div標籤,並將p標籤放置在裡面
- 141. jQuery刪除元素 範例 說明 empty() $("p").empty() 刪除所有p標籤及其子節點 remove() $("p").remove() 從DOM中刪除p標籤,但不會刪除$("p")物件
- 142. jQuery屬性與樣式 • 屬性: • attr("屬性名稱")/attr("屬性名稱", "值")/attr({ 屬性名稱: "值", 屬性名稱2:"值"}) • 移除屬性: removeAttr("屬性名稱") • 樣式: • css("樣式名稱")/css("樣式名稱", "值")/css({樣式名稱:"值",樣式名稱:"值"})
- 143. jQuery事件 • 註冊: $("selector").事件(function() { 執行邏輯}); • 觸發事件: $("selector").事件(); • jQuery支援事件: • blur(失去焦點), change(物件內容改變), click(點擊物件), dblclick(連點兩下), error(下載 檔案發生錯誤), focus(被點擊或取得焦點), keydown(按下鍵盤), keypress(放開鍵盤後), onkeyup(放開鍵盤時), onload(下載檔案完成), mousedown(滑鼠按下時), mousemove(介 於over與out之間的移動行為), mouseout(滑鼠移開某物件四周時), mousemove(滑鼠離 開某物件四周時), mouseup(放開滑鼠按鍵), resize(視窗大小改變), scroll(捲軸捲動), select(文字被選取), submit(表單送出時), unload(關閉網頁時)
- 144. jQuery動態元素事件綁定 • 綁定事件: $("selector").on("事件",function() {執行邏輯}); $("selector").on("事件", "sub-selector",function() {執行邏輯}); • 解除事件: $("selector").off("事件", "sub-selector",function() {執行邏輯});:
- 145. jQuery動畫 • 顯示: • show()show(speed[,callback]) • 隱藏: • hide()hide(speed[,callback]) • toggle()toggle(speed[,callback]) • 滑動: • slideUp()slideUp(speed[,callback])slideDown()slideDown(speed[,callback]) • 淡化: • fadeIn(speed[,callback])fadeout(speed[,callback])faceTo(speed,opacity[,callback]) • 自訂 • animate(params[,duration[,easing[,callback]]])
- 146. jQuery Ajax • 基本的jQuery Ajax型態: jQuery.ajax(url[,settings])
- 147. jQuery Ajax簡短方法 • jQuery.get(url[,data][,success(data,textStatus,jqXHR)][,dataType]) : • 使用Http Get request從伺服器載入資料 • jQuery.getJson(url[,data][,success(data,textStatus,jqXHR)][,dataType]) : • 使用Http Get request從伺服器載入Json格式資料 • jQuery.getScript(url[,data][,success(data,textStatus,jqXHR)][,dataType]) : • 使用Http Get request從伺服器載入Js檔案 • jQuery.post(url[,data][,success(data,textStatus,jqXHR)][,dataType]) : • 使用Http Post request從伺服器載入資料 • jQuery.load(url[,data][,complete(reponseText,textStatus,XMLHttpRequest)]) • 從伺服器取得Html資料,並將其放置到匹配的元素中
- 148. jQuery Promise Object • 自jQuery 1.5版之後,$.ajax()回傳的物件jqXHR實做了 CommonJs Promises/A Interface,因此,具有Promise Object的特性。 • Promise Object解決了過去ajax回傳物件僅能註冊單一事件的不方便。 • 範例: var promise = $.ajax({url: "/MyUrl"}); promise.done(func1); promise.done(func2); promise.fail(func3); promise.fail(func4);
- 149. Promise Object的優點 • 可以註冊多個Function到 done()和fail()。 • 即便Ajax呼叫已經結束,仍是可以呼叫 done()和fail()。 • 待兩個promise物件執行完畢後,執行done()或fail()。 • var promise1 = $.ajax("/myUrl1"); var promise2 = $.ajax("/MyUrl2"); $.when(promise1, promise2).done(response1, response2) { //執行邏輯}); • jQuery 1.8版後,可以使用then(func)串接。(註:某一個串接的函數發生錯誤時, 並不會執行fail())
- 150. Deferred Object • 具有三種狀態: • Pending :Operation處理中 • Resolve :Operation處理成功 • Reject :Operation處理失敗 Deferred Object會依照自己的狀態去執行相對應的註冊方法。 • 開發人員可以藉由Deferred Object開發自己的Promise Object。
- 151. Deferred Object範例 • function wait() { var deferred = $.Deferred(); setTimeout(function() {deferred.resolve();},2000); return deferred.promise(); } var promise = wait(); promise.done(function() { alert("hello");});
- 153. Knockout ViewModel • function MyViewModel(){ var self = this; self.firstName = ko.observable("Arthur"); self.lastName = ko.observable("Chang"); self.fullName = ko.computed(function() { return self.firstName() + " " + self.lastName(); }) } $(function() { ko.applyBindings(new MyViewModel()); });
- 154. Knockout的Html綁定標籤 <tbody data-bind="foreach: users"> <tr> <td><span data-bind="text: id"></span></td> <td><span data-bind="text: name"></span></td> <td><span data-bind="text: score"></span></td> <td><a href="#" data-bind="click: $root.removeUser">移除</a></td> </tr> </tbody>
- 155. 綁定標籤 文字與顯示 標籤 visible <div data-bind="visible: showMsg">~</div> 關聯DOM元素是否顯示 text <span data-bind=“text: myMsg"></span> 顯示字串,常用於span和em html <div data-bind="html: details"></div> details本身為html字串 css <div data-bind="css: {btn: height()>0}/></div> 設定元素css的class style <div data-bind=“color: current()>0? red:’black’ "> 設定css的樣式 attr <div data-bind=“attr:{href: url} "></div> 設定Html元素屬性
- 156. 綁定標籤 事件 click <button data-bind=“click: add”> 設定button的click事件 event <div data-bind=“event: {mouseover: move}”/> 註冊mouseover事件 submit <form data-bind=“submit: doSomething”> 註冊submit事件 hasfocus <input data-bind=“hasfocus: func” /> 註冊focus事件 checked <input type=“checkbox” data-bind=“checked: func”> 註冊check事件
- 158. Twitter Bootstrap • 是一種Front-End的框架。 • 結合常用Html+CSS+JavaScript提供給開發人員快速開發前端頁面。 • 跨平臺,且支援Responsible Web Design。
- 159. 按鈕樣式
- 160. 項目選單樣式
- 161. 項目選單樣式(二)
- 162. Controller