javascript - 为什么 ajax 错误出现在我的 .Net 数据表中?
问题描述
当我加载表时,我在数据表中遇到了 ajax 错误。(.net)
这是我的数据表代码
<table id="productsTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Price</th>
<th>No of Products</th>
</tr>
</thead>
</table>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet" />
@section scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#productsTable').DataTable({
"ajax": {
"url": "/Products/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name" },
{ "data": "Code" },
{ "data": "Price" },
{ "data": "Available" }
]
});
});
</script>
}
这是我的控制器
public ActionResult GetData()
{
using (DBModel db = new DBModel())
{
List<product> proList = db.products.ToList<product>();
return Json(new { data = proList }, JsonRequestBehavior.AllowGet);
}
}
product
是我的数据库表,
这是模型
public partial class product
{
public int ProductId { get; set; }
public string Name { get; set; }
public string Code { get; set; }
public decimal Price { get; set; }
public Nullable<int> Available { get; set; }
public byte[] is_deleted { get; set; }
}
错误看起来像
数据表警告:表 id=productsTable - Ajax 错误。有关此错误的更多信息,请参阅http://datatables.net/tn/7
解决方案
点击这里:https ://dotnetfiddle.net/S7KWOg
我没有收到错误:
看法
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index4</title>
@*added this css*@
<style>
body {
padding-left: 50px;
width: 80%;
}
</style>
@*removed the bootstrap for better dataTable styling*@
@*putting all your scripts in the head*@
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
@*<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet" />*@
@*added this script*@
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
@*need this jquery script*@
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
@*<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>*@
<script>
$(document).ready(function () {
$('#productsTable').DataTable({
"ajax": {
//using home controller instead of products
"url": "/Home/GetData",
//"url": "/Products/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name" },
{ "data": "Code" },
{ "data": "Price" },
{ "data": "Available" }
]
});
});
</script>
</head>
<body>
<table id="productsTable" class="table table-striped table-bordered display">
@*added display class*@
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Price</th>
<th>No of Products</th>
</tr>
</thead>
</table>
@section scripts{
@*moved these scripts to the head*@
}
</body>
</html>
控制器/型号
public class product
{
public int ProductId { get; set; }
public string Name { get; set; }
public string Code { get; set; }
public decimal Price { get; set; }
public Nullable<int> Available { get; set; }
public byte[] is_deleted { get; set; }
}
public class HomeController : Controller
{
public ActionResult GetData()
{
//using (DBModel db = new DBModel())
//{
// List<product> proList = db.products.ToList<product>();
// return Json(new { data = proList }, JsonRequestBehavior.AllowGet);
//}
List<product> proList = new List<product>{ new product { Available = 1, Code = "Code1", is_deleted = new byte[1],
Name = "Name1", Price = 1.27M, ProductId = 1 },
new product { Available = 2, Code = "Code2", is_deleted = new byte[2],
Name = "Name2", Price = 1.28M, ProductId = 2 },
new product { Available = 3, Code = "Code3", is_deleted = new byte[3],
Name = "Name3", Price = 1.29M, ProductId = 3 } };
return Json(new { data = proList }, JsonRequestBehavior.AllowGet);
}
public ActionResult Index4()
{
return View();
}
推荐阅读
- python - 如何使用正则表达式从字符串中提取文件名
- xamarin.forms - 从 Xamarin.Forms 中 AndroidAssets 的子文件夹中读取(音频)文件
- javascript - 如何在 components.ts 文件中使用 KeyValuePipe?
- java - 为什么休眠查询语言不支持 HQL 中的排序规则?
- umbraco - 无法保存非当前版本 - Umbraco 8
- android - 解锁 HTML 文件
- javascript - Javascript - 使用预设选定选项创建下拉菜单
- angular - tslint:我想强制参数 typedef 但允许推断类型
- html - CSS将图像与混合混合模式差异隔离开来
- python - 摆脱 Python 字典中的 \n (换行符)