在錯誤中學習ASP.NET MVC 第 30 篇 - 認識View - DisplayTemplates與EditorTemplates補充

 今天是最後一天囉！把之前說好要講的東西補一下XD，在講完Model之後，應該對於整個MVC架構比較有概念了，接下來我們就可以好好利用所謂的Template，也就是View的其中一種，關於View的類型介紹可以參考Day15Day15，廢話不多說，直接看Code！

在專案的Shared資料夾下加入DisplayTemplates與EditorTemplates資料夾，切記不要打錯字



DisplayTemplates

顧名思義就是要與@Html.Display或@Html.DisplayFor來使用，一般就是拿來做資料呈現。

如果今天想要將註冊日期(資料庫存DateTime資料類型)改用民國年的方式顯示，要怎麼透過DisplayTemplates來實做呢？在還沒講Templates之前，是不是都在透過後端程式做日期的轉換，然後再透過View作呈現，雖然可以透過共用方法來處理這件事，但如果今天客戶過了幾年後反悔，想改回西元年來顯示怎麼辦？啊不就是改共用的處理時間的方法就好了啊！是有多難啊XD

那如果今天客戶除了想要改回西元年並且要以紅色的字加粗體顯示，那要怎麼辦？喔不... 真的要挫賽了，可能就要打開有顯示日期的View一支一支慢慢改...，若運氣好一點就是當初套板時設計師就已經有建立一個給日期顯示的css了，所以只要去修改css內容就好，不過哪裡找心思這麼細膩的設計師XD。對面這種用的次數很多但程式碼不複雜卻很零散的顯示資料的功能，就很適合使用DisplayTemplates


  1. 建立DisplayTemplates下的檢視，取名為TaiwanDate.cshtml，並將@model宣告成DateTime，然後透過TaiwanCalendar做日期的轉換，第7~9行將值顯示


  2. 在User/Details.cshtml內加入程式碼，第17行是使用預設的內建樣板來呈現日期資料，第25行則選擇自己定義的樣板名稱，就完成設定囉！是不是非常方便呢，不管以後客戶對日期有什麼疑難雜症，統一改這個Template就可以了


  3. 另外也可搭配套用UIHint屬性來使用，在Models/UserPartial.cs下將Create_Date套用TaiwanDate樣板


  4. 再次瀏覽User/Details會發現，步驟2的第17行明明沒有指定Temaplte卻也顯示TaiwanDate樣版的內容了，這就是UIHint的功能


EditorTemplates

顧名思義就是要與@Html.Editor或@Html.EditorFor來使用，也就是說這個樣板通常會有一些可編輯的欄位。

刁難的客戶又來了，覺得你的DateTime的選擇器介面很醜！請你換掉，此時工程師已經接近崩潰邊緣，可以選就好了咩！如果可以說服客戶繼續用還好，偏偏我就遇過選擇器掛掉XD，這時候難道要每一隻檢視都打開來改嗎...？除了改js還要改相對應的html耶！這時候EditorTemplates就是你的救星，快來看看如何使用


1.建立EditorTemplates下的檢視，取名為DateTimePicker.cshtml，然後因為要產生一個輸入框所以搭配@Html.TextBoxFor，再加上相對應的JS程式碼


  1. 在User/Create.cshtml內加入@Html.EditorFor並指定以DateTimePicker.cshtml為樣板


  2. 瀏覽User/Create時檢視原始碼，就會看到DateTimePicker.cshtml的內容被載入了


如果客戶有什麼疑難雜症就是指改這支就好了！

我的第一個專案有很多頁面要針對搜尋結果做分頁顯示的需求，於是我幹了一件非常蠢的事... 我把同事寫好的方法寫成共用的Template，這樣很好啊！哪裡蠢，蠢就蠢在我不知道有PagedList.Mvc可以用，不過也因此讓我有了實作PagedList.Mvc部分功能的經驗(只能這樣安慰自己XD)

下載今日專案:https://github.com/juben-wang/MvcApplication30

MVC相關資源分享

我有買的書籍
ASP.NET MVC 5：網站開發美學
ASP.NET MVC 4 網站開發美學

相關課程
多奇數位創意有限公司 - ASP.NET MVC 5 開發實戰：從入門到進階 (六天)
台中市電腦商業同業公會 - ASP.NET MVC 5 現代化雲端網頁應用程式班
SkillTree - ASP.NET MVC5 實戰訓練營

三不五時會去的部落格
http://kevintsengtw.blogspot.tw/ (這幾乎每兩三天就會去XD，Kevin大大寫的文章真的超棒的)
http://blog.miniasp.com/
http://blog.sanc.idv.tw/
http://blog.kkbruce.net/
http://demo.tc/
http://www.dotblogs.com.tw/mis2000lab/

