title: Getting a complex object through jQuery/ajax in ASP.NET
body: <p>Here's my situation: I have a <code>UserBadge</code> object in ASP.NET, it contains 3 fields, being a <code>User</code> object, a <code>Badge</code> object and a <code>boolean</code> (isNotified) to check if the user has been notified of earning a badge. I'm having issues sending a specific <code>UserBadge</code> from this <code>WebMethod()</code>:</p>
  
  <pre><code>[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;
      }
  </code></pre>
  
  <p>to my <code>$.ajax</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(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);
                          }
                      }
                  })
              })
          &lt;/script&gt;
  </code></pre>
  
  <p>and then back to another <code>WebMethod()</code> that sets the <code>isNotified boolean</code> to true once the notification is closed:</p>
  
  <pre><code>    [WebMethod()]
      public static void Notified(UserBadge ub)
      {
          var db = new achievDb();
  
              foreach (var userbadge in db.UserBadges)
              {
                  if (userbadge.UserId == ub.UserId &amp;&amp; userbadge.BadgeId == ub.UserId)
                  {
                      userbadge.isNotified = true;
                      db.SaveChanges();
                  }
          }
      }
  </code></pre>
  
  <p><strong>The Problem:</strong>
  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.</p>
  
  <p>So if you could keep it as simple as possible, and nudge me in the right direction, it would be most appreciated!</p>
  
  <p><strong>EDIT:</strong>
  New JavaScript below, thought I had it, but I didn't.</p>
  
  <p><strong>EDIT2:</strong>
  This is now solved, I ended up using a controller instead of <code>WebMethods</code>.</p>