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。