Jumony入门（二）初识选择器
首先介紹一下Jumony是什么，Jumony是一個.NET的開源項目，項目主頁位于：http://jumony.codeplex.com/，采用LGPL協(xié)議發(fā)布。
Jumony試圖提供在傳統(tǒng)Web開發(fā)模型中許多難以解決問題的解決方案。一言蔽之，Jumony的一切基礎(chǔ)建立在服務(wù)器端的HTML DOM之上。在服務(wù)器端將HTML（文件或動態(tài)網(wǎng)頁技術(shù)的輸出）按照客戶端瀏覽器的處理方式解析為HTML DOM。操縱和處理HTML DOM，就像我們在客戶端用JavaScript干的那些事情一樣，不同的是，Jumony可以使你依托強(qiáng)大的.NET Framework，來解決以前用腳本和服務(wù)器端技術(shù)都難以解決的事情。
?
系列目錄：
Jumony入門（一）從這里開始
?
這是系列文章的第二篇，這個系列嘗試一步步從一些最簡單的例子開始了解怎么玩轉(zhuǎn)Jumony。建議先從第一篇開始學(xué)習(xí)搭建Jumony環(huán)境，在本文的開始的時候，假設(shè)大家已經(jīng)搭建好了Jumony的運行環(huán)境。
?
首先我們來看一個頁面：
這個頁面的源代碼如下：
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD XHTML 1.0 Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml">
<head>
? <title>Ranks</title>
? <style>
??? table
??? {
????? font-size: 12px;
??? }
??? .ranks?th
??? {
????? height: 30px;
????? font-size: 15px;
????? font-family: Arial;
??? }
???
??? .ranks?td, .ranks?th
??? {
????? border-top: solid?1px;
??? }
???
??? .ranks?.name
??? {
????? font-weight: bold;
??? }
??? .ranks?table?td
??? {
????? border: 0px;
??? }
? </style>
</head>
<body>
? <table?cellpadding="5"?cellspacing="0"?class="ranks">
??? <tr>
????? <td?colspan="2"?class="top">
??????? <table?cellpadding="3"?border="0">
????????? <tr>
??????????? <td?rowspan="3"><img?src="http://pic.cnblogs.com/avatar/a14218.jpg"?width="50"?height="50"?/></td>
??????????? <td class="name">Jumony</td>
????????? </tr>
????????? <tr>
??????????? <td>得票數(shù): <span?style="color: red;">100</span></td>
????????? </tr>
????????? <tr>
??????????? <td>主頁地址： <a?href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
????????? </tr>
??????? </table>
????? </td>
??? </tr>
??? <tr>
????? <th>
??????? № 2
????? </th>
????? <td><span?class="name"?>Jumony</span>( <span?style="color: red;">100</span> ) <a?href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
??? </tr>
??? <tr>
????? <th>
??????? № 3
????? </th>
????? <td><span?class="name"?>Jumony</span>( <span?style="color: red;">100</span> ) <a?href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
??? </tr>
? </table>
</body>
</html>
?
請先將份源代碼保存為一個叫做ranks.htm的文件，然后我們開始對這個頁面干點兒壞事。
這種頁面，就是一種在傳統(tǒng)的技術(shù)下，怎么也不好處理的頁面，第一名的呈現(xiàn)方式與后面的呈現(xiàn)方式完全不同。即使用模版引擎，這種模版改起來怕也是件煩心事兒。
但強(qiáng)大CSS的選擇器可以完全的抹平這些區(qū)別，使得我們的邏輯變得非常簡單。
當(dāng)然，首先，我們要建立一個這個頁面的處理程序，也就是ranks.htm.ashx文件。然后添加using和繼承基類，完成后的樣子像這樣：
?
那么首先，我們要選擇到class為ranks的那個table，再選擇其每一行，選擇器像是這樣的：".ranks > tr"。
中間的>符號表示只選擇.ranks的直接子集中的tr，因為在第一名的行中，HTML里面又被嵌了一個table來做綁定，里面也有一些tr元素。所以我們使用>選擇符來避免選擇到這些：
關(guān)于選擇器的語法，是完全遵循CSS Selector 3的標(biāo)準(zhǔn)的（部分實現(xiàn)）。如有不清楚的地方可以移步W3C的網(wǎng)站：http://www.w3.org/TR/2009/PR-css3-selectors-20091215/
另外需要注意的是這里我們是直接用Find方法的，而不是Document.Find，嗯，這是JumonyHandler提供的一個便利，對于Document的Find操作實在是太常用了，所以，Handler上定義了一個Find方法來對Document進(jìn)行查找。當(dāng)然，這和Document.Find是完全一樣的效果。
?
然后我們編造一些數(shù)據(jù)，例如：
接下來是將兩個列表綁定在一起，Ivony.Fluent里面提供了一個方法：BindTo，這個方法可以方便的進(jìn)行兩個列表的綁定，使用方法像是這樣：
這里我使用的是lambda表達(dá)式，如果你喜歡也可以寫成一個額外的方法，當(dāng)然，在這個例子中，由于上面的數(shù)據(jù)類型我用的是匿名類型，所以這里沒有辦法拆出另一個方法出來，那么，我繼續(xù)用lambda來示范。
?
獲取了每一個綁定的元素后，我們需要進(jìn)一步考察每一個項（即Name、Votes和Url）要綁定的位置。只要是有規(guī)律的界面，那么其HTML就一定是有規(guī)律的，其實這個規(guī)律并不難找：
Name位于class="name"的元素中，而Votes則總是在一個style="color: red"的span里面，至于url，則總是在<a>那里，因為這是一個鏈接。當(dāng)然，這個頁面也可以說是事先設(shè)計好的，因為這里才第二篇，我們只考慮一些簡單的示范，在后面，我們再來看在代碼中的篩選邏輯能夠做到怎樣的智能。那么我們可以簡單的寫出選擇器：
注意這里的element直接就有Find方法，事實上Find方法并不是Document的專利，在Jumony中，只要是一個容器（IHtmlContainer），就可以Find，這實在非常便利。
?
OK，現(xiàn)在數(shù)據(jù)就已經(jīng)全部綁定到頁面了，打開頁面來看看效果。
很完美不是么？看看HTML源代碼：
怎么樣，有沒有一種在服務(wù)器端用jQuery的感覺？
?
這里有幾個問題需要注意一下：
linkContainer.SetAttribute( "href" ,dataItem.Url )
還可以這樣：linkContainer.href = dataItem.Url
轉(zhuǎn)載于:https://www.cnblogs.com/Ivony/archive/2010/12/20/jumony-guide-2.html
總結(jié)
以上是生活随笔為你收集整理的Jumony入门（二）初识选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LINUX下邮件服务器
- 下一篇： 整合NHibernate到Spring.