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 调用的限制：

/article/9217260.html