把Silverlight跟jQuery摻在一起做成瀨尿牛丸吧! 地址輸入輔助器

一直以來,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 給大家試玩,歡迎留言指教。

歡迎推文分享:
Published 01 June 2010 10:05 AM 由 Jeffrey
Filed under: ,
Views: 15,350



意見

# Eric said on 31 May, 2010 06:55 PM

嗯~~嗯~~很好~~乖~(摸頭~~)....... (被打的趴在地上)

請問一下Jeffery,是不是已經把地址資料放在silverlight裡了,再由jquery跟silverliht互動抓出資料? 這樣的跟jQuery直接呼叫web service相比優點是?

# 路過的 said on 31 May, 2010 07:30 PM

使用 注音輸入法 + FireFox 3.6.3

不知怎麼搞的...那個自動完成功能的小視窗很不聽話...

不太會自動彈出...是FF的關係? 還是老注音輸入法的關係?

# 路過的 said on 31 May, 2010 07:32 PM

留言的日期與時間挺怪的...

現在是 2010 年 6 月 1 日 09 時 32 分

# Jeffrey said on 31 May, 2010 10:11 PM

to Eric, 地址XML被封在Silverlight XAP中,jQuery直接Call Silverlight而非Web Service的優勢在於"效率",Javascript Call的成本會比HttpRequest低很多,反應速度也快。

to 路過的,我也有發現那個jQuery自動完成Plugin在跟中文輸入法併用時確實會有"不太聽話"的狀況,未來如有更完善的版本,我考慮再改善。留言日期的問題出在Hosting主機是放在美國,我一直偷懶沒搞定時區設計的問題。

# Eric said on 01 June, 2010 12:41 AM

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

# Jeffrey said on 01 June, 2010 01:56 AM

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

# Alan said on 01 June, 2010 09:47 AM

Jeffrey大大!有考慮出書嗎

小弟一定捧場^_^

# Jeffrey said on 01 June, 2010 10:55 PM

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

# 毛豆 said on 03 June, 2010 03:24 AM

出書+1

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

# jain said on 03 June, 2010 06:45 PM

黑暗大,我們目前有在討論一個問題:

使用「jQuery」用「FireFox」是可以正常使用,但如果用「ie」不知道那個版本才能完全支援,不會出錯?

還是各自瀏灠器寫一套?

# Jeffrey said on 03 June, 2010 09:26 PM

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

# jain said on 04 June, 2010 02:39 AM

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

# k said on 10 July, 2010 02:49 AM

小弟也做了一個,僅供參考…

http://code.google.com/p/cejs/

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2010>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication