VS2012 + .net 4.0 + WebService + Jquery 1.9.1 + ajax亲测不坑爹例子

这个测试内容比较复杂，按照以下步骤去做，对于老手来说，可能也需要半个小时左右。有任何问题，请加QQ群讨论：23152359

最终效果图:



步骤：

1.建立项目。

文件 -> 新建 -> 项目 -> 模板/Visual C#/Web/ASP.Net 空Web 应用程序，我用的是.net 4.0，在.net 4.5应该也一样。假设工程名字为 WebApplication3

2.增加WebService

解决方案资源管理器 -> 鼠标左键单击选中 WebApplication3 -> 对WebApplication3单击鼠标右键，在弹出的菜单中选择：添加 -> 新建项 -> Visual C#/Web/Web 服务 ，名称填 WebService1.asmx（默认就是这个名字） -> 添加

3.修改WebService1.asmx

上一步，添加后，会自动打开 WebService1.asmx.cs

3.1 看到这两行没？

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
// [System.Web.Script.Services.ScriptService]

把 [System.Web.Script.Services.ScriptService] 前面的注释删掉。

3.2 把WebService1.asmx.cs，修改为：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Diagnostics;

namespace WebApplication3
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()//不管这个
{
return "Hello World";
}

[WebMethod]
public void Test1_NoArg_NoReturn()//测试1：无参数，无返回
{
Debugger.Log(0, "", "Test1_NoArg_NoReturn被调用！！\r\n");//记得在调试时，打开输出面板，才能看到这句话。打开方法：在调试时，菜单 -> 视图 -> 输出
return;
}

[WebMethod]
public int Test2_NoArg_ReturnS1()//测试2：无参数，有返回（简单类型_单个）
{
return ((new Random()).Next());
}

[WebMethod]
public int[] Test3_ArgS1_ReturnSN(int arg_firstNumber)//测试3：有参数（简单类型_单个），有返回（简单类型_多个）
{
int[] intArray = new int[] { arg_firstNumber, (new Random()).Next(), (new Random()).Next(), (new Random()).Next(), (new Random()).Next() };
return intArray;
}

[WebMethod]
public Class_C Test4_ArgSN_ReturnC1(int[] arg_intValueArray)//测试4：有参数（简单类型_多个），有返回（复杂类型_单个）
{
Class_C result = new Class_C();
result.ID = arg_intValueArray.Length;
result.Name = "参数数量：" + result.ID.ToString() + "个";
result.IntArray = new int[arg_intValueArray.Length];
result.StringArray = new string[arg_intValueArray.Length];
for (int i = 0; i < arg_intValueArray.Length; i++)
{
result.IntArray[i] = arg_intValueArray[i];
result.StringArray[i] = "StringMode：" + arg_intValueArray[i].ToString();
}
return result;
}

[WebMethod]
public Class_C[] Test5_ArgC1_ReturnCN(Class_C arg_value)//测试5：有参数（复杂类型_单个）, 有返回（复杂类型_多个）
{
Class_C[] resultArray = new Class_C[arg_value.IntArray.Length];
for (int i = 0; i < arg_value.IntArray.Length; i++)
{
resultArray[i] = new Class_C();
resultArray[i].ID = i + 1;
resultArray[i].Name = "ID : " + resultArray[i].ID;
resultArray[i].IntArray = new int[]{1,2,3,4,5};
resultArray[i].StringArray = new string[]{"1", "2", "3", "4", "5"};
}
return resultArray;
}

[WebMethod]
public Class_X Test6_ArgCN_ReturnX1(Class_C[] arg_array)//测试6：有参数（复杂类型_多个）, 有返回（复合类型_单个）
{
Class_X result = new Class_X();
result.ID = arg_array.Length;
result.Name = "Name : " + result.ID.ToString();
int[] intArray = new int[arg_array.Length];
string[] stringArray = new string[arg_array.Length];
for (int i = 0; i < arg_array.Length; i++)
{
intArray[i] = arg_array[i].ID;
stringArray[i] = arg_array[i].Name;
}
result.IntArray = intArray;
result.StringArray = stringArray;
result.Data = new Class_C();
result.Data.ID = result.ID + 1;
result.Data.Name = "Result.Data : " + result.Data.ID.ToString();
result.Data.IntArray = result.IntArray.Clone() as int[];
result.Data.StringArray = result.StringArray.Clone() as string[];
return result;
}

