Javascript Object pass to ASP.NET Handler

Question

How do pass a JavaScript object into ASP.NET Handler and parse the values?

I have created an Complex type object like:

function AccountObjCreate() {
var AccountsView = {};
AccountsView.Username = null;
AccountsView.Email = null;
AccountsView.Password = null;

return AccountsView;
}

And fill that object like:

var aView = AccountObjCreate();
aView.Username = $('#tbUserName').val().trim();
aView.Email = $('#tbEmail').val().trim().toLowerCase();
aView.Password = $('#tbPassword').val().trim();

Then I am calling:

$.post("/Handlers/AccountHandler.ashx", { obj: aView },
        function (results) {
            if (results.isSuccess) {
                alert(results.msg);
            } else {
                alert(results.msg);
            }
        }, "json");

When I view it in the console I see all my data within aView as json.

My ASP.NET Handler page is

context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
string obj = context.Request["obj"];

But the obj is NULL.

Answer 1

In order to get the object through to the server you should serialize it into a string (you could use the method described here or include the JSON library for javascript here) and then deserialize it using the .NET JavaScriptSerializer class.

JS code.

var data = {
    obj: JSON.stringify(aView)
};
$.post("/Handlers/AccountHandler.ashx", data, function(results) {
    if (results.isSuccess) {
        alert(results.msg);
    } else {
        alert(results.msg);
    }
}, "json");​

Then on the server handler you can parse the JSON string with the mentioned JavaScriptSerializer class.

public class AccountsView {
    public string Username;
    public string Email;
    public string Password;
}

public void ProcessRequest(HttpContext context)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string value = context.Request["obj"];
    var aView = serializer.Deserialize(value, typeof(AccountsView));

    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = Encoding.UTF8;
}

Answer 2

jQuery doesn't automatically stringify objects for you. You have to do it yourself.

Download this: https://github.com/douglascrockford/JSON-js

Add the script reference to your HTML and change your $.post call to:

$.post("/Handlers/AccountHandler.ashx", { obj: JSON.stringify(aView, null, 2) }...

Also the ContentType is incorrect. I'd just leave it as the default. While you will be submitting JSON data in this manner the ContentType itself is not JSON. The content type is going to be regular post data. This is post data:

obj={"Username":"MyUsername", "Password":"MyPassword"...

this is JSON

{"obj":{"Username":"MyUsername", "Password":"MyPassword"...

It can get kind of confusing sometimes.

A better approach would be to look into ASP.Net MVC. The Controller Methods are able to automatically deserialize JSON objects into .Net models so you can do this on your client side code:

$.post("/Handlers/AccountHandler.ashx", JSON.stringify({ view: aView }, null, 2) }...

Write a .Net class that matches aView's structure:

class Account { 
    public string Username { get; set; } 
    public string Password { get; set; }
    public string Email { get; set; }
}

And then define a controller method like so:

public JsonResult SaveAccount(Account view)

Makes things a lot simpler. :)