AJAX显示未定义

I have a html page that have these codes, what this does is it displays the list of employees residing in the database

<!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>

I am new to jquery so I am not really familiar with the codes. But when I ran the program it displays undefined which is I dont have any Idea in its confusing. I checked my codes one by one but still failed to find the problem.

this is my model class

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

and I have a controller named Employees when I run the API through URI it displays the list of employees properly.

EDIT 1 Here is the response of the server enter image description here

EDIT 2 Here is my controller

[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.");
            }
        }
    }

EDIT 3: Find it weird, as you can see my model class have a property Age so I tried using that property val.Age and it still displays undefined however if I replaced it with val.age notice the lowercase it displays the correct data. But when I tried it with val.Employee_Name to val.employee_name it still displays undefined.

Change it this way to see the errors from your server:

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

Your jquery code seems ok. My suggestion is that you work with your "model class" in your server.

You have xml response, so you can use following code:

<!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>

Finally found out how to display the right value I used val.employee_Name I lowered case the Employee can someone explain it to me? Ill accept it as an answer