随笔-312  评论-11874  文章-2  trackbacks-220
English Version: http://dflying.dflying.net/1/archive/129_apply_xslt_to_xml_using_aspnet_atlas_xsltview_control.html

在这个系列中,我将介绍一些Atlas Sys.UI.Data中较高级的控件,包括:

  1. Sys.UI.Data.ListView使用ASP.NET Atlas ListView控件显示列表数据
  2. Sys.UI.Data.ItemView使用ASP.NET Atlas ItemView控件显示集合中的单个数据
  3. Sys.UI.Data.DataNavigator使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航 
  4. Sys.UI.Data.SortBehavior使用ASP.NET Atlas SortBehavior实现客户端排序
  5. Sys.UI.Data.XSLTView使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据
这篇是其中的第五篇,也是最后一篇:使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据

XSLT是一种修饰XML显示的样式语言,它可以将XML文件中的数据添加修饰(样式,布局等)后输出,我们熟悉的CSDN论坛中的帖子就采用了XSLT的修饰。更多的XSLT信息,请访问W3C的XSLT标准:http://www.w3.org/TR/xslt

Atlas中提供了XMLDataSource控件(请参考:Atlas命名空间Sys.Data下控件介绍——DataSource和XMLDataSource)和XSLTView控件,您可以使用他们从服务器取得XML以及XSLT数据,将XSLT样式应用到XML数据中并显示给用户。这是个很有用的功能,例如,您可以在编写在线RSS Feed阅读程序中使用它。

XSLTView控件有如下几个属性:

  1. document:存放XML数据的XML document对象。您可以使用Atlas客户端控件XMLDataSource从服务器获取XML数据。您应该总是设定这个属性。
  2. transform:存放XSLT数据的XML document对象。您同样可以使用XMLDataSource从服务器获取XSLT的数据。您应该总是设定这个属性。
  3. parameters:XSLT文件中定义的parameter,将用于渲染的过程。本属性为只读。关于XSLT中的parameter,请参考:http://www.w3schools.com/xsl/el_param.asp

还有如下方法:

  1. update:用XSLT渲染XML数据。这个方法将在XSLTView对象初始化时或以上属性改变时被自动调用。当然您可以在需要时手动调用。

OK,我们看一下下面的关于XSLTView控件和XMLDataSource控件的例子。

第一步是取得一些测试的数据,包含一个XML文件和一个XSLT文件。Google了一下,很容易在http://www.w3schools.com/xsl/xsl_client.asp中找到了一个简单的。在这个示例程序中,为简单起见,我就使用了原始的XML和XSLT文件。当然在实际的开发中,这两段数据都可以通过Web Service或者别的CGI动态生成。

下面是XML文件,将其存为MyData.xml。

XML Data

下面是XSLT文件,将其存为MyStyle.xsl。

XSLT File

下面我们来定义ASPX页面,有如下两个部分:

  1. Atlas服务器端控件ScriptManager。所有的Atlas页面中都需要包含这个控件以装载Atlas所必须的JavaScript文件。
  2. id为dataContent的<div>,将被Atlas用来输出渲染后的内容。

 

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />

<!-- XSLTView here (container) -->
<div id="dataContent">
</div>

最后需要做的是在页面上添加Atlas脚本定义。有如下三个部分:

第一部分:一个XMLDataSource,用来从服务器取得XML数据。

<xmlDataSource id="dataSource" autoLoad="true" serviceURL="MyData.xml" />

第二部分:另一个XMLDataSource,用来从服务器取得XSLT数据。

<xmlDataSource id="xsltSource" autoLoad="true" serviceURL="MyStyle.xsl" />

第三部分:一个XSLTView控件,将XML数据用XSLT中的定义渲染后输出。注意到这里我们使用binding(关于binding,请参考:Atlas揭秘 —— 绑定(Binding))来设置这个XSLTView的documenttransform属性。

<xsltView id="dataContent">
    
<bindings>
        
<binding property="document" dataContext="dataSource" dataPath="document" />
        
<binding property="transform" dataContext="xsltSource" dataPath="document" />
    
</bindings>
</xsltView>

浏览器中运行:


上述示例代码可以在此处下载:http://files.cnblogs.com/dflying/AtlasXSLTViewDemo.zip

