Question

我正在使用C＃ASP.NET MVC开发Visual Studio 2017，我在Ajax中是全新的，

我尝试使用Ajax代码进行一些与我的项目相关的修改，

我的想法在第一个视图中被称为AOIAdmin.cs，我将显示项目的所有感兴趣区域，并且在每个区域后面，有三个按钮1.View，2。Edit，3。Delete

首先，我从AreaOfInterestController.cs中的SQL Server数据库加载了感兴趣区域的数据

public ActionResult loaddata()
    {
        using (Entities dc = new Entities())
        {
            var temp = dc.AreaOFInterests.OrderBy(a => a.AOIName).ToList();
            var data = temp.Select(S => new { AOIName = S.AOIName, AOIId = S.AOIId });
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }
    }

并在AOIAdmin.cs视图和AOIAdmin.cs视图中显示感兴趣的区域，

<table id="myTable" style="width:100%; border:solid;" class="table table-bordered table-striped">
<thead>
    <tr style="border:solid;">
        <th> Name</th>
        <th>View</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
</thead>

@section Scripts{
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<script>

    $(document).ready(function () {
        $('#myTable').DataTable({

            "ajax": {
                "url": "/AreaOfInterest/loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "AOIName", "autoWidth": true },
                {
//View button
                    "render": function (data, type, full, meta) {
                        return '<a style ="background :none;" class="btn btn-default btn-md glyphicon glyphicon-eye-open" href="/AreaOfInterest/EachAreaAdmin/' + full.AOIId + '"></a>'; }
                },
                {
//Edit button
                    "render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/AreaOfInterest/Edit/' + full.AOIId + '">Edit</a>'; }
                },

                {
//Delete button
                    data: null, render: function (data, type, row) {
                        return '<a class="btn btn-danger" href="/AreaOfInterest/Delete/' + row.AOIId + '"  onclick=DeleteData("' + row.AOIId + '"); >Delete</a>";

                    }
                },
            ]
        });
    });


</script>
}

当管理员在AOIAdmin视图中按下View按钮时，我会在同一行中显示感兴趣区域中的所有项目，所以我尝试从AreaOfInterestController.cs中的SQL Server数据库加载项目（我确信查询是正确的））

public ActionResult loadEachArea(int? id)
    {
        using (Entities dc = new Entities())
        {

            var sp = (from m in dc.SeniorProjects
                      join s in dc.ProjectsAOIs on m.SPtId equals s.SPtId
                      where s.AOIId == id
                      select m);
            var temp = sp.OrderBy(a => a.SPtId).ToList();
            var data = sp.Select(S => new { SPName = S.SPName, SPId = S.SPtId });
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }
    }

并在EachAreaAdmin.cs视图中使用已加载的项目

<table id="myTable" style="width:100%; border:solid;" class="table">
<thead>
    <tr style="border:solid;">
        <th> Name</th>
        <th>View</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
</thead>

@section Scripts{
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script 

src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({

            "ajax": {
                "url": "/AreaOfInterest/loadEachArea,
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "SPName", "autoWidth": true },
                {

                    "render": function (data, type, full, meta) {
                        return '<a style ="background :none;" class="btn btn-default btn-md glyphicon glyphicon-eye-open" href="/AreaOfInterest/Project/' + full.SPtId + '"></a>'; }
                },
                {

                    "render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/SeniorProjects/Edit/' + full.SPtId + '">Edit</a>'; }
                },

                {
                    data: null, render: function (data, type, row) {
                        return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.SPtId + "'); >Delete</a>";
                    }
                },
            ]
        });
    });

但是在AOIAdmin.cs视图中按下View按钮显示

DataTables警告：table id = myTable - Ajax错误。

如何使用loadEachArea方法发送id或问题在哪里？

编辑：

我上传了browser's console和network tab，但我不明白，

我希望你理解我，谢谢你

DataTables警告：table id = myTable - ASP.NET MVC中SQL Server数据库的Ajax错误

0 个答案: