用XML+XSLT+CSS+JQuery组建ASP.NET网站-asp.net vue

前言

早在Web标准化风潮到来之前，我就考虑过XML+XSLT建站了，我以为这是一种非常优雅、高效、低耦的方案，必将大行其道。

然而时至今日，使用这种方案建站的人依然寥寥无几，大家还都在抱着Web标准化不撒手，其实Web标准化只是将表现（Css）分离了出来，而数据和结构仍然混杂在一起，它绝对不是我们最终的归宿，它只是一个过渡品。

XHtml标准的建立初衷，其实也就是为了向 XML过渡的，XML+XSLT+CSS才真正做到数据、结构、表现的完美分离，才是我们的终极目标。

诚然，XML+XSLT确实有其技术难度，我想这是它难于普及的最大障碍所在，但我觉得随着时间的推移、观念的更新、工具的发展，这仍旧是我们必会到达的一站。

方案简介

XML+XSLT+CSS的方案将数据、结构、表现进行了分离，而依托JQuery我们又可以轻松地将交互也从中分离出来，这样在客户端就达到了近乎完美的解耦。

[[2865]]

而在服务器端，我们只负责输入和输出：

输入部分使用WebService，主要用于接收客户端提交的数据，以更新服务器数据。

输出部分即为XML，可以有两种实现方案：

1. 动态型。使用一个扩展名为.ashx处理程序负责输出 XML，只要通过此处理程序从数据库取出客户端需要的数据，并转换为XML文档输出即可。动态型的好处在于支持 Url参数查询及其他复杂查询处理。

2.静态型。放弃数据库，将所有用于呈现的数据都直接写为XML文件。静态型的好处当然就是服务器负荷极低了，在不提交数据的情况下，服务器会比纯静态HTML网站还要轻松很多。

[[2866]]

优势

对比以往的各种开发方案，我总结出此方案具有以下优势：

1.更便于团队协作。充分解耦带来的就是细化分工及并行开发，以往的各种开发方案中，总有许多地方界限模糊，致使前台与后台、程序员与设计师频繁磋商，延误开发效率。

比如仅仅是一个XHTML文档，设计师要在上面定义文档结构，以及ID、Class，前台程序员要在上面写客户端事件，后台程序员得把从数据库中取得的数据插入到页面中的某处，三方的工作都受其牵制，这时XHTML就像是一个接口，三方共用着这一个接口。

而我们的这个方案中的情况是怎样的呢？后台程序员只管怎么跟数据库打交道、怎么处理业务逻辑，客户端需要数据时，只要扔出个XML文档就可以了；作为设计师，只要知道XML文档结构，就可以通过XSLT灵活地安排布局，即使需要大幅修改布局，也不需要劳烦后台程序员插手，简单的XSLT语法对于设计师不是什么大问题；前台程序员需要知道用户界面中有哪些交互控件，为他们安排事件逻辑，并提交到后台的WebService中去就可以了；这时XML、XSLT、WebService就像是三个接口，一方最多接触其中的两个。

接口多了好，还是少了好？可以看看索爱手机的例子，索爱手机大多是耳机、充电、数据传输都共用着一个接口，充电的时候不能插耳机听歌、插耳机听歌的时候不能传数据、传数据的时候不能充电，而其他品牌的手机则大多是分别使用多个接口的，哪个更方便不言自明吧。（当然，从安全角度来看的话，索爱的单接口却是更优秀的，此前曾有新闻报道过某男用手机边听歌边充电被雷击致死的事故，那人在死前还大喊：“啊！我死啦！”-_-#，围观地址）

2.更节省服务器资源。带宽资源方面：此方案中，用户每次切换页面，所需下载的都只是一个XML文档而已，其他XSLT、CSS、JS都只需下载一次，提交时也不需要表单回发，更不需要ViewState。处理器资源方面：客户端呈现完代码全由XSLT在客户端动态合成，服务器端的工作仅仅是处理业务逻辑和数据库交互，极其轻松。此方案的资源消耗水平略高于Ajax方案，低于 MVC方案，相对于WebForm、MVP及传统脚本式的方案来说，节省的资源非常可观。

3.更易于搜索引擎收录。首先就是此方案可以被搜索引擎收录，而 Ajax方案的弊端就在这里；其次，搜索引擎喜欢冗余少的网站，这会一定程度上影响网站排名，而XML数据最为符合这一要求；再者，网址较为友好，这是相对MVC而言的，具体原因可参看我此前发表的一篇文章。

4.更容易在其他客户端中使用。这一点Ajax方案也同样优秀，MVP方案实现起来有些困难，其他的方案都难以实现。

弊端

没有完美的事物，此方案弊端如下：

1. 更高的技术要求。显然相比以往的方案，此方案需要开发者掌握更多知识，并组合应用。

2.更高的客户端负荷。XSLT加重了客户端的处理压力，虽然我们大都觉得客户端的运算资源负荷是一个可以忽视的问题，从而将尽可能多的运算放到客户端，但并不是所有客户都使用中高端的机器，尤其是对一些上网本用户而言，JS已经让他们头疼了。

3.更差的兼容性。HTML、 JS、CSS在各个浏览器上本就有些兼容性问题，现在XSLT又掺合进来，开发者面临的问题更为严峻。并且对于移动客户端、盲人阅读器及其他非常规客户端而言，XSLT是否会被解析都是个疑问。

#p#

范例

现在演示一个网站范例。

首先建立一个数据库，这里使用的Accesee 2000-2003数据库，命名为Database.mdb，在其中建立User表：

clip_image006

输入一些数据，用于测试显示：

clip_image008

将其导入网站项目中的App_Data目录。

添加一个ashx文件，名为 Default.ashx：

clip_image010

输入以下代码：