[WebMethod]
public Class_X[] Test7_ArgX1_ReturnXN(Class_X arg_value)//测试7：有参数（复合类型_单个）, 有返回（复合类型_多个）
{
Class_X[] resultArray = new Class_X[arg_value.ID];
for (int i = 0; i < resultArray.Length; i++)
{
resultArray[i] = new Class_X();
resultArray[i].ID = i + 1;
resultArray[i].Name = "Name : " + resultArray[i].ID.ToString();
int[] intArray = new int[arg_value.ID];
string[] stringArray = new string[arg_value.ID];
for (int j = 0; j < arg_value.ID; j++)
{
intArray[j] = j + 1;
stringArray[j] = "ArrayMode : " + intArray[j].ToString();
}
resultArray[i].IntArray = intArray;
resultArray[i].StringArray = stringArray;
resultArray[i].Data = new Class_C();
resultArray[i].Data.ID = resultArray[i].ID + 1;
resultArray[i].Data.Name = "Result.Data : " + resultArray[i].Data.ID.ToString();
resultArray[i].Data.IntArray = resultArray[i].IntArray.Clone() as int[];
resultArray[i].Data.StringArray = resultArray[i].StringArray.Clone() as string[];
}
return resultArray;
}

[WebMethod]
public void Test8_ArgXN_NoReturn(Class_X[] arg_array)//测试8：有参数（复合类型_多个），无返回
{
Debugger.Log(0, "", "Test8_ArgXN_NoReturn：arg_array.Length = " + arg_array.Length.ToString() + "\r\n");
}

[WebMethod]
public void Test9_ArgMixAll_NoReturn(int arg_intValue, string arg_stringValue, Class_C arg_C1Value, Class_C[] arg_CNValue, Class_X arg_X1Value, Class_X[] arg_XNValue)//测试9：有参数（多个不同类型的参数），无返回
{
Debugger.Log(0, "", "Test9_ArgMixAll_NoReturn：Use Breakpoint\r\n");
}
}

[Serializable]
public class Class_C
{
public int ID { get; set; }
public string Name { get; set; }
public int[] IntArray { get; set; }
public string[] StringArray { get; set; }
}

[Serializable]
public class Class_X
{
public int ID { get; set; }
public string Name { get; set; }
public Class_C Data { get; set; }
public int[] IntArray { get; set; }
public string[] StringArray { get; set; }
}
}

4.去jquery官网，下载jquery-1.9.1.min.js，然后拖动到解决方案资源管理器的WebApplication3的目录下。拖动后，jquery-1.9.1.min.js应该与Web.config、WebService1.asmx在同一层次。

5.增加测试用网页

解决方案资源管理器 -> 鼠标左键单击选中 WebApplication3 -> 对WebApplication3单击鼠标右键，在弹出的菜单中选择：添加 -> 新建项 -> Visual C#/Web/HTML 页 ，名称填 HtmlPage1.html（默认就是这个名字） -> 添加

然后把HtmlPage1.html的内容，修改为：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#WebUI_Output {
height: 410px;
width: 1050px;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
<div>
<textarea id="WebUI_Output"></textarea>
<br />
<input type="button" value="Test1_NoArg_NoReturn" onclick="Event__Test1_NoArg_NoReturn()"/>
<br />
<input type="button" value="Test2_NoArg_ReturnS1" onclick="Event__Test2_NoArg_ReturnS1()"/>
<br />
<input type="button" value="Test3_ArgS1_ReturnSN" onclick="Event__Test3_ArgS1_ReturnSN()"/>
<br />
<input type="button" value="Test4_ArgSN_ReturnC1" onclick="Event__Test4_ArgSN_ReturnC1()"/>
<br />
<input type="button" value="Test5_ArgC1_ReturnCN" onclick="Event__Test5_ArgC1_ReturnCN()"/>
<br />
<input type="button" value="Test6_ArgCN_ReturnX1" onclick="Event__Test6_ArgCN_ReturnX1()"/>
<br />
<input type="button" value="Test7_ArgX1_ReturnXN" onclick="Event__Test7_ArgX1_ReturnXN()"/>
<br />
<input type="button" value="Test8_ArgXN_NoReturn" onclick="Event__Test8_ArgXN_NoReturn()"/>
<br />
<input type="button" value="Test9_ArgMixAll_NoReturn" onclick="Event__Test9_ArgMixAll_NoReturn()"/>
</div>
</body>
</html>

最后，在解决方案资源管理器里，对 HtmlPage1.html 单击鼠标右键，选“设为起始页”。

6.增加测试用JS文件

