ASP.NET和AJAX简洁教程

介绍

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

软件需求

本文所有的范例都是使用https://www.doczj.com/doc/67934527.html, AJAX RC版，而且，要在SQL Server 2005 (Express版即可)上有一个Northwind数据库。范例使用Visual Studio 2005作为开发环境。

范例场景

范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过https://www.doczj.com/doc/67934527.html, AJAX功能，调用一个Web Service来完成职员表中的数据增、删、改、查。

创建一个Web Service

作为开始，使用Visual Studio 2005创建一个新的Web站点，注意把https://www.doczj.com/doc/67934527.html, AJAX项目模板添加到新站点对话框，这个对话框包括一个"https://www.doczj.com/doc/67934527.html, AJAX Enabled Web Site" 模板。

图1：新站点创建模板

使用"https://www.doczj.com/doc/67934527.html, AJAX Enabled Web Site" 模板创建的新站点和用普通方法创建的站点区别如下：·它的Web.config自动包括许多https://www.doczj.com/doc/67934527.html, AJAX专用的配置信息。

·System.Web.Extensions程序集被添加到引用中。

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

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

Method Name Description

GetEmployees() 返回Employees表里的雇员列表。这个列表是一个

Employee对象数组

GetEmployee() 接收EmployeeID参数返回Employee对象的详细信息Insert() 给Employees表里增加一个新的雇员信息

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

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

表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

{

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。

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

"data source=.\sqlexpress;

initial catalog=northwind;

integrated security=true"/>

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

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

private string strConn = "";

public EmployeeService()

{

strConn = ConfigurationManager.ConnectionStrings["connstr"].

ConnectionString;

}

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

现在，添加GetEmployees() web method：

[WebMethod]

public Employee[] GetEmployees()

{

SqlConnection cnn = new SqlConnection(strConn);

cnn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = cnn;

https://www.doczj.com/doc/67934527.html,mandText = "select employeeid,firstname,

lastname from employees";

SqlDataReader reader = cmd.ExecuteReader();

List list = new List();

while (reader.Read())

{

Employee emp = new Employee();

emp.EmployeeID = reader.GetInt32(0);

emp.FirstName = reader.GetString(1);

https://www.doczj.com/doc/67934527.html,stName = reader.GetString(2);

list.Add(emp);

}

reader.Close();

cnn.Close();

return list.ToArray();

}

代码创建了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);

cnn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = cnn;

https://www.doczj.com/doc/67934527.html,mandText = "select employeeid,firstname,lastname

from employees where employeeid=@id";

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

cmd.Parameters.Add(id);

SqlDataReader reader = cmd.ExecuteReader();

Employee emp = new Employee();

while (reader.Read())

{

emp.EmployeeID = reader.GetInt32(0);

emp.FirstName = reader.GetString(1);

https://www.doczj.com/doc/67934527.html,stName = reader.GetString(2);

}

reader.Close();

cnn.Close();

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作为参数，并执行UPDA TE语句，Delete() web method 以要删除的employee ID 作为参数，然后执行DELETE 语句

[WebMethod]

public int Insert(string pFirstName, string pLastName)

{

SqlConnection cnn = new SqlConnection(strConn);

cnn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = cnn;

https://www.doczj.com/doc/67934527.html,mandText = "insert into employees(firstname,lastname)

values (@fname,@lname)";

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

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

cmd.Parameters.Add(fname);

cmd.Parameters.Add(lname);

int i = cmd.ExecuteNonQuery();

cnn.Close();

return i;

}

[WebMethod]

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

{

SqlConnection cnn = new SqlConnection(strConn);

cnn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = cnn;

https://www.doczj.com/doc/67934527.html,mandText = "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);

cmd.Parameters.Add(fname);

cmd.Parameters.Add(lname);

cmd.Parameters.Add(id);

int i = cmd.ExecuteNonQuery();

cnn.Close();

return i;

}

[WebMethod]

public int Delete(int pEmployeeId)

{

SqlConnection cnn = new SqlConnection(strConn);

cnn.Open();

SqlCommand cmd = new SqlCommand();

cmd.Connection = cnn;

https://www.doczj.com/doc/67934527.html,mandText = "delete from employees where employeeid=@id";

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

cmd.Parameters.Add(id);

int i = cmd.ExecuteNonQuery();

cnn.Close();

return i;

}

这就完成了web service的创建。到目前为止，还没有做任何和AJAX特性相关的任何工作，现在，时机已经

成熟，我们通过下面的代码更改web service类的定义：

using System.Web.Script.Services;

[WebService(Namespace = "https://www.doczj.com/doc/67934527.html,/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class EmployeeService : System.Web.Services.WebService

{

注意特地标明的黑体字，我们导入了System.Web.Script.Services命名空间，这个命名空间来自System.Web.Extensions程序集，这个命名空间提供了[ScriptService]属性，这将使web service可以被来自客户端的JavaScript (如https://www.doczj.com/doc/67934527.html, AJAX)调用。

好了，我们开始准备从https://www.doczj.com/doc/67934527.html, AJAX调用Web Service了！

如何调用Web Service

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

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

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

图3: Service 引用编辑器

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

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

图4: 设计页面表单

表单包括一个下拉框() ，用于显示所有的employee IDs，一旦选中其中一个employee ID，employee 的详细信息将显示在2个文本框中，然后可以更新这些信息。如果要添加一个employee，只需要输入first name 和last name，然后点击“插入”按钮就可以了。同理，如果要删除一个employee，选择下拉框中的employee ID，点击“删除”按钮。在INSERT、UPDA TE或者DELETE操作完成后，将会显示成功或者失败的信息。下面是所有的页面代码：

Text="Employee Management">
Text="Employee ID :">
Text="First Name :">
Text="Last Name :">

注意：我们没有使用https://www.doczj.com/doc/67934527.html,服务器端控件，如DropDownList、TextBox 以及Button。取而代之的是，我们用的传统的HTML控件，如：

以及。这因为我们要想通过客户端JavaScript调用web service，而不是通过服务端代码。同理，注意底下的标记，这是用来显示成功或者失败的信息的。

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