Jquery 调用asp.net ajax (web service/static page method)的示例(二)---复杂参数

示例二（复杂参数的情况）

    对于这种情况下的调用，客户端使用到一个小技巧，即：创建DTO 对象 （Data transfer object  ）,个人常称之为 JSON包装对象

前台页面 代码 UseDTO.aspx (示例代码是含有一个masterpage的content page ,master page 里面引用了Jquery 的脚本):

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="UseDTO.aspx.cs" Inherits="jAjax_UseDTO" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script src="../Scripts/json2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            $("#btnSave").click(function () {
                var entry = {};
                //var selector = "input[type='text'],textarea,input[type=hidden],input[type=radio]:checked,select option:selected";
                var selector = "input[type='text'],input[type=hidden],input[type=radio]";
                $(selector).each(function () {
                    var $this = $(this);
                    entry[this.id] = $this.val(); //this.value;
                });

                $("select").each(function (index) {
                    var $this = $(this);
                    entry[this.id] = $("option:selected", $this).val();

                });

                entry["ContactInfo"] = {};
                entry["ContactInfo"]["ZipCode"] = $("#ZipCode").val();
                entry["ContactInfo"]["ContactAddr"] = $("#Address").val();
                /* 
                var dto = { "data": entry };     
                callService(dto,'SaveCustomer');   //服务端的方法接受单个参数
                */
                var dto2 = { "cust": entry, "addr": entry["ContactInfo"] };
                callService(dto2, 'SaveCustomer2');   //服务端的方法接受两个个参数

            });
        });


        function callService(dto, method) {
            $.ajax({
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(dto),
                type: 'POST',
                url: 'UseDTO.aspx/' + method,
                success: function (response) {
                    alert(response.d.Name);
                },
                error: function (response) {
                    alert(response.statusText);
                }
            });
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <h2>
        use this page to test DTO for consuming ajax scripting service</h2>
    <hr />
    <label>用户号</label>
    <input id="Id" type="text" value="" />
    <label>用户名</label>
    <input id="Name" type="text" value="" />
    <br />
    <label>性别</label>
    <select id="Sex">
        <option value="0" selected="selected">男</option>
        <option value="1">女</option>
    </select>
    <br />
    ZipCode<label>邮编</label>
    <input id="ZipCode" type="text" value="" />
    <label>地址</label>
    <input id="Address" type="text" value="" />
    <br />
    <input id="btnSave" type="button" value="提交" />
</asp:Content>

服务器端代码 UseDTO.aspx.cs   （ 这回的示例是调用page method，其实和调用WS方法是类似的）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class jAjax_UseDTO : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }



    [WebMethod]
    public static Customer SaveCustomer(Customer data)
    {
        Console.WriteLine("serve it !");
        data.Name = data.Name + DateTime.Now.ToString();
        return data;
    }

    [WebMethod]
    public static Customer SaveCustomer2(Customer cust, Address addr)
    {
        addr.ContactAddr = "new address";
        cust.ContactInfo = addr;
        return cust;
    }

   // 如果是这个函数，JS能正确调用到吗？ 读者可以自己试试！呵呵
    //[WebMethod]
    //public static void SaveCustomer(object data)
    //{
    //    if (data.GetType() == typeof(Dictionary<string, object>))
    //    {
    //        Dictionary<string, object> paras = data as Dictionary<string, object>;
    //        foreach (string key in paras.Keys)
    //        {
    //            System.Diagnostics.Debug.WriteLine("Key={0} ,Value= {1}", key, paras[key]);
    //        }
    //    }


    //}

}

参考 asp.net ajax 关于ajax 调用的限制：

http://blog.csdn.net/cooleader320/article/details/7745488