ASP.NET和AJAX简洁教程

2023年6月21日发(作者：)

介绍

尽管AJAX是种客户端技术，但实际上的开发过程，它经常要调用一个服务器端的过程。通常，网站上的数据是存放在一个关系型数据库中，为了让AJAX更有用处，处理服务器端数据需要一种简单可靠的方法。幸运的是， AJAX提供了一种有效的基础架构来做这件事情，浏览器和服务器在Internet上可以进行AJAX通信。自然而然，Web Service在数据传输和客户端/服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过 AJAX调用 web services。

软件需求

本文所有的范例都是使用 AJAX RC版，而且，要在SQL Server 2005 (Express版即可)上有一个Northwind数据库。范例使用Visual Studio 2005作为开发环境。

范例场景

范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过 AJAX功能，调用一个Web Service来完成职员表中的数据增、删、改、查。

创建一个Web Service

作为开始，使用Visual Studio 2005创建一个新的Web站点，注意把 AJAX项目模板添加到新站点对话框，这个对话框包括一个" AJAX Enabled Web Site" 模板。

图1：新站点创建模板

使用" AJAX Enabled Web Site" 模板创建的新站点和用普通方法创建的站点区别如下：

·它的自动包括许多 AJAX专用的配置信息。 ·ions程序集被添加到引用中。

当然，我们可以更改一个普通的Web站点，以使之符合AJAX要求，但模板可以大大简化我们的工作。

现在我们创建了一个新的Web站点，添加一个新的web service并命名为，EmployeeService将包括5个Web方法

Method Name

GetEmployees()

GetEmployee()

Insert()

Update()

Delete()

表1：EmployeeService中的Web方法

GetEmployees() 和 GetEmployee()方法以Employee对象的形式返回数据，因此，首先创建一个Employee类。右键单击App_Code文件夹，选择“添加新项…”，添加一个叫Employee的类，下面显示Employee类的全部代码：

public class Employee

