5

ここでいくつかのjquery / jsといくつかのajaxを学ぼうとしています。以下を使用して、単純な asp.net Web フォーム プロジェクトを作成しました。

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

私のjsファイルはこれだけでした：

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

JavaScriptコンソールに連絡先の名前が表示されることを期待していましたが、単にFailed to load resource: The server responded with a status of 500 (internal server error) http://localhost:someNumber/Default.aspx/GetContacts. 何が間違っているのかわかりませんか？

4

1 に答える 1

2

私の構文は少しずれていました。added staticto the web メソッドに注目してください。

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

サーバーはラップされた JSON を返すため、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);
            });
        }
    });
});

これを行う別の方法は、ページ上のメソッドだけでなく、ASMX サービスを使用することです。これにより、メソッドが静的である必要がなくなり、実際の Web サービスになります。

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

そして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);
            });
        }
    });
});
于 2012-11-15T16:38:10.720 に答える