有追蹤的Facebook粉絲團
https://www.facebook.com/will.fans
https://www.facebook.com/Study4.tw
https://www.facebook.com/twmvc

參賽感想

會參加鐵人賽是因為以前同事們的熱情邀約，本來蠻猶豫的，畢竟肚子裡面沒什麼墨水，而且平常就很討厭寫文件了，更何況是每天寫一篇文章XD，加上文筆又超爛的，但同事們都建議我寫MVC，所以就決定以MVC為主題了，我學習MVC並開始開發專案大約是從2013/5~2014/2，大概就是8個月的時間開發了兩個專案，期間沒有任何一筆參考書，可以參考的就是同事的Code跟Google到的資料，還有主管提供的英文PDF(將近500頁，我只看到150頁就放棄了)，所以對我而言就是在「亂寫」中間有位新進同事是MVC高手，在他身上也是很片段的學習到一些觀念，但是跟他相處的時間真的太短，而且他參與MVC專案的時間也比較少，所以還蠻可惜的，不過同事有著熱愛分享的個性，常常介紹好用的東西，例如Linq，而且他也常常分享一些部落格文章，例如Kevin的部落格，有一次閒聊他問我聽過保哥嗎？我一臉疑惑的說：「他誰啊？」哈哈！現在想起來都覺得自己很蠢XD

揮別了上一份工作之後，算是暫別了我的Coding人生，但過了幾個月後，我又開始Coding的工作了XD，這份新的工作使我對ASP.NET MVC有了新的認識，其實對我最具影響的就是現在帶我的前輩，什麼我不會的東西他都從頭教我，而且是教得超仔細那種，也常常分享一些比較安全的做法或是導正我的壞觀念，讓我第一次感受到原來這就是被帶的感覺，就像母雞照顧小雞一樣，像我資料庫很弱，他就教我要怎麼用SSMS，資料表應該要注意什麼事情，常常一講就講很久喔，累績到現在搞不好有10次！都超級受用，除了前輩很願意傾囊相授之外，他對MVC也很有興趣，常常分享一些上課的訊息給我，所以我才開始知道原來MVC不像我一開始想的那麼封閉，其實很多人在寫，也有很多資源可以運用，因此知道了一些在MVC領域很活躍的MVP的名字，在報名保哥的課之後整個突飛猛進(自我感覺良好XD)，才驚醒原來我以前寫的不是MVC(不然是啥XD?)

初次參賽就以記錄我的MVC學習過程為主題，分享一些有趣的經驗，在基礎觀念上還是沒辦法解釋得很好，畢竟能力還很弱，而且還有很多其他基礎觀念沒有講到，只挑了一些自己有深刻印象並且以蜻蜓點水的方式帶過XD，不過願意嘗試寫文章就是個好的開始，就當作是個練習、是個紀念吧XD，寫得不好的地方還請大家多多指導，不得不佩服那些寫部落格的MVP，真的好厲害，我這30天都有一種在自言自語的錯覺(應該不是錯覺，真的是在自言自語XD)，謝謝30天以來訂閱我的朋友，讓我的參賽旅程不孤單，謝謝同事的邀約，我也完賽了！！！耶！！！


留言

張貼留言

這個網誌中的熱門文章

CPE 一顆星選集題目說明與解答 - Java 筆記與心得分享

以下是自己的 CPE 一顆星選集 解題紀錄 (共有 49 題) 每次考試都會從一顆星選集中抽 1 提出來考 算是比較能把握的部分，重點筆記整理如下 內容包含題目說明、程式碼、註解說明、解答、考古題統計(下方土黃色日期) 解題使用的程式語言是  JAVA  目前有提供 10 題的試閱 另有提供完整 49 題的完整解答 ( pdf 檔 )， 共 305 頁， 售價 $399 元 ， 若有需要請來信購買 greens2314@gmail.com 推薦閱讀： 建議熟讀 java 基本觀念，與使用 eclipse 練習， 等熟悉之後再到瘋狂程設考試(一定要懂如何查 JAVA API 與使用英漢字典) Java 考試常用的方法或類別 Eclipse 常用小技巧 CPE 一顆星選集： 編號 | 題目名稱 | 歷屆考古題日期 1. Vito's family (CPE10406, UVA10041) 2024/04/23 可與第 40 題一起看 2. Hashmat the brave warrior (CPE10407, UVA10055) 3. Primary Arithmetic (CPE10404, UVA10035) 　 2011/05/25、2023/03/21 4. The 3n + 1 problem (CPE10400, UVA100) 　 2010/06/09 5. You can say 11 (CPE10460, UVA10929) 　 2011/12/20 6. Bangla Numbers (CPE10414, UVA10101) 　 2018/12/18 7. List of Conquests (CPE21924, UVA10420) 　 2019/03/26 　　可與 第 8, 11, 43 題一起看 字元與字串 8. What's Cryptanalysis? (CPE10402, UVA10008) 　　可與 第 7, 11, 43 題一起看 9. Decode the Mad man (CPE10425, UVA10222) 　 2021/10/19 10. Problem J: Summing Digits (CPE10473, UVA11332) 　
Read more »

