Ajax-Aufrufstatus konnte Ressource nicht laden. Einfache asp.net Kontakte Klasse

Question

Versuchen, einige jquery/js und einige Ajax hier zu lernen. Ich habe eine einfache asp.net Webformular Projekt mit den folgenden:

namespace JSONTest 
{ 
    public partial class _Default : System.Web.UI.Page 
    { 
     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; 
     } 
    } 
} 

Meine js Datei war einfach:

$(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); 
      }); 
     } 
    }); 
}); 

Ich würde die JavaScript-Konsole erwartet von den Namen des Kontakts angezeigt werden, aber es einfach sagt Failed to load resource: The server responded with a status of 500 (internal server error) http://localhost:someNumber/Default.aspx/GetContacts. Ich bin mir nicht sicher, was ich falsch mache.

Answer 1

Meine Syntax war ein wenig aus. Beachten Sie die hinzugefügte static der Web-Methode.

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; 
    } 
} 

Der Server liefert die JSON gewickelt - so müssen Sie data.d verwenden.

$(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); 
      }); 
     } 
    }); 
}); 

Eine andere Möglichkeit, dies zu tun, ist die Verwendung eines ASMX-Dienstes anstelle einer Methode auf einer Seite. Dies macht es so, dass die Methoden nicht statisch sein müssen und es sich um einen tatsächlichen Webservice handelt.

[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; 
    } 
} 

Und das 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); 
      }); 
     } 
    }); 
});