Javascript 为什么.Net中的数据表中出现ajax错误？_Javascript_.net_Sql Server_Model View Controller_Datatable

Javascript 为什么.Net中的数据表中出现ajax错误？

javascript .net sql-server model-view-controller

Javascript 为什么.Net中的数据表中出现ajax错误？,javascript,.net,sql-server,model-view-controller,datatable,Javascript,.net,Sql Server,Model View Controller,Datatable,加载表时，datatable中出现ajax错误。（.net）这是我的数据表代码 <table id="productsTable" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Code</th> <th>Price</th>

加载表时，datatable中出现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>
}

错误看起来像

DataTables警告：表id=productsTable-Ajax错误。有关此错误的详细信息，请参阅

单击此处：

我没有发现以下错误：

看法

@{
布局=空；
}
Index4
@*添加了这个css*@
身体{
左侧填充：50px；
宽度：80%；
}
@*删除了引导以获得更好的数据表样式*@
@*把你所有的脚本放在头上*@
@**@
@*添加了这个脚本*@
@*需要这个jquery脚本吗*@
@**@
$（文档）.ready（函数（）{
$（'#productsTable'）。数据表({
“ajax”：{
//使用家庭控制器代替产品
“url”：“/主页/GetData”，
//“url”：“/Products/GetData”，
“类型”：“获取”，
“数据类型”：“json”
},
“栏目”：[
{“数据”：“名称”}，
{“数据”：“代码”}，
{“数据”：“价格”}，
{“数据”：“可用”}
]
});
});
@*增加了显示类*@
名称
代码
价格
产品数量
@节脚本{
@*将这些脚本移到头部*@
}

控制器/模型

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();
    }

公共类产品
{
public int ProductId{get；set；}
公共字符串名称{get；set；}
公共字符串代码{get；set；}
公共十进制价格{get；set；}
公共可空可用{get；set；}
公共字节[]已删除{get；set；}
}
公共类HomeController:控制器
{
公共操作结果GetData（）
{
//使用（DBModel db=new DBModel（））
//{
//List proList=db.products.ToList（）；
//返回Json（new{data=proList}，JsonRequestBehavior.AllowGet）；
//}
List proList=new List{new product{Available=1，Code=“Code1”，是否已删除=新字节[1]，
Name=“Name1”，价格=127万，产品ID=1}，
新产品{Available=2，Code=“Code2”，已删除=新字节[2]，
Name=“Name2”，价格=128万，产品ID=2}，
新产品{Available=3，Code=“Code3”，已删除=新字节[3]，
Name=“Name3”，价格=129万，产品ID=3}；
返回Json（new{data=proList}，JsonRequestBehavior.AllowGet）；
}
公共行动结果索引4（）
{
返回视图（）；
}

单击此处：

我没有发现以下错误：

看法

@{
布局=空；
}
Index4
@*添加了这个css*@
身体{
左侧填充：50px；
宽度：80%；
}
@*删除了引导以获得更好的数据表样式*@
@*把你所有的脚本放在头上*@
@**@
@*添加了这个脚本*@
@*需要这个jquery脚本吗*@
@**@
$（文档）.ready（函数（）{
$（'#productsTable'）。数据表({
“ajax”：{
//使用家庭控制器代替产品
“url”：“/主页/GetData”，
//“url”：“/Products/GetData”，
“类型”：“获取”，
“数据类型”：“json”
},
“栏目”：[
{“数据”：“名称”}，
{“数据”：“代码”}，
{“数据”：“价格”}，
{“数据”：“可用”}
]
});
});
@*增加了显示类*@
名称
代码
价格
产品数量
@节脚本{
@*将这些脚本移到头部*@
}

控制器/模型

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();
    }

公共类产品
{
public int ProductId{get；set；}
公共字符串名称{get；set；}
公共字符串代码{get；set；}
公共十进制价格{get；set；}
公共可空可用{get；set；}
公共字节[]已删除{get；set；}
}
公共类HomeController:控制器
{
公共操作结果GetData（）
{
//使用（DBModel db=new DBModel（））
//{
//List proList=db.products.ToList（）；
//返回Json（new{data=proList}，JsonRequestBehavior.AllowGet）；
//}
List proList=new List{new product{Available=1，Code=“Code1”，是否已删除=新字节[1]，
Name=“Name1”，价格=127万，产品ID=1}，
新产品{Available=2，Code=“Code2”，已删除=新字节[2]，
Name=“Name2”，价格=128万，产品ID=2}，
新产品{Available=3，Code=“Code3”，已删除=新字节[3]，
Name=“Name3”，价格=129万，产品ID=3}；
返回Json（new{data=proList}，JsonRequestBehavior.AllowGet）；
}
公共行动结果索引4（）
{
返回视图（）；
}

请检查浏览器>网络选项卡，查看将ajax全部设置为

/Products/GetData

时出现了什么错误是的，

/Product/GetData

是正确的URL，我错误地提到了。谢谢

@{
    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();
    }