ASP.Net, Ajax and Web Services Using Non-primitive Method Parameters

I've seen quite a few examples on communicating with web services from JavaScript code placed in ASPX pages. This morning I came back to work and decided to rework an existing example of my company's web service API so that it uses this feature set. In the process it occurred to me that our API has certain methods that require the passing of non-primitive data types (for example, a search critera object a-la CSLA, which is a whole other conversation). I did a little Googling and came up with very little, placing me once again into "try it and see" mode. The good news, there's very little work to be done on your part, as most of this stuff gets automagically serialized by the framework. So do the snoopy dance while you're reading this tutorial, because this is one of those magical times when the framework works wonders for us.

Take a look at this C# code, which embodies a relatively simplistic web service. In particular, take note of the custom BankAccount class, which we'll be using in our example to prove the point.

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;




public class BankService : WebService


    [WebMethod, ScriptMethod]

    public BankAccount GetAccountById(int id)


        BankAccount b = new BankAccount();

        b.AccountId = id;

        b.Balance = 3443.23D;

        return b;



    [WebMethod, ScriptMethod]

    public bool DeleteBankAccount(BankAccount account)


        if (account.AccountId == 1) return false;

        return true;




public class BankAccount


    public double Balance;

    public int AccountId;



Not too real-world of an example service, of course, but it'll do for now.

In addition, we've got to examine our ASPX code. I'll take a top-down approach to this examination, covering each fragment individually. This first segment shows the beginning of the ASPX client page, where you can see that the ScriptManager is being used to inform our page that we have a ScriptService (our web service from earlier) with which the page will be communicating.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">

<html xmlns="">

<head runat="server">

    <title>Untitled Page</title>



    <form id="form1" runat="server">


        <asp:ScriptManager ID="ScriptManager1" runat="server">


                <asp:ServiceReference Path="~/BankService.asmx" />



Notice in particular the bolded section in the code above. That Path attribute points to the URL of the web service the page will use to "do stuff" on the server. Without it things just won't function (I mention this because I've seen quite a few examples that leave it out entirely). Next  we'll have a little more HTML code to place our elements nicely about the page and to give the user some clues as to how to use the page:

        <input type="button" onclick="getAccount();" value="Get Account" /><br />

        <input type="button" onclick="deleteAccount();" value="Delete Account" /><br />


        <div style="width: 200px; font-family: Arial;">


            <div id="accountLbl" style="float: left;">Account Id:</div>

            <div id="accountId" style="color:red; float:right;"></div>

            <br />


            <div id="balanceLbl" style="float: left;">Balance:</div>

            <div id="balance" style="color:red; float:right;"></div>

            <br />


            <div id="resultLbl" style="float: left;">Result:</div>

            <div id="delResult" style="color:red; float:right;"></div>

            <br />



Not too much going on until we see the final piece, the JavaScript that ties it all together. Note in particular again the bolded code below. It creates a variable of type BankAccount so that our delete functionality will work properly.

        <script language="javascript" type="text/javascript">

        function getAccount()





        function getAccountCallback(result)


            $get("accountId").innerHTML = result.AccountId;

            $get("balance").innerHTML = result.Balance;



        function deleteAccount()


            var account = new BankAccount();

            account.AccountId = 1;




        function deleteAccountCallback(result)


            delResult.innerHTML = result;







As you can see, the ASP.Net Ajax extensions automatically serialize everything in your web service so that you have access to everything as simplistically as you would in C#. Just create the object as you normally would, set the instance's properties by name, and send the message! 

Happy coding!