posted on 2006-04-20 22:07 Dflying Chen 阅读(2620) 评论(26)  编辑 收藏 所属分类: ASP.NET AJAX (Atlas)

评论:
#1楼  2006-04-21 08:03 | proshea      
读罢 Dflying 的这个系列,收获颇丰。对 Atlas 的应用有更多的了解了,看来正式推出 Atlas 之后,反响应该非常不错了。

其实觉着整个 .NET 平台上,名字书写出来最养眼的就是 Atlas 和 C# 了。
  回复  引用  查看    
#2楼 [楼主] 2006-04-21 08:56 | Dflying Chen      
@proshea
谢谢支持,后续还有不少篇呢……
  回复  引用  查看    
#3楼  2006-04-21 09:49 | 木地板 [未注册用户]
公司简介:无锡博睿奥克电气有限公司是一家高新股份制有限公司主要专业从事电伴热与电加热工程项目技术咨询、系统设计,并从事电伴热与电加热产品的制造、安装和施工服务。 产品介绍: 1.法兰式加热器:通过强迫对流或自然对流的方式对各种流动或静止的液体和气体进行加热。 [应用] 2.浸入式加热器: 适用于对各种容器、罐体、溶液槽的液体进行加热。 [应用] 3.储罐泵出型加热器:主要适用于加热储罐内各种粘性介质,使之可以用泵抽取。 [应用] 4.卸压气体加热器:适用于油气井口高压天然气、液化气体及其他高压气体的加热。 [应用] 5.储罐式加热器:可加热各种粘性介质,用于各种储罐、槽车等容器的加热、保温。 [应用] 6.板状加热器:适用于对各种管道、容器、罐体进行加热。 [应用] 7.风道式气体加热器:风道式加热器主要用于风道中的空气加热。 [应用] 8.200L油桶加热器:200L油桶加热器,是工厂普通使用的标准空器如:装载油脂、沥青、重油、油漆、蜡制品、凡士林等低凝固点流体时,抽吸排放均有困难,气候冷时,尤为突出。 [应用] 电话:0510-85137261(总机)
<a href="http://my.opera.com/log803/" title="压力容器">压力容器</a>
<a href="http://spaces.msn.com/hy0031/" title="化工设备">化工设备</a>
<a href="http://djj002.blog.com.cn/" title="点胶机">点胶机</a>
  回复  引用    
#4楼 [楼主] 2006-04-21 10:00 | Dflying Chen      
@木地板
广告这么多??
  回复  引用  查看    
#5楼  2006-04-21 20:32 | kane      
CSS+DHTML+XML+XSLT+AJAX,这样就齐活了。不过想起下面这段来了,呵呵。
Web 2.0 大腕版
 
一定要选最好的服器                                                                                  
有64位的CPU                                                                 
放就放最高档的机房                                                        
用户注册要邀请
免费空间最少也要有2个G
什么Tag啊,RSS啊,Trackback啊
能用的技术全给他用上
网站都要用大字体,Logo 边上放个"Beta"
找一个海归MBA
特儒雅,会写blog的那种
客户一进门儿,甭管有事儿没事儿都得跟人家说
Social Network Service,Long tail,Web 2.0
一口地道的斯坦福腔儿
倍儿有面子
办公室要找一间仓库
能放篮球架的
一年光房租就得几万美金
服务全部提供API
还要能提供外部feed
程序用PHP5写  传输靠AJAX
就是一个字儿——酷
网站wiki化,内容都得让用户编辑
后面还有跟一个创作共用
网站链接全部做rewrite保持CleanURL
你要是URL里还有个问号阿
你都不好意思跟人家打招呼
你说这样的网站,VC得跟你投多少钱
我觉得怎么着也得一千万吧
一千万,那是成本
两千万起,还是美金
你还别嫌贵 还不打折
你得研究投资者心理
愿意套一千万美金投资的VC
根本就不在乎再多掏一千万
什么叫 2.0 你知道吗?
2.0 就是做什么东西
都做最酷的 不做最好的
所以 我们网站的口号儿就是
不求最好 但求最 2.0!
(《Web 2.0 大腕》转载自《程序员》2006 三月刊 作者:霍翔,零度录入)
 
 

  回复  引用  查看    
