当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站

ASP.NET
赫赫大名的A*寻路算法(vb.net版本)
asp.net(c#)下Jmai去说明 使用与下载
[原创]完美解决Could not load file or assembly ''AjaxPro.2'' or one of its dependencies. 拒绝访问。
asp.net下gridview 批量删除的实现方法
用CSS实现图片倾斜 只支持IE
.net get set用法小结
vs 不显示行号的操作方法
ASP.NET页面进行GZIP压缩优化的几款压缩模块的使用简介及应用测试!(附源码)
ASP.Net不执行问题一解
asp.net 无限分类
让VS2008对JQuery语法的智能感知更完美一点
扩展方法ToJSON() and ParseJSON()
asp.net下PageMethods使用技巧
Linq to SQL Delete时遇到问题的解决方法
实现ASP.NET多文件上传程序代码
ASP.NET AJAX 1.0 RC开发10分钟图解
asp.net get set用法
ASP.NET下使用WScript.Shell执行命令
asp.net2.0实现邮件发送(测试成功)
Asp.net 无限级分类实例代码

No. « 93 94 95 96 »

技术文章搜索

关键字

ASP.NET 中的 XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 189 ::
收藏到网摘: n/a

前言

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

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

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

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

方案简介

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

clip_image002

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

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

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

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

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

clip_image004

优势

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

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是否会被解析都是个疑问。

范例

现在演示一个网站范例。

首先建立一个数据库，这里使用的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，输入以下代码：

/// <reference path="jquery-1.3.2-vsdoc2.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;

 

/// <summary>

///WebService 的摘要说明

/// </summary>

[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才是未来的王者也说不定。