Данные API не отображаются в событии клика

Question

Я получаю данные из веб-API. Теперь отображаются элементы, когда я нажимаю кнопку «Получить имена».

Мой код просмотра выглядит следующим образом.

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <input type="text" name="name1" id="text1" value="" />
    <input type="button" name="name2" id="btn2" value="Get by names" />
    <ul id="names"> </ul>
    <script>

        $(document).ready(function () {
            $("#btn2").click(function () {
                $("#names").empty();
                $.getJSON("/api/Customer/", function (data) {
                    $.each(data, function (key, val) {
                        $("<li>" + val + "</li>").appendTo($("#names"));

                    })
                })

            })


    </script>

Данные контроллера Web API выглядят следующим образом:

 namespace theapis.Controllers
    {


        public class CustomerController : ApiController
        {
            private static List<string> studentnames = new List<string> { "Ammad", "Ali", "Khan" };

            public IEnumerable<string> GetvalueByIndex(){

             return customernames;
            }    

        public string Getnames(int id)
            {
                return customernames[2];
            }

        }
    }

Результат должен показать список. Аммад Али Хан

Answer 1

В вашем коде несколько проблем.

Вы указываете URL:

$.getJSON("/api/Customer/"

и Web API по соглашению будут искать и искать метод Get в контроллере Customer, в то время как в контроллере нет метода с именем Get. Вам нужно либо изменить имя в контроллере, либо искать способ вызова метода действия с другим именем, чем соглашение.

Быстрый способ - переименовать метод действия:

public string Get()
{
     private List<string> studentnames = new List<string> { "Ammad", "Ali", "Khan" };
     return customernames;
}

Вам также не хватает закрывающей скобки для document.ready. этот кусок кода будет выглядеть так:

 $(document).ready(function () {
        $("#btn2").click(function () {
            $("#names").empty();
                $.getJSON("/api/Customer/", function (data) {
                     $.each(data, function (key, val) {
                         $("<li>" + val + "</li>").appendTo($("#names"));

                     }); // $.each closing
                }); // $.getJSON closing

          }); // button click closing
 }); // document.ready closing