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