使用Ajax，Jquery，Asp.Net MVC從數據庫中獲取數據並以表格式顯示數據

Question

我已經建立了到數據庫的連接，並且我想以表格式在視圖中以視圖的形式顯示數據庫中的所有詳細信息，但是由於我的新功能可以提供任何幫助，因此無法執行此操作。

 public class EmployeeModel
 {
    public int EmpId { get; set; }

    public string EmpName { get; set; }

    public int Age { get; set; }

    public int Salary { get; set; }

 }

控制器：

 private static readonly string connectionString =    ConfigurationManager.ConnectionStrings["ConnStringDb1"].ConnectionString;
    public ActionResult GetUser()
    {
        return View();
    }

    public JsonResult GetAllUser(int EmpId)
    {
        List<EmployeeModel> employee = new List<EmployeeModel>();
        string query = string.Format("Select * From Employee", EmpId);
        SqlConnection connection = new SqlConnection(connectionString);
        {
            using (SqlCommand cmd = new SqlCommand(query, connection))
            {
                connection.Open();
                SqlDataReader reader = cmd.ExecuteReader();

                while (reader.Read())
                {
                    employee.Add(
                        new EmployeeModel
                        {
                            EmpId = int.Parse(reader["EmpId"].ToString()),
                            EmpName = reader.GetValue(0).ToString(),
                            Age = int.Parse(reader["Age"].ToString()),
                            Salary = int.Parse(reader["Salary"].ToString())
                        }
                    );
                }
            }
            return Json(employee, JsonRequestBehavior.AllowGet);
        }
    }

視圖：

   @{
    ViewBag.Title = "Home Page";
    var EmployeeModel = (List<second_day.Models.EmployeeModel>)Model;
}
<button>Click me</button>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(':button').click(function () {
            GetEmployeeUsingAjax();
        });
    });

    function GetEmployeeUsingAjax() {
        var EmpId = 2;
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetAllUser")',
            data: { "EmpId": EmpId},
            dataType: 'json',
            success: function (data) {
                $.each(data, function (i, item) {
                    var rows = "<tr>"
                    + "<td>" + item.EmpID + "</td>"
                    + "<td>" + item.EmpName + "</td>"
                    + "<td>" + item.Age + "</td>"
                    + "<td>" + item.Salary + "</td>"
                    + "</tr>";
                    $('#tblProducts tbody').append(rows);
                });
            },
            error: function (emp) {
                alert('error');
            }
        });
    }
</script>
<table class="tblProducts">
    <thead>
        <tr class="headings" style="background-color:#4495d1;">
            <th>EmpId</th>
            <th>EmpName</th>
            <th>Age</th>
            <th>Salary</th>
         </tr>
</thead>
    <tbody >
    </tbody>
</table>

誰能建議我解決方案

在控制台中獲取數據，但不以表格格式顯示

Answer 1

您的問題是這個選擇器： $('#tblProducts tbody')

您沒有具有該ID的表。

將其更改為$('.tblProducts tbody')或將表重命名為<table id="tblProducts">應該可以解決問題。

作為建議，將DOM操作移到循環外，它將具有更好的性能：

success: function (data) {
    var rows;
    $.each(data, function (i, item) {
        rows += "<tr>"
                  + "<td>" + item.EmpID + "</td>"
                  + "<td>" + item.EmpName + "</td>"
                  + "<td>" + item.Age + "</td>"
                  + "<td>" + item.Salary + "</td>"
             + "</tr>";
    });
    $('#tblProducts tbody').append(rows);
 },

Answer 2

控制器：-

private static readonly string connectionString =  ConfigurationManager.ConnectionStrings["ConnStringDb1"].ConnectionString;
        public ActionResult GetUser()
        {
            return View();
        }

        public JsonResult GetAllUser()
        {
            List<EmployeeModel> employee = new List<EmployeeModel>();
            string query = string.Format("Select * From Employee");
            SqlConnection connection = new SqlConnection(connectionString);
            {
                using (SqlCommand cmd = new SqlCommand(query, connection))
                {
                    connection.Open();
                    SqlDataReader reader = cmd.ExecuteReader();

                    while (reader.Read())
                    {
                        employee.Add(
                            new EmployeeModel
                            {
                                EmpId = int.Parse(reader["EmpId"].ToString()),
                                EmpName = reader.GetValue(0).ToString(),
                                Age = int.Parse(reader["Age"].ToString()),
                                Salary = int.Parse(reader["Salary"].ToString())
                            }
                        );
                    }
                }
                return Json(employee, JsonRequestBehavior.AllowGet);
            }
        }

視圖：

function GetEmployeeUsingAjax() {           
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetAllUser")',
            data: { },
            dataType: 'json',
            success: function (data) {
    var rows;
    $.each(data, function (i, item) {
        rows += "<tr>"
                  + "<td>" + item.EmpID + "</td>"
                  + "<td>" + item.EmpName + "</td>"
                  + "<td>" + item.Age + "</td>"
                  + "<td>" + item.Salary + "</td>"
             + "</tr>";
    });
    $('#tblProducts tbody').append(rows);
 },
            error: function (emp) {
                alert('error');
            }
        });
    }
</script>
<table id="tblProducts">
    <thead>
        <tr class="headings" style="background-color:#4495d1;">
            <th>EmpId</th>
            <th>EmpName</th>
            <th>Age</th>
            <th>Salary</th>
         </tr>
</thead>
    <tbody >
    </tbody>
</table>