从数据库中获取数据并使用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

控制器： -

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

你PR是这个选择器：$('#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); 
},