Getting a complex object through jQuery/ajax in ASP.NET

Question

Here's my situation: I have a UserBadge object in ASP.NET, it contains 3 fields, being a User object, a Badge object and a boolean (isNotified) to check if the user has been notified of earning a badge. I'm having issues sending a specific UserBadge from this WebMethod():

[WebMethod()]
    public static UserBadge Notify()
    {
        var db = new achievDb();

        foreach (var uB in db.UserBadges)
        {
            if (System.Web.HttpContext.Current.User.Identity.Name == uB.User.UserName)
            {
                if (!uB.isNotified)
                {
                    return uB;
                }
            }
        }
        return null;
    }

to my $.ajax:

<script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "../NotifCodeBehind.aspx/Notify",
                    data: "{}",
                    complete: function (result) {
                        if (result) {
                            $("#notify").jGrowl("You've unlocked a badge!", { header: 'Yay', close: function () {
                                $.ajax({
                                    type: "POST",
                                    url: "../NotifCodeBehind.aspx/Notified",
                                    data: "{}",
                                    success: function (ub) { DoCallback(JSON.stringify(ub)); },
                                    error: function () { DoCallback("NOPE!") }
                                });
                            }
                            })

                        };
                        function DoCallback(msg) {
                            alert(msg);
                        }
                    }
                })
            })
        </script>

and then back to another WebMethod() that sets the isNotified boolean to true once the notification is closed:

    [WebMethod()]
    public static void Notified(UserBadge ub)
    {
        var db = new achievDb();

            foreach (var userbadge in db.UserBadges)
            {
                if (userbadge.UserId == ub.UserId && userbadge.BadgeId == ub.UserId)
                {
                    userbadge.isNotified = true;
                    db.SaveChanges();
                }
        }
    }

The Problem: I have absolutely no idea how to actually pass the object to the ajax, and then back again... I've spent about 1,5 days browsing the internet about it, but now, I've decided to come for help. The more I read about it, the more it confuses me, and I'm an absolute newbie to jQuery/Ajax/JSON.

So if you could keep it as simple as possible, and nudge me in the right direction, it would be most appreciated!

EDIT: New JavaScript below, thought I had it, but I didn't.

EDIT2: This is now solved, I ended up using a controller instead of WebMethods.

Answer 1

You want to work with JSON serialization. When you return the result to your ajax callback method, your web method can return result in form of XML, JSON or string. If you return a JSON, your complex object will be converted to a json object in a very straight forward manner.

Assuming your class structure

class UserBadge
{
    User UserProperty { get; set; }
    Badge BadgeProperty { get; set; }
    bool IsNotified { get; set; }
}

class User
{
    string Username { get; set; }
}

Your json object in javascript from the result callback function will look like

{ 
  UserProperty: { Username: "some username" },
  BadgeProperty: { /**********/ },
  IsNotified: true 
}

As you can see, your JSON structure is the same as your class object structure. So, calling result.UserProperty.Username in javascript is perfectly ok. Constructing the same object and passing it to another ajax web service will transform the JSON object to the managed class objects.

Edit: You can add the ScriptMethodAttribute to your WebMethod to specify JSON response.

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static UserBadge Notify()
{
}

Answer 2

Do you really want to pass the object to your web method ? Why not pass the ids ( UserId, badgeId etc ) and Build the object in your ajax server page using those Id's if needed. You can pass the Id as the query string values.

var userId=4 // read from some hidden items or somewhere
var badgeid=3 // read from somewhere
$.ajax({
        type: "POST",
        url: "../NotifCodeBehind.aspx/Notify?uid="+userId+"&bid="+badgeId,
        data: "{}",
        complete: function (result) {

       // rest of the code

EDIT : From the Comment, its clear that it is an ASP.NET MVC App

Since it is an ASP.NET MVC application, You can do model binding. You can serialize your form and send that to the controller action via jquery post.

If your page is having a "LogOnMOdel" and you want to do this binding for the UserBadge object as well, you need to create another ViewModel which has 2 properties , one is LogonModel and another is UserBadge. then pass that view model to your page.