Mam stronę HTML, która ma te kody, co to robi jest wykazuje listę pracowników mieszkających w bazie danych

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        var employeeList = $('#EmployeeList');

        $('#DisplayEmp').click(function () {
            $.ajax({
                type: 'GET',
                url: 'api/employees',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    employeeList.empty();
                    $.each(data, function (index,val){ 
                        var fullName = val.employee_Name;
                        employeeList.append('<li>' + fullName + '</li>')
                    });
                }
            });
        });
    });
</script>
</head>
<body>
    <input id="DisplayEmp" type="button" value="Display Employees" />
    <input id="ClearEmp" type="button" value="Clear Employees" />
    <ul id="EmployeeList"></ul>
</body>
</html>

Jestem nowy w jQuery, więc nie znam kodów. Ale kiedy prowadziłem program, wyświetla undefined, który nie mam żadnego pomysłu w jego mylącym. Sprawdziłem moje kody pojedynczo, ale nadal nie udało się znaleźć problemu.

To jest moja klasa modelek

 public partial class tblEmployee
{
    public int Employee_ID { get; set; }
    public string Employee_Name { get; set; }
    public string Gender { get; set; }
    public Nullable<int> Age { get; set; }
    public Nullable<int> Department_ID { get; set; }
    public Nullable<int> Salary { get; set; }
}

I mam kontroler o nazwie Employees, kiedy uruchomię API przez URI Wyświetla listę pracowników prawidłowo.

Edytuj 1. Oto odpowiedź serwera Wpisz opis obrazu tutaj

Edytuj 2 Oto mój kontroler

[HttpGet]
    public HttpResponseMessage GetEmployees(string gender = "All")
    {
        using (EmployeeDBEntities employeeEntity = new EmployeeDBEntities())
        {
            switch (gender.ToLower())
            {
                case "all":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.ToList());
                case "male":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
                case "female":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
                default:
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Value for gender must be All,Male or Female" + gender + "is invalid.");
            }
        }
    }

Edytuj 3: Znajdź to dziwne, jak widać, mój klasa modelu ma właściwość Age, więc próbowałem użyć tej właściwości val.Age i nadal wyświetla undefined Zwróć uwagę na małe litery wyświetla poprawne dane. Ale kiedy wypróbowałem go z val.Employee_Name do val.employee_name Nadal jest wyświetlany niezdefiniowany.

0
Vian Ojeda Garcia 24 czerwiec 2017, 09:20

3 odpowiedzi

Najlepsza odpowiedź

W końcu dowiedział się, jak wyświetlić właściwą wartość, którą użyłem val.employee_Name i obniżam obudowę Źle zaakceptuj to jako odpowiedź

0
Vian Ojeda Garcia 24 czerwiec 2017, 07:17

Zmień to w ten sposób, aby zobaczyć błędy z serwera:

$.ajax({
  type: 'GET',
  url: 'api/employees',
  dataType: 'xml',
  success: function (data) {
    employeeList.empty();
    var x = $(data).find('ArrayOftblEmployee');
    $.each(x, function (index, val){ 
      var fullName = val.find('tblEmployee').find('Employee_Name');
      employeeList.append('<li>' + fullName + '</li>')
    });
  }
});

Twój kod jQuery wydaje się w porządku. Moja sugestia polega na tym, że pracujesz ze swoim "klasą modelu" na serwerze.

0
Otvazhnii 24 czerwiec 2017, 07:38

Masz odpowiedź XML, dzięki czemu można użyć następującego kodu:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        var employeeList = $('#EmployeeList');

        $('#DisplayEmp').click(function () {
            $.ajax({
                type: 'GET',
                url: 'api/employees',
                dataType: 'xml',
                success: function (data) {
                    employeeList.empty();
                    var ArrayOftblEmployee = data.find('ArrayOftblEmployee');
                    $.each(data, function (index,val){ 
                        var fullName = val.find('tblEmployee').find('Employee_Name');
                        employeeList.append('<li>' + fullName + '</li>')
                    });
                },
                error: function(error) {
                    console.log(error)
                }
            });
        });
    });
</script>
</head>
<body>
    <input id="DisplayEmp" type="button" value="Display Employees" />
    <input id="ClearEmp" type="button" value="Clear Employees" />
    <ul id="EmployeeList"></ul>
</body>
</html>
0
Mohammad Hamedani 24 czerwiec 2017, 07:08