JavaScript中的Ajax将原始数据发布到网页中

Question

当使用JavaScript发出ajax请求时，该视图似乎已将原始数据发布到网页中，我想这就像在记事本中查看csv文件，只是几行数据，尽管正确的数据，只是不在我希望看到的jquery数据表中。

仅使用Jquery在表中正确显示所有数据时，如下所示：

<script>
    $('#IndexTable').DataTable({ responsive: true });
</script>

没有问题。

我也在视图中尝试过：

<script>

    $(document).ready(function () {

        test();
    })

    var test = function () {

        $ajax({
            type: 'GET',
            url: '/ClinicalASSPATVM/test',
            success: function (response) {

                BindDataTable(response);


                }
            })
       }

    var BindDataTable = function (response) {

        $("#IndexTable").DataTable({


            "aadata": response,
            "aoColumn": [

                {"mData": "Product:"},
            ]

       });
    }
</script>

这是我的控制器部分代码：

        public ActionResult test(int? ClinicalAssetID)
        {

            var ClinicalASSPATVM = (from s in db.ClinicalAssets
                                    join cp in db.ClinicalPATs on s.ClinicalAssetID equals cp.ClinicalAssetID into AP
                                    from subpat in AP.DefaultIfEmpty()
                                    orderby s.ClinicalAssetID descending

                                    select new ClinicalASSPATVM
                                    {
                                        ClinicalAssetID = s.ClinicalAssetID,
                                        ProductName = s.ProductName,
                                        ModelName = s.ModelName,
                                        SupplierName = s.SupplierName,
                                        ManufacturerName = s.ManufacturerName,
                                        SerialNo = s.SerialNo,
                                        PurchaseDate = s.PurchaseDate,
                                        PoNo = s.PoNo,
                                        Costing = s.Costing,
                                        TeamName = s.TeamName,
                                        StaffName = s.StaffName,
                                        InspectionDocumnets = subpat.InspectionDocumnets ?? String.Empty,
                                        InspectionOutcomeResult = subpat.InspectionOutcomeResult
                                    });


            return Json(new { data = ClinicalASSPATVM }, JsonRequestBehavior.AllowGet);
        }

这是视图：

@model IEnumerable<Assets.Areas.Clinical.Models.ClinicalASSPATVM>
<link href="~/content/datatables/media/css/datatables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/extensions/Responsive/css/responsive.dataTables.min.css" rel="stylesheet" />


@{
    ViewBag.Title = "View Clinical";
}

<div class="pageheader">
    <h2><i class="fa fa-pencil"></i> Clinical Asset Dashboard</h2>
    <div class="breadcrumb-wrapper">
        <span class="label">You are here:</span>
        <ol class="breadcrumb">
            <li>Asset Management System</li>
            <li class="active">Clinical Assets - Overview</li>
        </ol>
    </div>
</div>

     <div class="contentpanel">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <div class="panel-btns">
                     <a href="" class="minimize">&minus;</a>
                 </div><!-- panel-btns -->
                 <h3 class="panel-title">Last 10 Assets:</h3>
             </div>
             <div class="panel-body">
                 <div class="table-responsive">
                     <table id="IndexTable" class="table table-striped table-bordered" >
                         <thead>
                             <tr>
                                 <th>Product:</th>
                                 <th>Model:</th>
                                 <th>Supplier:</th>
                                 <th>Manufacturer:</th>
                                 <th>Serial No:</th>
                                 <th>Purchase Date:</th>
                                 <th>Purchase Order No:</th>
                                 <th>Cost:</th>
                                 <th>Team Location:</th>
                                 <th>Owner:</th>
                                 <th>Inspection OutcomeResult:</th>
                             </tr>
                         </thead>


                     </table>


                 </div><!-- table-responsive -->
             </div><!-- panel-body -->
         </div><!-- panel -->
     </div>



@section Scripts {


<script src="~/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/media/js/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/DataTables/extensions/Responsive/js/dataTables.responsive.js"></script>

<script>
    $(document).ready(function () {
        $ajax({
            url: '/ClinicalASSPATVM/test',
            method: 'GET',
            datatype: 'json',
            sucess: function (data) {

                $('#IndexTable').datatable({
                    data: data,
                    columns: [
                        { "data": "ProductName" },
                    ]
                });
            }
        });
    });
</script>
}

这是一个疯狂的输出示例，我也看不到布局页面的页眉，页脚或侧栏。

{"data": 
[{"ClinicalAssetID":75,"SerialNo":"34563463453453453","PurchaseDate":"\/Date(1551657600000)\/","PoNo":"567","Costing":1500,"InspectionDocumnets":"","ProductName":{"ProductID":2,"AssetAssignmentID":2,"ProductName":"Bed"},"InspectionOutcomeResult":null,"ModelName":{"ModelID":1,"AssetAssignmentID":2,"ProductID":8,"ModelName":"M1"},"Code":null,"AssetTypeName":null,"ManufacturerName":{"ManufacturerID":1,"AssetAssignmentID":2,"ProductID":8,"ManufacturerName":"Omron"},"StaffName":{"StaffID":1,"StaffName":

我希望有人可以阐明我做错了什么。