Ajax call states failed to load resource. Simple asp.net contacts class

asp.net, jquery, json

Solution

My syntax was a little off. Notice the added `static` to the web method.

public partial class Default : System.Web.UI.Page
{
    public class Contact
    {
        public string Name { get; set; }
    }

    static List<Contact> contacts = new List<Contact>
    { 
        new Contact{ Name = "George" }, 
        new Contact{ Name = "Mike" }, 
        new Contact{ Name = "Steve"} 
    };

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<Contact> GetContacts()
    {
        return contacts;
    }
}

The server returns the JSON wrapped - so you need to use `data.d`.

$(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.d, function (key, val) {
                console.log(val.Name);
            });
        }
    });
});

Another way to do this is use an ASMX service instead of just a method on a page. This makes it so the methods don't have to be static and it's an actual web service.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
    public class Contact
    {
        public string Name { get; set; }
    }

    List<Contact> contacts = new List<Contact>
    { 
        new Contact{ Name = "George" }, 
        new Contact{ Name = "Mike" }, 
        new Contact{ Name = "Steve"} 
    };

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<Contact> GetContacts()
    {
        return contacts;
    }
}

And the javascript:

$(document).ready(function () {

    $.ajax({
        type: "POST",
        async: true,
        url: "WebService1.asmx/GetContacts",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $.each(data.d, function (key, val) {
                console.log(val.Name);
            });
        }
    });
});

Problem

Original source