数据不显示在表格中

Question

我是 JQuery 和 API 的新手，在这里我尝试从 SQL 中以 JSON 格式检索数据，然后将其绑定到表。当我调试时，数据在这里返回return details.ToString();，但它没有将数据绑定到表中。这里有什么错误吗？

控制器：

public class EmployeeController : ApiController
{
    static EmpRepository repository = new EmpRepository();

    public string GetData(Employee Em) {
        var re = repository.GetData(Em);
        return re;
    }

}

存储库类：

public  string GetData(Employee Em)
{
    DataTable dt = new DataTable();
    List<Employee> details = new List<Employee>();

    connection();
    com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
    con.Open();
    SqlDataAdapter da = new SqlDataAdapter(com);
    da.Fill(dt);
    foreach (DataRow dr in dt.Rows)
    {
        Employee user = new Employee();
        //user.Id = Int32.Parse(string dr["Id"]);
        user.FirstName = dr["FirstName"].ToString();
        user.LastName = dr["LastName"].ToString();
        user.Company = dr["Company"].ToString();
        details.Add(user);
    }
    return details.ToString();
}

JQuery:

$(document).ready(function DisplayResult() {
    var Emp = {};
    var url = 'api/Employee/GetData';
    $.ajax({

        type: "POST",
        url: url,
        contentType: "application/json;charset=utf-8",
        //data: {},
        dataType: "json",
        success: function (data) {

            for (var i = 0; i < data.d.length; i++)
            {
                $("#tbDetails").appendTo("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].LastName + "</td><td>" + data.d[i].Company + "</td></tr>");
            }
        },

        error: function (result) {

            alert("error");
        }
    });

});

Answer 1

这是您需要对每个部分进行的更改。

首先在您的存储库中返回详细信息，而不是 details.ToString()

接下来在您的存储库类和 WebApi 控制器中，您不需要 Employee 参数，因为您没有在任何地方使用它。删除它。

存储库类 ->

public  string GetData()
    {
        DataTable dt = new DataTable();
        List<Employee> details = new List<Employee>();

       connection();
        com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(com);
                da.Fill(dt);
                foreach (DataRow dr in dt.Rows)
                {
                    Employee user = new Employee();
                   // user.Id = Int32.Parse(string dr["Id"]);
                    user.FirstName = dr["FirstName"].ToString();
                    user.LastName = dr["LastName"].ToString();
                    user.Company = dr["Company"].ToString();
                    details.Add(user);


                }
                return details;

            }

WebApi 控制器：

您不需要在此处将任何内容转换为 JSON，默认情况下 JSON.NET 序列化程序会将您的 List 转换为员工对象的 JSON 数组。

public class EmployeeController : ApiController
    {
        static EmpRepository repository = new EmpRepository();

        public string GetData() {
            var re = repository.GetData();
            return re;
        }

    }

现在在你的 jquery 中：

理想情况下，您在这里执行的是 'GET' 而不是 POST ，现在返回的数据是一个员工对象数组迭代它。

 $(document).ready(function DisplayResult() {
    var Emp = {};
    var url = 'api/Employee/GetData';
    $.ajax({

        type: "GET",
        url: url,
        contentType: "application/json;charset=utf-8",
        success: function (data) {

            for (var i = 0; i < data.length; i++)
            {
                $("#tbDetails").appendTo("<tr><td>" + data[i].FirstName + "</td><td>" + data[i].LastName + "</td><td>" + data[i].Company + "</td></tr>");
            }
        },

        error: function (result) {

            alert("error");
        }
    });

});

Answer 2

我认为你的代码中有两个错误。

• 关于“公共字符串 GetData(Employee Em)” 我认为您想返回员工列表 所以应该更改return details.ToString(); to返回详细信息；`

会的

public  List<Employee> GetData(Employee Em)
{
    DataTable dt = new DataTable();
    List<Employee> details = new List<Employee>();

   connection();
    com = new SqlCommand("select FirstName, LastName, Company from Employee", con);
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(com);
            da.Fill(dt);
            foreach (DataRow dr in dt.Rows)
            {
                Employee user = new Employee();
               // user.Id = Int32.Parse(string dr["Id"]);
                user.FirstName = dr["FirstName"].ToString();
                user.LastName = dr["LastName"].ToString();
                user.Company = dr["Company"].ToString();
                details.Add(user);


            }
            return details; }

-更改GetData api，必须返回JSON 格式。如下所示

 public string GetData(Employee Em) {
    var re = repository.GetData(Em);
    return Json(re);}

和

for (var i = 0; i < data.d.length; i++)
    {
        $("#tbDetails").appendTo("<tr><td>" + data.d[i].FirstName + "</td><td>" + data.d[i].LastName + "</td><td>" + data.d[i].Company + "</td></tr>");
    }

改成

for (var i = 0; i < data.length; i++)
    {
        $("#tbDetails").appendTo("<tr><td>" + data[i].FirstName + "</td><td>" + data[i].LastName + "</td><td>" + data[i].Company + "</td></tr>");
    }

祝你好运！