javascript - 使用 Ajax、Jquery、Asp.Net MVC 从数据库获取数据并以表格格式显示

Question

我已经建立了与数据库的连接，我想以表格格式在 View 中显示数据库中的所有详细信息，但我无法做到这一点，因为我的新人可以提供帮助。

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

    public string EmpName { get; set; }

    public int Age { get; set; }

    public int Salary { get; set; }

 }

Controller :

 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

Controller :-

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>