当前位置:首页 > ASP.NET AJAX客户端编程教程(3)——让JavaScript和C#无障碍沟通:数据类型自动转换&序列化

ASP.NET AJAX客户端编程教程(3)——让JavaScript和C#无障碍沟通:数据类型自动转换&序列化

点击次数:1264  更新日期:2010-12-31
\n

摘要


\n

通过前两篇文章,我们知道使用了ASP.NET AJAX框架后,在JavaScript中调用后台WebService方法非常方便,几乎可以看做是“直接调用”。那么,这里引出了一个问题:调用方法就牵扯到参数的传递,而JavaScript和C#毕竟是两种不同的语言,数据类型怎么沟通?简单型数据类型还好说,如果我们需要的参数是个复杂类型呢?如分层架构中经常用到实体类做参数,我们在后台定义实体类类型,但是JavaScript可不知道这种定义,也没有相应数据类型,那么要如何解决这个问题呢?再进一步,如果需要的参数是个泛型集合呢?在JavaScript中又要如何表示这种类型?这一篇将解决这些问题。


\n

先来看ASP.NET AJAX给你变个魔术


\n

我们都知道,使用分层架构开发系统时,使用实体类作为参数很很普遍的。那么如果我们需要调用的某个后台方法中需要实体类做参数,应该如何进行呢?毕竟C#中定义的实体类在JavaScript中可不认识啊。先不要着急,跟我做以下几步,我们一起来看个魔术。


\n

1.新建一个ASP.NET AJAX Enabled Web Site工程,并添加系统文件夹App_Code。


\n

2.我们在App_Code里新建一个C#类文件StudentInfo.cs,其内容如下:


\n

StudentInfo.cs:


\n

1using System;
2
3[Serializable]
4public class StudentInfo
5{
6 private string _name;
7 private int _age;
8 private string _college;
9
10 public StudentInfo() { }
11
12 public string Name
13 {
14 get { return this._name; }
15 set { this._name = value; }
16 }
17
18 public int Age
19 {
20 get { return this._age; }
21 set { this._age = value; }
22 }
23
24 public string College
25 {
26 get { return this._college; }
27 set { this._college = value; }
28 }
29}


\n

这是一个典型的实体类,相信做过分层架构的朋友一定经常使用到类似的代码。这里要特别注意两点:一是这个类上面有一个[Serializeable]属性,这表明此类可以被序列化,另外就是这个类有一个空的构造函数。


\n

3.接着,我们在网站根目录下添加一个WebService:StudentService.asmx,其代码如下:


\n

StudentService.cs:


\n

1using System;
2using System.Web;
3using System.Collections;
4using System.Web.Services;
5using System.Web.Services.Protocols;
6using System.Web.Script.Services;
7
8[WebService(Namespace = "http://tempuri.org/")]
9[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10[ScriptService]
11[GenerateScriptType(typeof(StudentInfo))]
12public class StudentService : System.Web.Services.WebService
13{
14 public StudentService() { }
15
16 [WebMethod]
17 public string ShowStudentInfo(StudentInfo student)
18 {
19 return “学生姓名:” + student.Name + “<br />年龄:” + student.Age + “<br />所在院系:” + student.College;
20 }
21}


\n

ShowStudentInfo这个方法接收一个StudentInfo类型的参数,并根据这个实体类的信息组合成一段字符串返回。


\n

4.接着,在网站根目录下新建一个ajax.js文件,内容如下:


\n

ajax.js:


\n

1function btnShowStudentInfo_onClick()
2{
3 var student=new StudentInfo();
4 student.Name=”张无忌”;
5 student.Age=”20″;
6 student.College=”计算机学院”;
7
8 StudentService.ShowStudentInfo(student,CallBackFunction);
9}
10
11function CallBackFunction(responseText)
12{
13 get(“result”).innerHTML=responseText;
14}


\n

这里我们大胆的直接初始化了一个StudentInfo,为什么说大胆呢?不要忘了,我们的StudentInfo类型可是在C#中定义的,JavaScript里可压根没有这个类型,当时我们这里却好像在写C#似的,不但初始化了这个类,还给其中成员赋值,并且当作参数传给了后台方法。这样能成功吗?我们接着看看吧。


\n

5.Default.aspx作为主页,我们添加如下内容:


\n

Default.aspx:


\n

1<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
2
3<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
4<html xmlns=”http://www.w3.org/1999/xhtml”>
5<head runat=”server”>
6 <title>复杂类型自动转换测试http://dwww.cn </title>
7</head>
8<body>
9 <form id=”form1″ runat=”server”>
10 <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
11 <Scripts>
12 <asp:ScriptReference Path=”~/ajax.js” />
13 </Scripts>
14 <Services>
15 <asp:ServiceReference Path=”~/StudentService.asmx” />
16 </Services>
17 </asp:ScriptManager>
18 <div>
19 <input id=”btnShowStudentInfo” type=”button” value=”ShowStudentInfo” onclick=”btnShowStudentInfo_onClick()” />
20 <div id=”result”></div>
21 </div>
22 </form>
23</body>
24</html>


\n

这里就不用做过多解释了,看过前两篇的朋友肯定很容易就明白这段代码是什么意思。运行后,我们单击按钮,得到如下效果:


\n

\n