從數據庫中獲取數據並使用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); 
},