Visual Studio 自動排版格式化程式碼

圖片
在團隊開發過程中，什麼時候是程式碼瘋狂修改的階段呢， 無非就是Code Review了，有時候卡個幾天或是幾個月都是有可能的， 裡面常出現的comment，每次幾乎都會出現的就是排版的問題， 例如空白多一個少一個，括號還沒換行等等的小瑕疵， 對於心思不夠細膩的人而言，真的十分的惱人 團隊中喜歡將大括號換行， 例如： if(true) {   //code } else {   //code } 那也許有些團隊喜歡： if(true){   //code }else{   //code } 有時候不只括號要不要換行，連else要不要換行都有各自的喜好， 所以有時候要統一使用團隊規定的喜好真的會有眼殘的時候， 自己檢查老半天可能還是有漏網之魚， 但現在不用擔心啦！ 只要使用Format 格式化文件就能為你分憂解勞， 設定方式如下： 編輯 > 進階 > 格式化文件 Visual Studio會根據你的環境設定幫你自動重新排版 設定方式如下： 工具 > 選項 切換到 文字編輯器 > C# >程式碼樣式 > 格式化 > 新行 這邊可以設定很多換行的邏輯， 將對應的項目打勾跟取消勾選，下面的黑色區域會顯示排版的格式， 可根據自己或是團隊的喜好去做調整，即可自動排出你想要的格式囉！ 如果覺得 編輯 > 進階 > 格式化文件 這個選項太難找到， 可以參考這篇文章，將他加入在明顯的工具列區域喔 http://greens2314.blogspot.tw/2017/09/visual-studio-2015.html
Read more »

1. Vito's family (CPE10406, UVA10041) - CPE一顆星解答與說明

圖片
    👉   CPE 一顆星選集列表(49題) 題目說明與解答 題目 Vito 在紐約有非常多的親戚，他希望在紐約找到一間房子，這間房子到每個親戚家的距離總和，要是最少的距離 輸入說明 輸入資料包含很多筆測試資料 每筆測資，包含親戚數量與每位親戚家的街號 親戚數量介於1~499、街道範圍介於1~29999 多位親戚可住在同一條街 輸出說明 針對每筆測試資料，計算出 Vito 到每位親戚家的最短距離總和 街與街的距離 = 街道數字相減取絕對值 解題技巧 中位數 是指一組數字的中間數字；即是有一半數字的值大於中位數，而另一半數字的值小於中位數，其意義是在所有資料中居於中間位置的代表 排序 街道的數字同時代表距離，透過排序，可得知中位數 解題過程 取得輸入 取得資料筆數 根據資料筆數取得親戚數量 根據親戚數量取得街道編號 將街道編號存入陣列中 將親戚的街道位置 由小至大 排序 呼叫 Arrays 類別提供的 sort() 方法 https://docs.oracle.com/javase/7/docs/api/java/util/Arrays.html 假設親戚有 5 位，分別住在：2、5、8、4、2街 排序後為：2 、2、4、5、8街 計算中位數 中位數在陣列中的索引 = 親戚數量 / 2 假設親戚有 5 位( 奇數) ，分別住在：2、5、8、4、2街 排序後為：2 、2、4、5、8街，其中 4 為中位數，中位數有 1 個 5位親戚 / 2 = 2.5，取整數，陣列索引 2 的位置，儲存的是第 4 街 假設親戚有 4位 (偶數) ，分別住在：2、5、8、4街 排序後為：2 、4、5、8街，其中 4 或 5 為中位數， 中位數有 2 個，擇一即可 4位親戚 / 2 = 2，陣列索引 2 的位置，儲存的是 5 街 計算最小距離總和並印出 宣告 sum 變數，統計距離 使用 foreach 將各街道編號 減掉 中位數編號，取絕對值並進行家總 取絕對值要呼叫  Math.abs ()  方法 奇數情況 ： 中位數有 1 個 假設親戚有 5 位   ，分別住在： 2 、2、 4 、5、8 街 中位數 4 ，Vito 住在 4 街，到其他親戚家的距離總和即是最小值 9   偶數情況 ： 中位數有 2 個，擇一即可 假設親戚有 4 位 (偶數) ，分別住在： 2 、
Read more »