JQuery Ajax вызов ASP.NET MVC API возвращает ошибку

Question

У меня есть контроллер CustomerController апи, который возвращает клиентов данные:

using System.Collections.Generic; 
using System.Linq; 
using System.Web.Http; 
using CustomerMngmt.Models; 

namespace CustomerMngmt.Controllers 
{ 
    public class CustomersController : ApiController 
    { 
     private readonly Customer[] _customer = 
    { 
     new Customer 
     { 
      Id = 1, 
      firstName = "Florian", 
      lastName = "Hofmeister", 
      emailAddress = "florianhofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     }, 
     new Customer 
     { 
      Id = 2, 
      firstName = "Svenja", 
      lastName = "Hofmeister", 
      emailAddress = "svenjahofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     }, 
     new Customer 
     { 
      Id = 3, 
      firstName = "Marvin", 
      lastName = "Hofmeister", 
      emailAddress = "marvinhofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     } 
    }; 



     public IEnumerable<Customer> GetAllCustomers() 
     { 
      return _customer; 
     } 

     public Customer GetCustomerById(int id) 
     { 
      var customer = _customer.FirstOrDefault(c => c.Id == id); 

      return customer; 
     } 
    } 
} 

А потом загружать данные в JavaScript с:

function loadCustomer() { 

    jQuery.support.cors = true; 
    $.ajax({ 
     url: 'http://localhost:54172/api/customers', 
     type: 'GET', 
     dataType: 'json', 
     data:{}, 
     success: function (data) { 

      for (var i = 0; i < data.length; i++) { 
       var customer = new customer(
        '1', 
        data[i].id, 
        data[i].firstName, 
        data[i].lastname, 
        data[i].companyName, 
        data[i].emailAddress, 
        data[i].pictureURL); 

       self.customers.push(customer); 
      } 
     }, 
     error: function (x, y, z) { 
      alert(x + '\n' + y + '\n' + z + "TEST"); 
      console.log(x + '\n' + y + '\n' + z + "TEST"); 
     } 
    }); 
} 

и мой проблема в том, что функция не загружает элементы из контроллера. Вместо этого я получаю сообщение об ошибке [object Object]errorTEST.

Answer 1

URL-адрес в вашем AJAX не соответствует любой контроллер или действие. Если скрипт находится в файле cshtml, вы можете использовать помощник URL для создания URL-адреса. По соображениям безопасности я рекомендую использовать POST вместо GET, если у вас есть аутентификация. Наконец, вы можете использовать responseText, чтобы увидеть фактическое сообщение об ошибке.

$.ajax({ 
    url: @Url.Action("Customers", "GetAllCustomers"), // or try 'http://localhost:54172/Customers/GetAllCustomers' 
    type: 'POST', 
    success: function (data) { 
     for (var i = 0; i < data.length; i++) { 
      var customer = new customer(
       '1', 
       data[i].id, 
       data[i].firstName, 
       data[i].lastname, 
       data[i].companyName, 
       data[i].emailAddress, 
       data[i].pictureURL); 

      self.customers.push(customer); 
     } 
    }, 
    error: function (x, y, z) { 
     alert(x.responseText + '\n' + y + '\n' + z + "TEST"); 
     console.log(x.responseText + '\n' + y + '\n' + z + "TEST"); 
    } 
}); 

Answer 2

попробуйте изменить URL для этого один -> ControllerName/Method

Answer 3

на мой взгляд, вы должны явно изменить URL в AJAX (/ контроллер/действие) и вернуть JSON из контроллера апи. Поэтому я не вижу действия с именами клиентов в вашем коде.

Answer 4

В API нет ничего плохого, я подозреваю, что это ваш JavaScript, который взрывается при попытке создать коллекцию customer. Попробуйте добавить это в JavaScript:

function customer(id, firstname, lastname, companyname, email, pic) { 
      this.Id = id; 
      this.FirstName = firstname; 
      this.LastName = lastname; 
      this.Company = companyname; 
      this.email = email; 
      this.Pic = pic; 
     } 

И изменить переменную вы создаете, я изменил к cus в моем примере ...

var cus = new customer(
         '1', 
         data[i].id, 
         data[i].firstName, 
         data[i].lastname, 
         data[i].companyName, 
         data[i].emailAddress, 
         data[i].pictureURL); 

        self.customers.push(cus);