用XML+XSLT+CSS+JQuery組建ASP.NET網站

作者：斯克迪亞 2009-05-21 09:54:12

開發后端

本文將介紹用XML+XSLT+CSS+JQuery+WebService組建ASP.NET網站，這種組建方法，需要開發人員具備較強的實力。

前言

早在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="http://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才是未來的王者也說不定。

【編輯推薦】

亮劍.NET：圖解ASP.NET網站開發實戰
作為ASP.NET開發人員必須養成的編程習慣
視頻教程:ASP.NET Web開發詳解

責任編輯：彭凡來源： cnblogs