{

private int intEmployeeID;

private string strFirstName;

private string strLastName;

public int EmployeeID

{

Description

返回Employees表里的雇员列表。这个列表是一个Employee对象数组

接收EmployeeID参数返回Employee对象的详细信息

给Employees表里增加一个新的雇员信息

更新Employees表里的某个雇员信息

删除Employees表里的某个雇员信息

get

{

return intEmployeeID;

}

set

{

intEmployeeID = value;

}

public string FirstName

{

get {

return strFirstName;

}

set

{

strFirstName = value;

}

public string LastName

{

get

{

return strLastName;

}

set

{

strLastName = value;

}

Employee类申明三个Private变量来分别存放employee ID, first name和 last name，三个变量再封装在三个public属性中：EmployeeID, FirstName和LastName。

打开文件，添加部分如下：

"data source=.sqlexpress;

initial catalog=northwind;

integrated security=true"/>

这部分存放数据库链接字符串，用于指向Northwind数据库，确保修改SqlServer名称、IP地址以及验证方式以和我们的开发环境相符。

现在，打开添加如下代码：

private string strConn = "";

public EmployeeService() {

strConn = tionStrings["connstr"].

ConnectionString;

}

代码使用了ConfigurationManager类来读取配置文件中的数据库链接字符串，并存放在一个类级别的变量strConn中，这个变量将被下面的所有Web Method所使用。

现在，添加GetEmployees() web method：

[WebMethod]

public Employee[] GetEmployees()

{

SqlConnection cnn = new SqlConnection(strConn);

();

SqlCommand cmd = new SqlCommand();

tion = cnn;

dText = "select employeeid,firstname,

lastname from employees";

SqlDataReader reader = eReader();

List list = new List();

while (())

{

Employee emp = new Employee();

eeID = 32(0);

ame = ing(1);

me = ing(2);

(emp);

}

();

return y();

}

代码创建了SqlConnection and SqlCommand 对象，然后执行SELECT查询，以获取Employees表中EmployeeID,

FirstName 和LastName字段。结果通过SqlDataReader返回。然后，创建一个generic-based Employee数组，通过While循环，给每个Employee实例的属性赋值。当While循环完毕的时候，关闭SqlDataReader 和

SqlConnection。GetEmployees()方法返回的类型是Employee数组。因此，generic List使用List类中的ToArray()方法来转换成Employee数组。

现在，添加一个GetEmployee() web method如下： [WebMethod]

public Employee GetEmployee(int pEmployeeId)

{

SqlConnection cnn = new SqlConnection(strConn);

();

SqlCommand cmd = new SqlCommand();

tion = cnn;

dText = "select employeeid,firstname,lastname

from employees where employeeid=@id";

SqlParameter id = new SqlParameter("@id", pEmployeeId);

(id);

SqlDataReader reader = eReader();

Employee emp = new Employee();

while (())

{

eeID = 32(0);

ame = ing(1);

me = ing(2);

}

();

return emp;

}

GetEmployee() web method接受一个employee ID参数作为输入，代码和前面的非常相似，但这次只返回一个employee。注意，使用SqlParameter来定义传入的EmployeeID。

现在，再添加Insert()、Update()和 Delete()web methods，其中，Insert() web method 以要添加的Employee的 first

name 和 last name 作为参数，Update() web method 以要更新的employee ID 以及新的first name 和 last

name作为参数，并执行UPDATE语句， Delete() web method 以要删除的employee ID 作为参数，然后执行DELETE 语句

[WebMethod]

public int Insert(string pFirstName, string pLastName)

{

SqlConnection cnn = new SqlConnection(strConn);

();

SqlCommand cmd = new SqlCommand();

tion = cnn;

dText = "insert into employees(firstname,lastname)

values (@fname,@lname)";

SqlParameter fname = new SqlParameter("@fname", pFirstName); SqlParameter lname = new SqlParameter("@lname", pLastName);

(fname);

(lname);

int i = eNonQuery();

();

return i;

}

[WebMethod]

public int Update(int pEmployeeId,string pFirstName, string pLastName)

{

SqlConnection cnn = new SqlConnection(strConn);

();

SqlCommand cmd = new SqlCommand();

tion = cnn;

dText = "update employees set firstname=@fname,

lastname=@lname where employeeid=@id";

SqlParameter fname = new SqlParameter("@fname", pFirstName);

SqlParameter lname = new SqlParameter("@lname", pLastName);

SqlParameter id = new SqlParameter("@id", pEmployeeId);

(fname);

(lname);

(id);

int i = eNonQuery();

();

return i;

}

[WebMethod]

public int Delete(int pEmployeeId)

{

SqlConnection cnn = new SqlConnection(strConn);

();

SqlCommand cmd = new SqlCommand();

tion = cnn;

dText = "delete from employees where employeeid=@id";

SqlParameter id = new SqlParameter("@id", pEmployeeId);

(id);

int i = eNonQuery();

();

return i;

}

这就完成了web service的创建。到目前为止，还没有做任何和AJAX特性相关的任何工作，现在，时机已经成熟，我们通过下面的代码更改web service类的定义：

using es;

[WebService(Namespace = "/")]

[WebServiceBinding(ConformsTo = rofile1_1)]

[ScriptService]

public class EmployeeService : vice

{

注意特地标明的黑体字，我们导入了es命名空间，这个命名空间来自ions程序集，这个命名空间提供了[ScriptService]属性，这将使web service可以被来自客户端的JavaScript (如 AJAX)调用。

好了，我们开始准备从 AJAX调用Web Service了！

如何调用Web Service

这部分，我们将创建一个Web页面作为数据输入，通过调用刚刚创建的Web Service来操作Employees表。作为开始，我们先添加一个页面，打开工具箱，选择View > Toolbox菜单，在工具箱上，选中AJAX Extensions这样的节点（见图2）

图 2: 增加模板后的新站点创建对话框

AJAX Extensions部分显示一个Web页面上所有可以使用的 AJAX组件。所有使用 AJAX的页面都需要一个ScriptManager组件。打开ScriptManager属性窗口，定位Services属性，打开Service引用编辑器，如图3：图 3: Service 引用编辑器

点击对话框底部的Add按钮，设置Path属性以指向Web Service（）的虚拟路径，下面的标记将会产生在Web页面文件中：

对每个Web Service调用，都需要在部分添加一个元素，此标记把要使用的web service注册到当前web form上。

图 4: 设计页面表单

表单包括一个下拉框(

Text="First Name :">

Text="Last Name :">

注意：我们没有使用服务器端控件，如DropDownList、 TextBox 以及 Button。取而代之的是，我们用的传统的HTML控件，如：。这因为我们要想通过客户端JavaScript调用web

service，而不是通过服务端代码。同理，注意底下的标记，这是用来显示成功或者失败的信息的。

下一步，在元素内增加一个