解决方案资源管理器 -> 鼠标左键单击选中 WebApplication3 -> 对WebApplication3单击鼠标右键，在弹出的菜单中选择：添加 -> 新建项 -> Visual C#/Web/JavaScript 文件 ，名称填 JavaScript.js -> 添加

然后把JavaScript.js的内容，修改为：

var Global_Config_URL = "/WebService1.asmx/";
var Global_Counter = 0;

function Output( arg_msg )
{
arg_msg = arg_msg.replace(/\\r\\n/g, "\r\n");
Global_Counter++;
$("#WebUI_Output").text("【" + Global_Counter.toString() + "】 " + arg_msg);
}

function OutputError(arg_errorMsg)
{
Output("遇到错误：" + arg_errorMsg);
}

function Event__Test1_NoArg_NoReturn()
{
var actionName = "Test1_NoArg_NoReturn";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
Output("调用成功");
}
}
$.ajax(options)
}

function Event__Test2_NoArg_ReturnS1()
{
var actionName = "Test2_NoArg_ReturnS1";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
Output("返回随机Int值：" + result.d);
}
}
$.ajax(options)
}

function Event__Test3_ArgS1_ReturnSN()
{
var actionName = "Test3_ArgS1_ReturnSN";
var arg_firstNumber = parseInt(Math.random() * 2100000000);
var arg_dataMode = "{ arg_firstNumber: " + arg_firstNumber.toString() + " }";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
Output("返回Int随机数组：" + result.d);
}
}
$.ajax(options)
}

function Event__Test4_ArgSN_ReturnC1()
{
var actionName = "Test4_ArgSN_ReturnC1";
var arg_randomNumberArray = [];
var arg_randomNumberArray_Length = 5;
for (var i = 0; i < arg_randomNumberArray_Length; i++)
{

arg_randomNumberArray.push(parseInt(Math.random() * 2100000000));
}
var arg_dataMode = "";
for (var i = 0; i < arg_randomNumberArray_Length; i++)
{
if( i == 0 )
{
arg_dataMode += "{ arg_intValueArray : [ ";
}
arg_dataMode += arg_randomNumberArray[i].toString();
if ( i != arg_randomNumberArray_Length - 1 )
{
arg_dataMode += ", ";
}
else
{
arg_dataMode += " ] }";
}
}
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
var debugMode_Result = result.d;//在这里下断点，来查看返回值。
Output("返回Class_C：具体数据请在JavaScript.js里通过Debug查看。");
}
}
$.ajax(options)
}

function Event__Test5_ArgC1_ReturnCN()
{
var actionName = "Test5_ArgC1_ReturnCN";
var arg_dataMode = "{ arg_value : { ID : 199, Name : 'Name 199', IntArray : [ 2, 4, 8, 256, 1024 ], StringArray : [ 'StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:256', 'StringMode:1024' ] } }";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
var debugMode_Result = result.d;//在这里下断点，来查看返回值。
Output("返回Class_C[]：具体数据请在JavaScript.js里通过Debug查看。");
}
}
$.ajax(options)
}

function Event__Test6_ArgCN_ReturnX1()
{
var actionName = "Test6_ArgCN_ReturnX1";
var arg_dataMode = "";
var arg_arrayLength = 5;
for (var i = 0; i < arg_arrayLength; i++)
{
if (i == 0)
{
arg_dataMode += "{ arg_array : [ ";
}
var currentDataMode = "{ ID : " + (i+1).toString() + ", Name : 'Name " + (i+1).toString() + "', IntArray : [ 2, 4, 8, 256, 1024 ], StringArray : [ 'StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:256', 'StringMode:1024' ] }";
arg_dataMode += currentDataMode;
if (i != arg_arrayLength - 1)
{
arg_dataMode += ", ";
}
else
{
arg_dataMode += " ] }";
}
}
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
var debugMode_Result = result.d;//在这里下断点，来查看返回值。
Output("返回Class_X：具体数据请在JavaScript.js里通过Debug查看。");
}
}
$.ajax(options)
}

function Event__Test7_ArgX1_ReturnXN()
{
var actionName = "Test7_ArgX1_ReturnXN";
var arg_dataMode = "{ arg_value : { ID : 399, Name : 'Name : 399', IntArray : [ 2, 4, 8, 128, 256 ], StringArray : [ 'StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:128', 'StringMode:256' ] } }";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
var debugMode_Result = result.d;//在这里下断点，来查看返回值。
Output("返回Class_X[]：具体数据请在JavaScript.js里通过Debug查看。");
}
}
$.ajax(options)
}

