添加一个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，输入以下代码：

/// <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();

    }

}