前端用 Eval 綁定數據的小技巧

今天來講個前端綁定數據的小技巧吧 (話說 台灣話應該要叫資料繫結?)

---

一般來講，要在前端綁定資料就要用 <%# Eval("Data") %> 的語法
坎尼前幾天在設計 Gridview 的 Template 裡的控制項時
突然想到很久很久以前，路上有許許多多的老公公和老婆婆....
坎尼曾經把控制項裡的資訊綁定為兩個 (比如：職稱+姓名)

於是坎尼在Gridview裡新增了個 TemplateField
裡面放了個 LinkButton ，文字的部分則是把 FirstName 和 LastName相加
畫面如下圖 (範例資料是用北風)

坎尼很開心的按下 F5，Build通過，跳出了IE
竟然出現了樓下這個訊息..... (若是用vs 2005，在編譯時期即會出現錯誤)

坎尼想了很久，難不成以前綁定兩個數據只是做夢....
Google了好幾下，也看到有人說可以和字串相加...
「等一下，字串相加?!!」
坎尼靈光一閃的做了下圖的改變

將將將，果然沒錯，加上字串.NET就把兩個物件當成是文字了 (自己加上 .ToString())
詳細說明可以參照保哥寫的這篇 讓人精神錯亂的+運算子
下圖為執行情形和資料庫的對照

前端一次綁定多個數據真的是不錯的設計 (但只限文字)
很多動作就不需要再到 DataBound事件去寫

再來個小應用
在剛剛的範例中，在LinkButton加上 OnClientClick 事件
加入下圖的 source code

實際運作情形....可憐的 Andrew 被老板裁掉了....


由於已經轉為文字 所以可以盡情的加上 Javascript 的敘述

其他的應用還有...
導到其他網址 NavigetUrl='<%# "Page2.aspx?id="+Eval("id") %>' (HyperLink的屬性)
設定由後端儲存的樣式 Style='<%# "color: "+Eval("myColor") %>'

更多的應用端憑大家去想像了 :p
最後附上本次的 範例