#6楼 [楼主] 2006-04-21 22:05 | Dflying Chen      
@kane
呵呵,这一段确实搞笑。
  回复  引用  查看    
#7楼  2006-04-25 20:41 | skyeagle [未注册用户]
我想问下那个serviceURL假如是internet上的xml怎么不行呢,加入我要用外部的xml不如rss那要怎么用呢?
  回复  引用    
#8楼  2006-04-25 20:43 | skyeagle [未注册用户]
我想问下那个serviceURL假如是internet上的xml怎么不行呢,假如我要用外部的xml比如rss那要怎么用呢?(不好意思上面那条打快了有错别字...).
  回复  引用    
#9楼  2006-04-25 20:50 | skyeagle [未注册用户]
是不是一定要用桥文件?
  回复  引用    
#10楼 [楼主] 2006-04-26 08:59 | Dflying Chen      
@skyeagle
可能需要使用Atlas中的BridgeMethod,我在稍后会有一些介绍。
  回复  引用  查看    
#11楼  2006-05-05 11:35 | cybersoft.cn@gmail.com [未注册用户]
xmlDataSource的serviceURL可以是WebService(.asmx)吗?
我希望通过xsltView显示TreeView,使用您范例中的办法加载了tree.xml和tree.xsl,立刻实现了。
接着我希望tree.xml不是静态文件而是从数据库中提取,用代码动态生成XmlDocument,再通过WebService的一个方法发布。
但我试着在WebService的一个方法中new一个XmlDocument,填了些数据返回这个XmlDocument。通过IE查看此方法的结果是正确的XML(至少看上去和那个tree.xml是一样的)。然后修改serviceURL为xxxWebService.asmx,但在页面上什么也没有,也不报错!
请指教!谢谢。
  回复  引用    
#12楼 [楼主] 2006-05-05 18:16 | Dflying Chen      
@cybersoft.cn@gmail.com
您可以使用Fiddler看一下实际的HTTP Request中的内容是否正确。
如果传输内容正确,那么请将您的代码贴到这里,让我们想其他的方法分析。
  回复  引用  查看    
#13楼  2006-05-06 09:53 | cybersoft.cn@gmail.com [未注册用户]
在Fiddler看了应该也是正确的,我贴出来帮忙看看吧!

先写成这样,没问题,然后...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TreeViewDemo</title>
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div id="folderTree">
</div>
</form>
</body>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<xmlDataSource id="dataSource" autoLoad="true" serviceURL="tree.xml" />
<xmlDataSource id="xsltSource" autoLoad="true" serviceURL="tree.xsl" />

<xsltView id="folderTree">
<bindings>
<binding dataContext="dataSource" property="document" dataPath="document" />
<binding dataContext="xsltSource" property="transform" dataPath="document" />
</bindings>
</xsltView>
</components>
</page>
</script>

<script type="text/javascript">
// 这部分是对tree node click的响应 关系不大 略去
</script>
</html>

...
  回复  引用    
#14楼  2006-05-06 09:55 | cybersoft.cn@gmail.com [未注册用户]
tree.xml:(来自15seconds.com的那篇《Advanced UI Design Using XML and XSL》系列文章)
<?xml version="1.0" encoding="utf-8"?>
<tree>
<entity id="e0">
<description>Root</description>
<oncontextmenu></oncontextmenu>
<image>images/book.gif</image>
<imageOpen>images/bookOpen.gif</imageOpen>
<contents>
<entity id="e1">...(这部分太长了)
<entity id="e12">
<description>Reports</description>
<oncontextmenu></oncontextmenu>
<image>images/book.gif</image>
<imageOpen>images/bookOpen.gif</imageOpen>
<contents>
<entity id="e13">
<description>Income</description>
<oncontextmenu></oncontextmenu>
<image>images/paper.gif</image>
<imageOpen>images/paper.gif</imageOpen>
<contents>
</contents>
</entity>
<entity id="e14">
<description>Expenses</description>
<oncontextmenu></oncontextmenu>
<image>images/paper.gif</image>
<imageOpen>images/paper.gif</imageOpen>
<contents>
</contents>
</entity>
</contents>
</entity>
</contents>
</entity>
</tree>

tree.xlt:(也是来自15seconds的那篇文章,实在太长了...)

