想用ASP.NET MVC+Bootstrap-table+JQuery异步加载数据，为何数据总是无法正常渲染？
0
悬赏园豆：20
[已解决问题]
解决于 2023-07-10 21:13
后端是ASP.NET MVC，前端用的是Bootstrap-table+JQuery异步加载数据，为什么页面的数据总是：
[{"Id":1,"Name":"AAAA","Gender":"男","Age":22,"PhoneNumber":"123456789"},{"Id":2,"Name":"BBBB","Gender":"女","Age":23,"PhoneNumber":"123456789"},{"Id":3,"Name":"CCCC","Gender":"男","Age":22,"PhoneNumber":"123456789"},{"Id":4,"Name":"DDDD","Gender":"女","Age":24,"PhoneNumber":"123456789"},{"Id":5,"Name":"EEEE","Gender":"男","Age":22,"PhoneNumber":"123456789"},{"Id":6,"Name":"FFFF","Gender":"女","Age":32,"PhoneNumber":"123456789"},{"Id":7,"Name":"GGGG","Gender":"男","Age":22,"PhoneNumber":"123456789"},{"Id":8,"Name":"HHHH","Gender":"女","Age":26,"PhoneNumber":"123456789"},{"Id":9,"Name":"IIII","Gender":"男","Age":28,"PhoneNumber":"123456789"},{"Id":10,"Name":"JJJJ","Gender":"女","Age":22,"PhoneNumber":"123456789"},{"Id":11,"Name":"KKKK","Gender":"男","Age":22,"PhoneNumber":"123456789"},{"Id":12,"Name":"LLLL","Gender":"女","Age":92,"PhoneNumber":"123456789"}]
controller中代码：
public ActionResult List()
{
List<Person> list = new List<Person>();
list.Add(new Person() { Id = 1, Name = "AAAA", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 2, Name = "BBBB", Gender = "女", Age = 23, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 3, Name = "CCCC", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 4, Name = "DDDD", Gender = "女", Age = 24, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 5, Name = "EEEE", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 6, Name = "FFFF", Gender = "女", Age = 32, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 7, Name = "GGGG", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 8, Name = "HHHH", Gender = "女", Age = 26, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 9, Name = "IIII", Gender = "男", Age = 28, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 10, Name = "JJJJ", Gender = "女", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 11, Name = "KKKK", Gender = "男", Age = 22, PhoneNumber = "123456789" });
list.Add(new Person() { Id = 12, Name = "LLLL", Gender = "女", Age = 92, PhoneNumber = "123456789" });
return Json(list, JsonRequestBehavior.AllowGet);
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public string Gender { get; set; }
public int Age { get; set; }
public string PhoneNumber { get; set; }
}
cshtml代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestIndex</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-table.js"></script>
<script type="text/javascript">
//加载整个table数据
$(document).ready(function () {
$.ajax({
type: "GET",
url: "Test/List",
dataType: "json",//期望返回JSON对象,返回的json字符串不需要再parse()
success: function (res) {
debugger;
var data = JSON.parse(res);
var html = "";
for (let i = 0; i < data.length; i++) {
var emp = data[i]
html += "<tr class='danger '>" +
"<td><input type='checkbox'></td>" +
"<td>" + emp.Id + "</td>" +
"<td>" + emp.Name + "</td>" +
"<td>" +
"<button class='btn btn-xs btn-info'>编辑</button>" +
"<button class='btn btn-xs btn-danger' onclick='deleteOne()'>删除</button>" +
"</td>" +
"</tr>";
}
//嵌入页面
$("#tbody").html(html)
}
})
return false;
});
</script>
</head>
<body>
<div class="container-fluid">
<table id="tbody">
</table>
</div>
</body>
</html>
请大家帮忙看看，谢谢！
最佳答案
0
可以看看官方文档的写法
收获园豆：10
按照官网https://www.bootstrap-table.com.cn/的写法，数据渲染出来了，对比了一下，感觉是引用的JS版本不一样，只是官网示例的样式有些不好看
@0724job: bootstrap-table 底层其实就是Jquery datatable
以前我们一直用这个
其他回答(3)
0
根据您提供的代码，我看到了可能导致数据无法正确渲染的一些问题。以下是可能引起问题的几点：
解析JSON数据：在您的success回调函数中，您使用JSON.parse尝试解析已经是JSON对象的res。由于dataType已经设置为"json"，res应该是一个JSON对象，而不需要再进行解析。您可以直接使用res变量而无需调用JSON.parse(res)。
修改后的代码：
javascript
Copy code
success: function (res) {
var data = res;
// ...
}
表格ID：您的表格标签使用了一个id属性，但是在JavaScript代码中，您使用了错误的ID选择器$("#tbody")来嵌入数据。应该使用正确的ID选择器$("#testTable")。
修改后的代码：
html
Copy code
<table id="testTable">
javascript
Copy code
// ...
// 嵌入页面
$("#testTable").html(html);
异步请求方法：您在JavaScript代码中使用了$.ajax方法进行异步请求，但是在URL中使用了相对路径"Test/List"。相对路径可能无法正确定位到您的控制器动作。建议您使用绝对路径或使用Url.Action助手方法生成正确的URL。
修改后的代码：
javascript
Copy code
// ...
$.ajax({
type: "GET",
url: "@Url.Action("List", "Test")",
// ...
});
请尝试按照以上建议进行修改，看看是否能够解决您的问题。如果问题仍然存在，请提供错误信息或控制台日志，以便更好地理解和诊断问题。
收获园豆：10
您好，前端页面var data = JSON.parse(res)已经改回var data = res，之前是页面数据没有渲染出来才改了试试的；table的id改为testTable；url也改为 "@Url.Action("List", "Test")"，但是数据没有渲染出来。
在 Microsoft Edge浏览器开发人员工具中查看网页元素，发现table并未加载，请问这是什么原因？是否是这个原因导致数据没有正确渲染？如图：
另外提示一个兼容性问题，如图：
这个应该不会导致数据没有渲染出来吧？搜了一下，按照网上的方法，在前端页面<head></head>之间添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，问题依旧，请再帮忙看看！
table ID两个地方都修改了：
@0724job:
根据您提供的信息，我了解到您仍然遇到了数据没有正确渲染的问题，并且在浏览器开发人员工具中发现表格没有加载。这可能是由于以下原因导致的：
URL路径不正确：确保URL路径 "@Url.Action("List", "Test")" 是正确的，并且可以正确地访问到您的数据接口。您可以在浏览器中尝试直接访问该URL，以确保数据能够正确返回。
控制器方法未正确执行：检查您的ASP.NET MVC控制器中的 List 方法是否正确执行，并且返回了期望的JSON数据。您可以在控制器方法中添加调试输出或使用断点来验证代码是否正常执行。
数据返回格式不正确：确保 List 方法在返回数据时，将数据按照JSON格式进行序列化。您可以使用 JsonResult 类型来返回JSON数据，而不是 ActionResult。例如：
csharp
Copy code
public JsonResult List()
{
// 数据处理逻辑...
return Json(list, JsonRequestBehavior.AllowGet);
}
请确保在控制器方法中使用 JsonResult 并指定 JsonRequestBehavior.AllowGet。
兼容性问题：根据您提供的提示，您可能还遇到了一些兼容性问题。在添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 标签后，问题仍然存在，说明这可能不是导致数据没有正确渲染的根本原因。
您可以尝试以下进一步排查的步骤：
检查浏览器控制台：打开浏览器开发人员工具的控制台选项卡，查看是否有任何JavaScript错误或警告。这些错误可能会提供有关数据未正确渲染的线索。
检查网络请求：在浏览器开发人员工具的网络选项卡中，查看数据请求是否成功，并且返回了预期的数据。检查请求和响应的状态码、头部信息等。
检查数据结构：确保返回的JSON数据结构与前端代码中的数据处理一致。验证属性名、属性大小写和数据类型等。
如果问题仍然存在，建议您进一步调试和排查。您可以尝试添加调试输出或使用断点来跟踪代码执行流程，以找到问题所在。
0
//嵌入页面
$("#tbody").html(html)
断点调试的时候，看看这里的html是否有值
如果有值，直接复制出来贴进<table>里，看看是否正常
0
你把js放在body下面，也就是在元素tbody的后面
