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里的对应位置，下断点来查看数据信息，具体信息请看提示。