使用Ajax、Jquery、Asp.Net MVC从db获取数据并以表格格式显示。
使用Ajax、Jquery、Asp.Net MVC从db获取数据并以表格格式显示。
提问于 2016-12-20 19:33:47
我已经建立了到数据库的连接，我想在视图中以表格格式显示数据库中的所有细节，但我无法做到这一点，因为我的新可以任何人帮助。
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>有人能给我提个解决方案吗？
在控制台中获取数据，但不以表格形式显示
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-20 20:13:52
控制器:-
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>Stack Overflow用户
发布于 2016-12-20 19:52:28
您的问题是这个选择器：$('#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);
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41241389
复制相关文章
相似问题