Jumony入門（四）無縫體驗

首先介紹一下Jumony是什麼，Jumony是一個.NET的開源項目，項目主頁位於：http://jumony.codeplex.com/，採用LGPL協議發佈。

Jumony試圖提供在傳統Web開發模型中許多難以解決問題的解決方案。一言蔽之，Jumony的一切基礎創建在服務器端的HTML DOM之上。在服務器端將HTML（文件或動態網頁技術的輸出）按照客戶端瀏覽器的處理方式解析爲HTML DOM。操縱和處理HTML DOM，就像咱們在客戶端用JavaScript乾的那些事情同樣，不一樣的是，Jumony可使你依託強大的.NET Framework，來解決之前用腳本和服務器端技術都難以解決的事情。

系列目錄：

Jumony入門（一）從這裏開始

Jumony入門（二）初識選擇器

Jumony入門（三）初探解析器

這是系列文章的第四篇，這個系列嘗試一步步從一些最簡單的例子開始瞭解怎麼玩轉Jumony。建議先從第一篇開始學習搭建Jumony環境，在本文的開始的時候，假設你們已經完成了前三篇的示例。

 

在這一篇開始以前，先告訴你們一個好消息，Jumony入門系列的全部的源代碼都已經上傳到了Codeplex。這樣你們就能夠直接下載源代碼對照着文章來實驗，而不須要從截圖中抄代碼，避免了眼花和出錯。

項目的網頁是：http://JumonyGuide.codeplex.com。最新的源代碼能夠直接用SVN客戶端下載，下載地址是：https://JumonyGuide.svn.codeplex.com/svn/trunk/。

當您看到這篇文章的時候，這篇文章所出現的全部示例代碼應該已經上傳到SVN服務器了。

若是您沒有SVN客戶端，或者還不清楚使用或者嫌SVN麻煩，能夠直接在以下地址下載打包好的源代碼：

http://jumonyguide.codeplex.com/SourceControl/list/changesets

點擊以下圖中所示的Download連接，便可下載最新版本的源代碼包。

 

在這一篇裏面，我會來談談Jumony與現有技術的結合，以及帶來的無縫的體驗。在前面的文章中，咱們見識了Jumony種種神奇的功能，它能夠攔截一個HTML文件的請求，解析文件成爲DOM，用選擇器找出咱們感興趣的地方，並用簡單的方法來綁定數據。這些看起來很酷，但作網站須要的不是一個看起來很酷的技術，如何與現有的成果兼容，如何利用現有的經驗和積累，也是很是重要的問題。

在上一篇文章中，咱們使用aspx文件的DataGrid控件呈現了互聯網上某個頁面的連接分析結果，以下圖所示：

顯然，這太醜了。咱們來把它弄漂亮點，你必定會說這用CSS很容易，也能夠改改DataGrid的樣式屬性什麼的。但這一次我不打算用這些簡單的方法，儘管這聽起來有點兒愚蠢。可是咱們不妨假設一下場景，這是一個很糟糕的系統中的一個頁面，因爲源代碼管理的混亂，咱們已經很難找到這個頁面的源代碼。源代碼中邏輯複雜而又糾結，頁面結構也是亂七八糟，除了這個表格是DataGrid的輸出因此較爲標準外，其他的部分都是使用一些徹底不考慮後期維護的作法，樣式引用混亂不堪。並且糟糕的是這個aspx文件已經被預編譯成DLL事實上咱們連頁面都改不了。。。。

固然實際狀況並不必定像上面說的這樣糟糕。但實際上有一個現實的問題是Jumony並非對於全部的頁面和應用場景都有最佳的解決方案（儘管我但願是這樣），或者說咱們不可避免的要面對一個問題：Jumony能夠幫助到WebForm或者現有技術驅動的頁面嗎？

 

固然能夠，並且，So easy！

 

從這個系列的第一篇文章中咱們學到，Jumony要求首先有一個靜態的html文件，而後新建一個文件名前段與其徹底一致的通常處理程序（ashx文件），這樣，就能夠在ashx文件中對靜態的html文件進行各類處理了。一樣的道理，若是咱們將靜態的HTML文件換成aspx文件，Jumony同樣能處理！

那麼我這邊用做示範的aspx文件就是在上一篇中所使用的links.aspx，咱們假設他就是那個悲慘的改不了的頁面了，但老闆如今要看到一個漂漂的版本。

 

首先，建立一個links.aspx.ashx文件：

注意這裏爲了不名稱衝突（事實上在網站項目裏面不會衝突），我把類名改爲了links_aspx。

 

那麼事實上這和處理靜態HTML文件是同樣的，Jumony引擎會自動截獲aspx文件的輸出，並解析成DOM供咱們操縱。

第一件事，咱們先要找出這個表格，因爲DataGrid控件的ID是"DataList"，因此生成的表格的ID也就是"DataList"了，直接用ID選擇器來選擇之：

接下來，設置一些基本的樣式：

而後咱們爲首行，也就是標題行，設置一些樣式：

Tips: Elements方法看起來和XLINQ的Element方法效果差很少，都是選擇指定名稱的元素，但Jumony的Elements方法要比XLINQ的強大許多。由於它是支持CSS元素選擇器的（不支持層疊選擇器）。事實上不少Jumony的這種方法都支持選擇器哦，你們慢慢去發現吧。

 

看看效果是否是好多了：

 

很是不錯，接下來我來作一個隔行變色的效果，這能夠用一個循環來實現，但更簡單的辦法是用CSS的nth僞類：

呵呵，Elements真的是支持選擇器的哦，使用Elements而不是Find方法能夠將查找範圍限定爲本身的直接子集而不是全部子代元素。這些技巧在一些特殊需求中能夠派上大用場。

關於nth系列僞類的用途和語法，網上有不少的文章，在這裏我不贅述。

而後我以爲認爲IsLiningOut這一列純屬多餘，我把這一列隱藏掉，對於外鏈的URL，我將字體設置爲紅色來表示：

Tips:細心的你可能又發現一個支持選擇器的方法了。

 

最終的效果：

 

對比仍是很明顯的吧。

 

能夠看得出來，Jumony能夠與現有的幾乎任何WebForm的技術無縫集成，最大限度的保護了現有的勞動成果，您可使用Jumony技術來解決一些問題，而無需放棄任何你所熟悉或是喜歡的技術。

謝謝你們。。。

 

週末陪老婆旅遊，因此下一篇，可能會要讓你們等的稍微久一點點。

 

您想用Jumony來構建什麼？您對Jumony有什麼建議？您對Jumony有什麼疑惑？您但願Jumony增長一個怎樣的很酷的功能？

那麼歡迎來Jumony羣暢所欲言：45510432。