How can I send complex JavaScript object to ASP.net WebMethod?

Question

I'm trying send my client-side custom object (JavaScript) to ASP.net Web Method. I use jQuery Ajax command to perform this operation.

There a example of my object:

function Customer() {
    this.Name = "";
    this.Surname = "";

    this.Addresses = new Array();
}

I load data with this method:

function buildCurrentCustomer() {
    var currentCustomer = new Customer();

    /** General Info **/
    currentCustomer.Name = $("#Name").val();
    currentCustomer.Surname = $("#Surname").val();

    currentCustomer.Addresses = new Array();
    currentCustomer.Addresses["HOME"] = $("#adHome").val();
    currentCustomer.Addresses["OFFICE"] = $("#adOffice").val();

    return currentCustomer;
}

And finally I send data with this code:

$.ajax({
        type: "POST",
        url: "../_layouts/CustomerManager/MasterPage.aspx/SetCustomer",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{customer: " + JSON.stringify(currentCustomer) + "}",
        cache: false,
        success: function (result) {

        },
        error: function (ex) {
            WriteToConsole(ex.responseText);
        }
    });

My server-side methods is like that:

[WebMethod]
public static bool SetCustomer(CustomerModel Customer)
{
    //My code...
}

and my CustomerModel class is like that:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Common.Model.JavaScriptModel
{
    public class CustomerModel
    {
        /** General Info **/
        public string Name {get;set;}
        public string Surname {get;set;}

        public Dictionary<string, string> Addresses { get; set; }
    }
}

The problem is that when I execute Ajax Call server-side method doesn't execute. If I change signature of server-side method in:

public static bool SetCustomer(List<CustomerModel> Customer)

SetCustomer method is executed but the List is empty.

Why have I this problem? Where can I find documentation about this functionality?

Thanks

Kyojimaru · Accepted Answer · 2014-09-10 10:42:56Z

3

first, if you use the data like this

data: "{customer: " + JSON.stringify(currentCustomer) + "}",

on the code behind, you need to take the same parameter customer and not Customer, so this

public static bool SetCustomer(CustomerModel Customer) { ... }

needs to be changed to

public static bool SetCustomer(CustomerModel customer) { ... }

second, your Customer object in the javascript is like this if translated to asp.net

string Name;
string Surname;
List<string> Addresses;

but your class in the code behind for Addresses is using

Dictionary<string, string>

thus causing your data from client side can't be parsed in the server side and return an error to the client side, so you need to change your Addresses class to

public List<string> Addresses { get; set; }

and lastly, your code inside buildCurrentCustomer for the Addresses is being set like this

currentCustomer.Addresses = new Array();
currentCustomer.Addresses["HOME"] = $("#adHome").val();
currentCustomer.Addresses["OFFICE"] = $("#adOffice").val();

this will never add a value to Addresses since it's type is an array, but you set the value to it as if it was an object, so if you want to stick to use an array, you need to change it to

currentCustomer.Addresses = new Array();
currentCustomer.Addresses.push($("#adHome").val());
currentCustomer.Addresses.push($("#adOffice").val());

*Note:

use this if you want to use the Addresses as an array, but if you need the Addresses to be an object that contains HOME and OFFICE, I'll Edit the answer

Edit:

perhaps you can use a javascript object like this

currentCustomer.Addresses = {};
currentCustomer.Addresses["Home"] = $("#adHome").val();
currentCustomer.Addresses["Office"] = $("#adOffice").val();

to make the equivalent for Dictionary<string,string> but if it didn't work you could change your Addresses to class too like this

public List<Address> Addresses { get; set; }

and add class Address

public class Address
{
    public string Home {get;set;}
    public string Office {get;set;}
}

I myself never used a Dictionary myself, so I don't know if it's the same

edited Sep 10, 2014 at 10:42

answered Sep 10, 2014 at 10:09

Kyojimaru

2,7242 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ilMattion Over a year ago

Hi Kyojimaru. Thanks for your answer. About Addresses array I would something like Dictionary in C#. Exists in JavaScript?

Kyojimaru Over a year ago

@ilMattion, updated the answer of how to do it with an object not sure though if it can be used for Dictionary<string,string> or not

ilMattion Over a year ago

Hi Kyojimaru. Your edited answer help me to resolve my problem. Thanks a lot.

Dewz · Accepted Answer · 2014-09-10 10:41:36Z

You can change your source code like this..

AJAX-

data:  JSON.stringify({'customer':currentCustomer});

ASP.net Web Method-

 [WebMethod]
    public static bool SetCustomer(object customer)
    {
        CustomerModel CM = new CustomerModel();
        _Serializer = new JavaScriptSerializer();
        _StringBuilder = new StringBuilder();
        _Serializer.Serialize(customer, _StringBuilder);
        CM = _Serializer.Deserialize<CustomerModel>(_StringBuilder.ToString());
    }

Note that you have to initialize _Serializer and the _StringBuilder properties at the top of the page as global variables...

    public static JavaScriptSerializer _Serializer;
    public static StringBuilder _StringBuilder;

Collectives™ on Stack Overflow

How can I send complex JavaScript object to ASP.net WebMethod?

2 Answers 2

*Note:

Edit:

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

*Note:

Edit:

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related