function Event__Test8_ArgXN_NoReturn()
{
var actionName = "Test8_ArgXN_NoReturn";
var arg_dataMode = "";
var arg_arrayLength = 5;
for (var i = 0; i < arg_arrayLength; i++)
{
if (i == 0)
{
arg_dataMode += "{ arg_array : [ ";
}
var currentDataMode = "{ ID: " + (i + 1).toString() + ", Name: 'Name : " + (i + 1).toString() + "', IntArray: [2, 4, 8, 128, 256], StringArray: ['StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:128', 'StringMode:256'] }";
arg_dataMode += currentDataMode;
if (i != arg_arrayLength - 1)
{
arg_dataMode += ", ";
}
else
{
arg_dataMode += " ] }";
}
}
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
Output("调用成功");
}
}
$.ajax(options)
}

function Event__Test9_ArgMixAll_NoReturn()
{
var actionName = "Test9_ArgMixAll_NoReturn";
var arg_dataMode = "";
//1.arg: intValue
var arg_intValue = "arg_intValue : 12345";
//2.arg: stringValue
var arg_stringValue = "arg_stringValue : 'StringMode:12345'";
//3.arg: Class_C C1Value
var arg_C1Value = "arg_C1Value : { ID : 900, Name : 'Name : 900', IntArray : [ 1, 2, 3, 4, 5 ], StringArray : [ 'StringMode:1', 'StringMode:2', 'StringMode:3', 'StringMode:4', 'StringMode:5' ] }";
//4.arg: Class_C[] CNValue
var arg_CNValue = "";
var arg_CNValueLength = 5;
for (var i = 0; i < arg_CNValueLength; i++)
{
if (i == 0)
{
arg_CNValue += "arg_CNValue : [ ";
}
var currentC1Value = "{ ID : " + (i + 1).toString() + ", Name : 'Name : " + (i + 1).toString() + "', IntArray : [ 4, 5, 6, 7, 8 ], StringArray : [ 'StringMode:4', 'StringMode:5', 'StringMode:6', 'StringMode:7', 'StringMode:8' ] }";
arg_CNValue += currentC1Value;
if (i != arg_CNValueLength - 1)
{
arg_CNValue += ", ";
}
else
{
arg_CNValue += " ]";
}
}
//5.arg: Class_X X1Value
var arg_X1Value = "arg_X1Value : { ID : 399, Name : 'Name : 399', IntArray : [ 2, 4, 8, 128, 256 ], StringArray : [ 'StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:128', 'StringMode:256' ] }";
//6.arg: Class_X[] XNValue
var arg_XNValue = "";
var arg_XNValueLength = 5;
for (var i = 0; i < arg_XNValueLength; i++)
{
if (i == 0)
{
arg_XNValue += "arg_XNValue : [ ";
}
var currentX1Value = "{ ID: " + (i + 1).toString() + ", Name: 'Name : " + (i + 1).toString() + "', IntArray: [2, 4, 8, 128, 256], StringArray: ['StringMode:2', 'StringMode:4', 'StringMode:8', 'StringMode:128', 'StringMode:256'] }";
arg_XNValue += currentX1Value;
if (i != arg_XNValueLength - 1)
{
arg_XNValue += ", ";
}
else
{
arg_XNValue += " ]";
}
}
//Mix ALL
arg_dataMode += "{ " + arg_intValue + ", " + arg_stringValue + ", " + arg_C1Value + ", " + arg_CNValue + ", " + arg_X1Value + ", " + arg_XNValue + " }";
var options =
{
type: "POST",
url: Global_Config_URL + actionName,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: arg_dataMode,
error: function (jqXHR, errorType, errorMsg)
{
OutputError(errorMsg + "，详细信息：" + jqXHR.responseText);
},
success: function (result, textArgs, jqXHRArg)
{
Output("调用成功");
}
}
$.ajax(options)
}

7.修改Web配置文件

由于测试方法中，有部分方法，从服务端返回到客户端的数据量比较大，因此需要修改一下默认Web配置文件，否则会报错说超过最大长度。

解决方案资源管理器 -> 鼠标左键双击 Web.config，然后把Web.config的内容，修改为：

<?xml version="1.0" encoding="utf-8"?>

<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=169433 -->

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="2100000000" />
</webServices>
</scripting>
</system.web.extensions>
</configuration>

8.现在，就可以在VS2012里进行调试了。

解决方案资源管理器 -> 鼠标左键单击选中 HtmlPage1.html，然后按F5开始调试。有些功能，需要在WebService1.asmx或JavaScript.js里的对应位置，下断点来查看数据信息，具体信息请看提示。