<%

@ WebHandler Language="C#" Class="Default" %>

using System;
using System.Web;
using System.Data.OleDb;
using System.Data;
using System.Xml;

public class Default : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
OleDbConnection c = new OleDbConnection

(string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security 

Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb")));
var ds = new DataSet

();
c.Open();
//获取Url

中的max参数
var max = 0;
Int32.TryParse(HttpContext.Current.Request.QueryString["max"],out 

max);
//读取数据
new OleDbDataAdapter(string.Format("select{0} * from [User]", max > 0 ? " top " + max : string.Empty), c).Fill

(ds);
c.Close();
//建立XML

文档
var xml = new XmlDocument

();
xml.LoadXml(ds.GetXml

());
//添加文档声明
xml.InsertBefore(xml.CreateXmlDeclaration("1.0", 

"UTF-8", null), xml.DocumentElement);
//添加xslt

声明
var xsl = xml.CreateProcessingInstruction("xml-

stylesheet", @"type=""text/xsl"" 

href=""Default.xslt""");
xml.InsertBefore(xsl, xml.DocumentElement);
//输出
context.Response.ContentType = "application/xml";
context.Response.Write(xml.InnerXml);
}

public bool 

IsReusable
{
get
{
return false;
}
}

}

再添加一个XSLT文件，命名为 Default.xslt，输入以下代码：

xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-

com:xslt" exclude-result-prefixes="msxsl"
> 
<xsl:template match="/">
<html>
<hread>
<title>XML网站测试title>
<link href="Style.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.js" type="text/javascript"/>
<script src="Post.js" type="text/javascript"/>
hread>
<body>
<h1>XML网站测试h1>
<ul>
<xsl:for-each select="//Table">
<li>
<a href="#">
<xsl:value-of select="ID"/>
a>
<xsl:value-of select="UserName"/>
li>
xsl:for-each>
ul>
<input type="text" name="Name" id="Name" />
<input type="submit" name="PostName" id="PostName" value="提交" 

/>
body>
html>
xsl:template>

xsl:stylesheet>

注意，在XSLT中可包含用于提交数据的交互控件，但不需要为其定义事件处理，交互处理都由JS完成。

添加一个CSS文件，命名为 Style.css，输入以下代码：

body
{
background-color: Silver;
}
h1
{
color: Gray;
}
a
{
color:White;
margin-

right:6px;
}

编译并运行，即可看到输出的数据：

clip_image012

查看其源代码：

clip_image014

用户访问不同页面时，只有这些 XML代码会被多次下载，其他客户端的文件都只需下载一次，大大节省了服务器网络资源。

由于此前在ashx中编写了支持 Url参数查询的代码，我们可以通过设置max参数来决定显示的最大数据条目数：

clip_image016

输出部分至此就完成了，接下来是输入部分：

导入JQuery代码jquery-1.3.2.js到项目中。

添加一个JS文件，命名为 Post.js，输入以下代码：

/// 
$(function() 

{
$("#PostName").click(function() 

{
$.post("./webservice.asmx/AddName", { 

"Name": 

$("#Name").attr("value") }, function() { location.reload(); })
});
}
);

可以看到，通过JQuery在JS代码文件中为按钮注册处理函数非常简单，这样就将交互部分完全分离开来。

添加一个WebService，命名为 WebService.asmx，在其后台代码文件WebService.cs中输入如下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.OleDb;

/// 

///WebService 的摘要说明
/// 

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = 

WsiProfiles.BasicProfile1_1)]
//若要允许使用

 ASP.NET AJAX 从脚本中调用此

 Web 服务，请取消对下行的注释。

 
// 

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

public WebService () {

//如果使用设计的组件，请取消注释以下行 
//InitializeComponent(); 
}

[WebMethod(Description="添加一个新的用户名")]
public void AddName(string Name) {
OleDbConnection c = new OleDbConnection

(string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security 

Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb")));
c.Open();
new OleDbCommand(string.Format("INSERT INTO [User] VALUES ('{0}','{1}')",Guid.NewGuid

(),Name),c).ExecuteNonQuery

();
c.Close();
}

}

编译并执行，测试提交数据：

clip_image018

提交成功后会刷新页面（JS里的回调函数所为），刷新后的输出数据：

clip_image020

此范例完成，解决方案资源管理器中显示的目录结构如下：

clip_image021

可预见的问题

一定要用JQuery吗？

不，只是方便而已，其他框架或自写JS也都可以实现。

我的网站需要侧边栏显示一些热门文章排行之类的东西，该怎么实现呢？

可以通过Ajax的方式，配合 WebService异步获取数据，但这样的话搜索引擎没法收录这些数据。

也可以将这些数据直接写在XML里，但这样的话又会造成冗余。

比较妥当的方法是将XSLT也改为由 ashx处理程序动态生成，在里面写入这些数据，但这样会增加服务器负荷，注意设好缓存应该影响不大，另外的副作用就是使后台开发人员和设计师又亲密接触了。

怎么使用Session？怎么使用Membership？

我们的XML文件是使用ashx处理的，实质上它和aspx没多大区别，可以通过HttpContext.Current.Session访问到 Session，要干什么都可以在里面干了。如果要由客户端改变Session的值，只要通过WebService就可以了。

使用Membership也是同样道理，只不过少了那些登录控件什么的，你必须手动编写代码来控制了。

结语

XML是XHtml的终极目标，虽然现在将XML用于网站开发或许还不够成熟，但是应该距成熟不远了，Ajax的诞生进一步奠定了前往XML的路，这路必定会越来越好走的。

我承认，我喜欢研究一些非主流的东西=。=，此前还研究过用XAML做网页，HOHO，也许RIA才是未来的王者也说不定。

【编辑推荐】