twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
0 likes654 views
本文介绍了 ASP.NET MVC 视图开发的技巧，特别是如何减少 JavaScript 代码的使用，并通过引入不同的编码方法来提高开发效率。作者分享了对于在他人网站投放广告的有效方法及代码组织策略，并强调了关注点分离的重要性。最后，文中还讨论了如何利用 action filters 来处理视图结果，优化前端性能。
![http://mvc.tw
public class AdController
{
[ScriptalizedOutput]
public ActionResult Banner()
{
var data = GlobalBannerFromSomewhere();
return View(data);
}
}
容我先跳到結論– 最好的轉換時機點
28](https://image.slidesharecdn.com/twmvc20asp-170709004951/85/twMVC-20-ASP-NET-MVC-View-28-320.jpg)
![http://mvc.tw
? [Blog] http://goo.gl/PqTMQ
跨網站利用 document.write 顯示
ASP.NET MVC ViewResult 內容, 使用
ActionFilter
? [Gist] https://goo.gl/hRb3d3
? 沒有上 NuGet 請自己抄程式碼 …
Reference
46](https://image.slidesharecdn.com/twmvc20asp-170709004951/85/twMVC-20-ASP-NET-MVC-View-46-320.jpg)
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
- 1. ASP.NET MVC View 開發技巧小錦囊 twMVC #20 Dino Wang twMVC Co-funder Microsoft Azure MVP
- 2. http://mvc.tw Dino Wang, 王育民 2 ASP.NET MVC 5 開發美學 ? 共同作者 Blog: Dino's Sandbox ? 大旱休耕中 Microsoft Azure MVP TechDays Taiwan 講師 twMVC 共同創辦人/講師 Skilltree 專任講師 Yahoo!奇摩 x 華人健康網 ? 逾 2 億瀏覽量 / 年 ? 逾 600 萬不重複瀏覽 / 月 ? 均 55 萬 Page Views / 日 ? 台灣前 (兩) 百大網站 ? ASP.NET MVC on Azure ? Microsoft 客戶案例分享 ? Cloud Days 2012 分享
- 3. http://mvc.tw ? 過去 三年一人團隊 的開發經驗 ? 今天提供兩個小方法，有效的減少需要 coding 的量，尤其是前端的 script ? 其他錦囊再找機會提供 ? View 開發不過就是那樣？ ? 解決痛點，試著為 View/Script 解藕 ? 最近兩年我的 .cshtml 中沒有出現任何一個含有 javascript code 的 script element，重點在零星的 javascript code 不見了。 蝦毀小錦囊 (?) 3
- 5. http://mvc.tw ? 想要在別人家的網站投遞廣告，該怎麼做比較好 ? ? 或換一種說法：我能不能讓我的 View 顯示在別人的網站？ 問題情境 5
- 6. http://mvc.tw ? 想要在別人家的網站投遞廣告，該怎麼做比較好 ? 讓別人家的工程師幫你放 HTML （前提 HTML 當然是你已經寫好的） （鼓勵不要提供讓對方走 Web API 的路） Approach- 讓別人家的工程師幫你放 HTML 6
- 8. http://mvc.tw Approach- 讓別人家的工程師幫你放 HTML 8 ? 老人家說「每寫三行 code 就會錯一行」 交給無責第三方貼一行以上的 code 就會出錯，真心不騙 ? 時效問題，你趕我不趕 ? 對方很好配合，就真的這麼做了結果．．．
- 10. http://mvc.tw ? 想要在別人家的網站投遞廣告，該怎麼做比較好 ? 讓別人家的工程師幫你放 HTML ? ? Approach 10
- 11. http://mvc.tw ? 想要在別人家的網站投遞廣告，該怎麼做比較好 ? 讓別人家的工程師幫你放 HTML ? 哎呀，挖洞放個 iframe Approach 11
- 14. http://mvc.tw Approach- 哎呀，挖洞放個 iframe 14 <iframe src=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/"…" width="300" height="50"></iframe> ? 固定大小，無法容(ㄊㄡ)納(ㄉㄨˋ)第二支廣告 (無誤) ? 那在沒有廣告檔期的時候呢？在心裡空下一個位置嗎？ ? 不該使用 iframe 作為投放內容的直接手段
- 15. http://mvc.tw ? 想要在別人家網站投遞廣告，會有哪些作法 ? 讓別人家的工程師幫你放 HTML ? 哎呀，挖洞放個 iframe ? ? Approach 15
- 16. http://mvc.tw ? 想要在別人家網站投遞廣告，會有哪些作法 ? 讓別人家的工程師幫你放 HTML ? 哎呀，挖洞放個 iframe ? 放一支 .js 產 HTML Approach 16
- 17. http://mvc.tw ? js 維護 DOM (速度一定比直接寫入 HTML 慢) ? js 組 HTML 字串還沒寫完天都黑了，除錯有夠難，該怎辦 ? document.write("<iframe src=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/& ? document.write("<div>…</div>"); ? 信不信真的有外包在做這個 ? 解決生產力的問題後，就是個可行方案 Approach- 放一支 .js 產 HTML 17
- 18. http://mvc.tw ? Worldwide Advertising Providers ? Google ? Yahoo! ? 其他領域的應用 ? Gist ? Reddit Idea- 從觀摩開始，向業師學習 18 一度認為在核心運用 document.write 恥度無下限，但發現 Gist 也這 樣用也就算了其實是潮流 XD
- 20. http://mvc.tw 1. 用一般的方法寫好要呈現的 HTML, 讓事情簡單 ? 寫好 ASP.NET MVC 裡頭的 View 2. 巧力將 HTML 轉為 javascript ? document.write("<div>…</div>"); 這個階段別肖想一步到位，關注點分離 20
- 21. http://mvc.tw @model BannerData <style>…</style> <div class="vendor-banner"> <a href="@Model.Url" target="_blank"> <img src=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/"@Model.ImageUrl" alt=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/"…" /> </a> </div> 寫好要投放的 HTML - View 21
- 22. http://mvc.tw public class AdController { public ActionResult Banner() { var data = BannerDataFromSomewhere(); return View(data); } } 寫好要投放的 HTML - Controller 22
- 24. http://mvc.tw public class AdController { public ActionResult Banner() { var data = GlobalBannerFromSomewhere(); return View(data); } } 容我先跳到結論– 最好的轉換時機點? 24
- 25. http://mvc.tw public class AdController { public ActionResult Banner() { var data = GlobalBannerFromSomewhere(); return ScriptalizedView(data); } } 容我先跳到結論– 最好的轉換時機點 25
- 26. 太天真 這樣超累的 26
- 27. 27
- 28. http://mvc.tw public class AdController { [ScriptalizedOutput] public ActionResult Banner() { var data = GlobalBannerFromSomewhere(); return View(data); } } 容我先跳到結論– 最好的轉換時機點 28
- 29. http://mvc.tw ? 可以運用的 ASP.NET MVC 的切入點 (1/2) ? ActionResult ? 繼承 ViewResult/PartialViewResult 於 Render View 結束 後進行調整處理 ? 為了好用要實作全部的多載給 Base Controller ? return View(…); ? return ScriptialiedView(…); ? return PartialView(…); ? return ScriptialiedPartialView(…); 將寫好的 View 轉成 JavaScript 29
- 30. http://mvc.tw ? 可以運用的 ASP.NET MVC 的切入點 (2/2) ? ActionFilter ? HTTP Header 部分 只處理 Content-Type: text/html （條件） 轉換成 Content-Type: text/javascript （結果） ? 運用 ActionFilter 可以對 Result 加工的特性 與去除 HTML 標籤之間的空白字元的招式同源 twMVC #03 Bibby ( http://mvc.tw/event/2012/7/14 ) PS: 我個人不推移除 HTML 標籤間空白 將寫好的 View 轉成 JavaScript 30
- 31. http://mvc.tw DOTCH! ( 請看對重點 ) 31
- 32. http://mvc.tw ? ScriptalizedOutoutAttribute ? 實作 ASP.NET MVC ActionFilter Implementation 32
- 33. http://mvc.tw <script src=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/"http:/yoursite/Ad/Banner"></script> IT 大哥，可以在你網站幫我放這一行 HTML 嗎？ 部落客大哥，可以在你網站幫我放這一行 HTML 嗎？ 如何交給委託方 33
- 34. Demo 34
- 35. http://mvc.tw ? 視需求可以跟 OutputCache 一起使用，讓套用 ScriptalizedOutput 的 Action 也能被快取 ? 使用了 document.write 就不要再幻想著可以被 SEO 了 其他小事 35
- 37. 沒有人說 只能這樣 37
- 38. http://mvc.tw ? 為網頁上的 登入狀態 提供了一種新的做法 ? 常用的方法 AJAX ? 另一個選擇 ScriptalizedOutput Isolated Non-Cache Block 38
- 39. http://mvc.tw <html> <head>…</head> <body> ... <div id="member-status"> <!-- 挖空等待填入資料 --> </div> ... </body> </html> 整頁快取中的獨立區塊 – 登入狀態為例 39
- 40. http://mvc.tw <html> <head>…</head> <body> ... <div id="member-status"> <a href="/Member/LogOn">登入</a> </div> ... </body> </html> Isolated Non-Cache Block 40
- 41. http://mvc.tw <html> <head>…</head> <body> ... <div id="member-status"> Hi! Dino, <a href="/Member/LogOut">登出</a> </div> ... </body> </html> Isolated Non-Cache Block 41
- 43. http://mvc.tw <html> <head>…</head> <body> ... <script src=/slideshow/twmvc20-aspnet-mvc-view-77654982/77654982/"/Member/Status"></script> <div>Hi! Dino. <a href="/Member/Logout">登出</a></div> ... </body> </html> Isolated Non-Cache Block 43
- 44. http://mvc.tw ? 優點 不用再寫 JavaScript 程式碼 (JavaScript 我不是不愛你) ? 缺點 等到 script 結束 browser 才繼續渲染頁面 小心變成一顆屎 Isolated Non-Cache Block 44
- 46. http://mvc.tw ? [Blog] http://goo.gl/PqTMQ 跨網站利用 document.write 顯示 ASP.NET MVC ViewResult 內容, 使用 ActionFilter ? [Gist] https://goo.gl/hRb3d3 ? 沒有上 NuGet 請自己抄程式碼 … Reference 46
- 47. 47 MvcTrig ASP.NET MVC Client Trigging Framework
- 48. http://mvc.tw ? 當伺服器端回送網頁給 browser 的時候，你想要跑一些 JavaScript ? 將 JavaScript code 寫在 View？ (常見) ? 你不是說要關注點分離？ 定義要被解決的 View 開發問題 1/3 48
- 49. http://mvc.tw ? 當 AJAX 完成一個 request，你返回一些資料給呼叫端 $.get(url, data, function (result, status, xhr) { // write code to handle result }); ? 能不能只有 $.get(url, data); 定義要被解決的 View 開發問題 2/3 49
- 50. http://mvc.tw ? 你曾使用過 ASP.NET MVC 的 AjaxHelper 嗎？ I hate OnComplete="" 能不能保有原機制，但不使用 OnComplete 依然有相同甚至更好 的效果。 定義要被解決的 View 開發問題 3/3 50
- 51. http://mvc.tw ? 使用同一套做法 ? 而不是在 Page 寫 <script></script> ? 可以不需要在 $.get 寫 handler ? 使用 AjaxHelper 的時候，不需要設定 OnComplete 了 ? 用 意圖 取代 寫死的程式碼 ? 讓後端送 意圖 和 資料 給前端的 event listener 同時解決 Page/AJAX request 的問題 51
- 54. Demo 54
- 55. http://mvc.tw ? 開發 Plugin 為 MvcTrig 擴充新的意圖 Extensible 55
- 56. 56 Announcing MvcTrig (OSS) ASP.NET MVC Client Trigging Framework
- 58. http://mvc.tw Pros ? 同時支援 Page/AJAX 請求 ? 不用理會是呼叫 Page 還是 AJAX，前端用完全相同的結構寫 JavaScript，Controller 只傳 送意圖與參數 ? 支援站內 HTTP Redirect ? 支援自訂擴充外掛 ? Fluent API MvcTrig Pros and Cons 58 Cons ? 沒有對可快取的請求最佳化 請小心使用 ? 可以套用 Scriptalized View 來解決快取問題，但 相對複雜化
- 60. 60
- 61. http://mvc.tw 感謝KKTIX贊助活動報名平台 感謝 KKTIX 贊助 twMVC 活動報名平台 61
- 67. 謝謝各位 ? 本投影片所包含的商標與文字皆屬原著作者所有。 ? 本投影片使用的圖片皆從網路搜尋。 ? 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款，請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. h t t p : / / m v c . t w