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.

Tomislav Markovski · Accepted Answer · 2012-01-16 14:42:58Z

5

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()
{
}

edited Jan 16, 2012 at 14:42

answered Jan 16, 2012 at 14:26

Tomislav Markovski

12.4k7 gold badges53 silver badges75 bronze badges

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

3 Comments

mktwo Over a year ago

I think I can follow so far, but I really don't get how JSON serialization works, I'm guessing I use [Serializable] for the class with the WebMethods?

Tomislav Markovski Over a year ago

Simply return the object and ASP.NET will convert it for you. Here's an example how to send JSON back to a web method. stackoverflow.com/questions/1527422/send-json-to-webmethod

Tomislav Markovski Over a year ago

See my Edit for ScriptMethod attribute to control response type.

Shyju · Accepted Answer · 2012-01-16 14:39:40Z

1

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.

edited Jan 16, 2012 at 14:39

answered Jan 16, 2012 at 14:18

Shyju

220k106 gold badges420 silver badges499 bronze badges

8 Comments

mktwo Over a year ago

Well, that's the thing, I thought about that, but I'm not sure I can read those Ids from anywhere on that page. It's my _Layout.cshtml so I can't pass it a different model to be able to get to those Ids.

Shyju Over a year ago

Is this ASP.NET MVC ? Then you should be able to do Model Binding for ajax requests

mktwo Over a year ago

Yes, this is MVC3, but with 'Model Binding for ajax requests', do you mean I can bind a model NOT to the entire page, but to just the ajax bits? Because binding the needed model to the page is not really usable for me, because the page expects a LogOnModel.

mktwo Over a year ago

I've made a ViewModel, but how do I pass the LogOnModel to the page?

mktwo Over a year ago

Clarification: How do I pass the LogOnModel from the ViewModel to only the @Html.Partial("_LogonPartial")? I've tried to just make it @Html.Partial("_LogonPartial", Model.LogOnModel) but when I load up the page it says that the reference's not set to an instance of an object..

|

mktwo · Accepted Answer · 2012-01-19 10:30:01Z

0

Well, finally figured it out with a little help from my brother and some good old fashioned exercise! I solved the issue by using a controller instead of a code-behind with WebMethods.

edited Jan 19, 2012 at 10:30

answered Jan 16, 2012 at 22:35

mktwo

631 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related