然后把这句“<xmlDataSource id="dataSource" autoLoad="true" serviceURL="tree.xml" />”中的“tree.xml”改成“TreeDataService.asmx”就什么也没有了!

TreeDataService.asmx:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class TreeDataService : DataService
{
[WebMethod]
[DataObjectMethod(DataObjectMethodType.Select)]
public XmlDocument GetXMLData()
{
XmlDocument doc = new XmlDocument();
doc.LoadXml("<tree></tree>");

// Add a entity element.
XmlElement newElem = doc.CreateElement("entity");
newElem.SetAttribute("id", "e0");

XmlElement description = doc.CreateElement("description");
description.InnerText = "Root";

XmlElement image = doc.CreateElement("image");
image.InnerText = "images/book.gif";

XmlElement imageOpen = doc.CreateElement("imageOpen");
imageOpen.InnerText = "images/bookOpen.gif";

XmlElement contents = doc.CreateElement("contents");

newElem.AppendChild(description);
newElem.AppendChild(image);
newElem.AppendChild(imageOpen);
newElem.AppendChild(contents);// 只写了Root

doc.DocumentElement.AppendChild(newElem);
return doc;
}
}

谢谢!
  回复  引用    
#15楼 [楼主] 2006-05-06 09:59 | Dflying Chen      
@cybersoft.cn@gmail.com
不要返回XML Document,返回XML String应该就没问题了
  回复  引用  查看    
#16楼  2006-05-06 10:09 | cybersoft.cn@gmail.com [未注册用户]
呵呵本来也想返回string的,看了Matt Powell的那篇《Don't return XML in string variables! 》(http://blogs.msdn.com/mpowell/archive/2004/05/12/130637.aspx)就不敢返回string了。
不过就这个string问题的好像也有争议,如:《Return well-format XML from WebService Without XMLDocument!》
再次感谢!我先试试返回string吧。
  回复  引用    
#17楼 [楼主] 2006-05-06 10:21 | Dflying Chen      
@cybersoft.cn@gmail.com
各有各的好处吧,先看看能不能用再说:)
  回复  引用  查看    
#18楼  2006-05-06 10:25 | cybersoft.cn@gmail.com [未注册用户]
试了:
将“return doc;”改成“return doc.OuterXml;”不行!?
试着在“xmlDataSource”中加“xpath”也不行。
帮忙再看看,谢谢!
  回复  引用    
#19楼 [楼主] 2006-05-06 12:10 | Dflying Chen      
@cybersoft.cn@gmail.com
很奇怪的哦,如果返回的数据是一样的,没有理由不对啊?
您比较一下用XML和WebService返回的原始HTTP数据,看看有没有什么细微的差异,如果没有,那么就应该没问题的阿,再不行的话调试到Atlas Script中看看到底怎么回事。
我在家里调试环境不好,刚刚试了试,也没找出什么。
等到后天上班了再帮您看看……
  回复  引用  查看    
#20楼  2006-05-12 14:02 | fffff [未注册用户]
请问 那里有自动生成xslt 根据xml得 数据结构!
  回复  引用    
#21楼 [楼主] 2006-05-12 14:22 | Dflying Chen      
@fffff
xslt是修饰xml显示用的,没有一个固定的样式。
  回复  引用  查看    
#22楼  2006-06-26 20:16 | 阿不      
对xslt还不熟悉,暂略过。
  回复  引用  查看    
#23楼 [楼主] 2006-07-04 16:24 | Dflying Chen      
@阿不
慢慢来
  回复  引用  查看    
#24楼  2006-10-02 10:24 | zhang.pyu      
你老兄的blog rss,被我订在google的自定义主页里。在我的程序里也有很多你的例程。有个问题要问:
一直想实现一个基于Atlas的web控件用于在线编辑xml,并且可以更新。而眼下很多xml的咚咚都是只读的,或者访问起来繁琐之至。您有什么好办法吗?一起想想办法吧。

  回复  引用  查看    
#25楼 [楼主] 2006-10-02 14:56 | Dflying Chen      
@zhang.pyu
“在线编辑xml”是什么意思啊?
文本编辑器?
  回复  引用  查看    

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-05-09 11:59 编辑过


相关链接: