一直以來,Silverlight多被定位成取代傳統網頁的進階式操作介面。說實在話,在Client端用C#、LINQ寫Code,一直是我夢寐以求的開發環境(但我心中真正的夢幻解決方案是希望HTML6規格直接可以支援C# XD),但取代傳統網頁這個前題卻讓我有些為難。

現實是殘酷的,當開發團隊的技能仍以jQuery、ASP.NET為主軸,且各式Plugin、控件也十分齊備成熟,要貿然發動一場革命捨去既有網站開發基礎不用,要求全面改用Silverlight重新摸索,最後的下場只怕會被拉到牆角餵磚頭吧!

那那那... 想在Web Client端寫C#的夢想又幻滅了嗎?

靈光一現: "摻在一起做成瀨尿牛丸不就得了? 笨蛋!"

前陣子研究過Silverlight Interop(1 2 3 4 5 6 7),原則上,Silverlight與HTML DOM、Javascript 間的溝通管道還算齊備。這麼說來,把複雜邏輯放在Silverlight裡用C#、LINQ輕鬆解決,呈現介面再交還給jQuery打理的理想並不難實現。

最近搞了一個輸入台灣地址的自動完成輔助器,利用中華郵攻的3+2郵遞區號資料XML檔 當資料源,轉成List<Object>配合LINQ就可簡易又快速地進行各式查詢,產生地址提示。原本先寫了純Silverlight版,後來再改裝一下,就變形成Silverlight混搭jQuery自動完成的合成獸囉!

操作介面主要構成分為三段,國別、郵遞區號及地址區,當國別為TW時,郵遞區號及地址會啟動自動完成功能。輸入郵遞區號會帶出縣市區域,地址自動完成的部分則有幾種應用方式:

1.輸入前兩個字時,先帶出縣市

2.當縣市確定後,開始提示區域

3.區域也確定時,提示路街名稱

4.若只知縣市跟路名,可以用逗號分隔成"縣市名,路名字首"進行搜尋

5.最後,如果只知道模糊地址,那麼還有星星大法,在不確定的地方補入*,就可使用沒效率的全文檢索

我放了一個Live Demo: http://www.darkthread.net/twaddrhelper/pocdemo.html 給大家試玩,歡迎留言指教。


Comments

# by Eric

嗯~~嗯~~很好~~乖~(摸頭~~)....... (被打的趴在地上) 請問一下Jeffery,是不是已經把地址資料放在silverlight裡了,再由jquery跟silverliht互動抓出資料? 這樣的跟jQuery直接呼叫web service相比優點是?

# by 路過的

使用 注音輸入法 + FireFox 3.6.3 不知怎麼搞的...那個自動完成功能的小視窗很不聽話... 不太會自動彈出...是FF的關係? 還是老注音輸入法的關係?

# by 路過的

留言的日期與時間挺怪的... 現在是 2010 年 6 月 1 日 09 時 32 分

# by Jeffrey

to Eric, 地址XML被封在Silverlight XAP中,jQuery直接Call Silverlight而非Web Service的優勢在於"效率",Javascript Call的成本會比HttpRequest低很多,反應速度也快。 to 路過的,我也有發現那個jQuery自動完成Plugin在跟中文輸入法併用時確實會有"不太聽話"的狀況,未來如有更完善的版本,我考慮再改善。留言日期的問題出在Hosting主機是放在美國,我一直偷懶沒搞定時區設計的問題。

# by Eric

再請問一下Jeffrey,因為地址是固定不會變的資料,如果資料的類型是比較大量且變動頻率低的資料,像是料品主檔... 一樣會適合嗎? 還是黑大有什麼想法呢?

# by Jeffrey

to Eric, 你的想法完全正確,"資料固定且筆數不多,又需要高反應速度"的才適合這種做法! 如果是料品主檔,資料量多半很驚人,我會選擇用AJAX發HttpRequest向Server查詢。

# by Alan

Jeffrey大大!有考慮出書嗎 小弟一定捧場^_^

# by Jeffrey

to Alan, 感謝支持,害我差點溼了眼眶... 考量目前的工作家庭體力腦力,短期內暫無出版書籍的計劃。但是請放心,如果未來有機會出書,一定不會放過大家... 不不不,是一定不會忘記跟大家分享喜訊的! ^__^

# by 毛豆

出書+1 黑暗大出的書是一定要買的啦

# by jain

黑暗大,我們目前有在討論一個問題: 使用「jQuery」用「FireFox」是可以正常使用,但如果用「ie」不知道那個版本才能完全支援,不會出錯? 還是各自瀏灠器寫一套?

# by Jeffrey

to jain, 理論上jQuery是跨瀏覽器的(甚至包含IE6),如果有遇到不相容的情況,若文件上沒有註明,就算是Bug,提報出去開發社群多半會設法克服。

# by jain

謝謝您,這樣我們就比較放心了!

# by k

小弟也做了一個,僅供參考… http://code.google.com/p/cejs/

Post a comment


32 + 27 =