iT邦幫忙

DAY 30
2

在錯誤中學習ASP.NET MVC系列 第 30

認識View - DisplayTemplates與EditorTemplates補充

今天是最後一天囉!把之前說好要講的東西補一下XD,在講完Model之後,應該對於整個MVC架構比較有概念了,接下來我們就可以好好利用所謂的Template,也就是View的其中一種,關於View的類型介紹可以參考Day15,廢話不多說,直接看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天以來訂閱我的朋友,讓我的參賽旅程不孤單,謝謝同事的邀約,我也完賽了!!!耶!!!


上一篇
認識Model - ModelState
系列文
在錯誤中學習ASP.NET MVC30

1 則留言

0
Duran Hsieh
iT邦新手 3 級 ‧ 2014-10-30 23:07:48

恭喜!!
鐵人達成!

我要留言

立即登入留言