Ajax çağrı durumları, kaynak yüklenemedi. Basit asp.net kişi sınıfı

Question

Bazı jquery/js ve bazı ajax öğelerini burada öğrenmeye çalışıyorum. Ben basit bir asp.net web formu projesini oluşturdu aşağıdadır:

Benim js dosyası bu basitçe

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

oldu: Ben kişinin adını ancak bunu sadece görüntülemek için JavaScript konsolu beklenen, istiyorsunuz

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

Failed to load resource: The server responded with a status of 500 (internal server error) http://localhost:someNumber/Default.aspx/GetContacts diyor. Ne yanlış yaptığımdan emin değilim?

Answer 1

Sözdizimi biraz kapalıydı. Web yöntemine static eklendiğine dikkat edin.

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

sunucu JSON sarılmış döner - böylece data.d kullanmak gerekir.

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

Bunu yapmanın başka bir yolu, bir sayfada yalnızca bir yöntem yerine bir ASMX hizmeti kullanmaktır. Bu, yöntemlerin statik olmamasına ve gerçek bir web hizmetine sahip olmasını sağlar.

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

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