title: Ajax call states failed to load resource. Simple asp.net contacts class
body: <p>Trying to learn some jquery / js and some ajax here.  I created a simple asp.net web form project with the following:</p>
  
  <pre><code>namespace JSONTest
  {
      public partial class _Default : System.Web.UI.Page
      {
          public class Contact
          {
              public string Name { get; set; }
          }
  
          List&lt;Contact&gt; contacts = new List&lt;Contact&gt;
          { 
              new Contact{ Name = "George" }, 
              new Contact{ Name = "Mike" }, 
              new Contact{ Name = "Steve"} 
          };
  
          [WebMethod]
          [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
          public List&lt;Contact&gt; GetContacts()
          {
              return contacts;
          }
      }
  }
  </code></pre>
  
  <p>My js file was simply this:</p>
  
  <pre><code>$(document).ready(function () {
  
      $.ajax({
          type: "POST",
          async: true,
          url: "Default.aspx/GetContacts",
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
              $.each(data, function (key, val) {
                  console.log(val.Name);
              });
          }
      });
  });
  </code></pre>
  
  <p>I would of expected the javascript console to display the contact's name but it just says <code>Failed to load resource: The server responded with a status of 500 (internal server error) http://localhost:someNumber/Default.aspx/GetContacts</code>.  I'm not sure what I am doing incorrectly?</p>