2009年2月10日

前端用 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
最後附上本次的 範例

3 則留言:

Unknown 提到...

"" + Eval("XX") + Eval("OO") 的作法,應該在 memory 裡面會因為「""」多使用到一小塊記憶體(根據尼克學長的說法,java 那邊很愛這樣搞 XD),不能寫「Eval("XX").ToString()」嗎?看起來 Eval 出來的東西型態是 Object?

坎尼 提到...

是object沒錯,不過還真的可以用 .ToString() XDDDD

看來是不用加 ""+
雖然寫起來很簡潔,不過未來維護的人可能會霧殺殺

Unknown 提到...

我倒是不覺得多了一個東西在那邊會簡潔 XD 加上 ToString() 應該可以讓 MA 的人更放心,不需要疑神疑鬼的 ~

Google Spreadsheet 裡用規則運算式

最近因為工作關係,遇到要用 Google Form 及 Google Sheet 所以研究了 Google Sheet 裡的一些 function 怎麼用 首先,分享一下如何在 Google Sheet 裡用規則運算 :D