[经验分享] 用XML+XSLT+CSS+JQuery组建ASP.NET网站(2)

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2012-1-13 10:18:18 |只看该作者 |倒序浏览

本文将介绍用XML+XSLT+CSS+JQuery+WebService组建ASP.NET网站，这种组建方法，需要开发人员具备较强的实力。
AD：

范例
现在演示一个网站范例。
首先建立一个数据库，这里使用的Accesee 2000-2003数据库，命名为Database.mdb，在其中建立User表：

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

将其导入网站项目中的App_Data目录。
添加一个ashx文件，名为 Default.ashx：

输入以下代码：

@ 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(@"

rovider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}""

ersist Security Info=***e", HttpContext.Current.Server.MapPath(@"~App_DataDatabase.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.CreateProcessingIns***ction("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="

ost.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="

ostName" id="

ostName" 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;
}

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

查看其源代码：

用户访问不同页面时，只有这些 XML代码会被多次下载，其他客户端的文件都只需下载一次，大大节省了服务器网络资源。
由于此前在ashx中编写了支持 Url参数查询的代码，我们可以通过设置max参数来决定显示的最大数据条目数：

输出部分至此就完成了，接下来是输入部分：
导入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(@"

rovider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}""

ersist Security Info=***e", HttpContext.Current.Server.MapPath(@"~App_DataDatabase.mdb")));
c.Open();
new OleDbCommand(string.Format("INSERT INTO [User] VALUES ('{0}','{1}')",Guid.NewGuid (),Name),c).ExecuteNonQuery ();
c.Close();
}
}

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

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

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

可预见的问题
一定要用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才是未来的王者也说不定