C# jQuery Ajax 数据表 ASP.NET Core 5 MVC

Question

我正在尝试实施 ASP.NET Core SignalR。我正在寻求帮助。该项目位于：https://github.com/Talsiter/AspNetCore-SignalR-SqlTableDependency

我运行遇到的问题是当从 jQuery AJAX 填充数据表时，没有数据被填充到视图中。

项目型号（Item.cs）

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace InAndOut.Models
{
    public class Item
    {
        [Key]
        public int Id { get; set; }
        public string Borrower { get; set; }
        public string Lender { get; set; }
        [DisplayName("Item name")]
        public string ItemName { get; set; }
    }
}

项目视图（Index.cshtml）

@model IEnumerable<InAndOut.Models.Item>

<div class="container p-3">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <div class="card-body">
            <table id="myTable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Item Name</th>
                  <th>Borrower</th>
                  <th>Lender</th>
                  <th>Action</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

@section Scripts {

  @* These Scrips are Required *@
  <script src="~/js/signalr/dist/browser/signalr.js"></script>

  @*This one gives me an error of "ItemsHub undefined"*@
  @*<script src="~/js/items01.js"></script>*@

  @* This gives me an error "DataTable is not a function"
    This probably requires the *@
  <link href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

  <script src="~/js/items03.js"></script>
}

项目 JS 文件 (items03.js):

// This is from:
//
// Does Not Display any data
function getAllMessages() {
  $('#myTable').DataTable({
    processing: true,
    serverSide: false,
    ordering: true,
    paging: true,
    searching: true,
    columns: [
      { title: "Id" },
      { title: "ItemName" },
      { title: "Borrower" },
      { title: "Lender" },
      { title: "View Data" }
    ],
    columns: [
      { data: "Id" },
      { data: "ItemName" },
      { data: "Borrower" },
      { data: "Lender" },
      {
        data: null,
        defaultContent: "<button class='tblview'>View Id</button><button class='tblDelete'>Delete</button>"
      }
    ],
    ajax: {
      "url": "/Item/GetItems",
      "type": "GET",
      "dataSrc": ''
    },
    "columnDefs": [
      {
        "targets": 0,
        "visible": false
      }
    ]
  });
}

物品控制者（ItemController.cs）：

// This was updated from:
// 
public IActionResult GetItems()
{
    var items = new List<Item>
         {
             new Item { Id = 1, ItemName = "Computer", Borrower = "Justin", Lender = "Don"},
             new Item { Id = 2, ItemName = "Mouse", Borrower = "Mark", Lender = "Susan"},
             new Item { Id = 3, ItemName = "Monitor", Borrower = "Mark", Lender = "Joe"},
             new Item { Id = 4, ItemName = "Keyboard", Borrower = "Candace", Lender = "Angela"},
             new Item { Id = 5, ItemName = "Printer", Borrower = "Mike", Lender = "Watson"},
         };
      // JsonRequestBehavior requires Microsoft.AspNet.MVC
      // I do not want to reference it. I want to use Microsoft.AspNetCore.Mvc
      //return Json(items, JsonRequestBehavior.AllowGet);

      // I referenced this to mitigate the above issue
      // 
      //return Json(items);
      // Error: Cannot read property 'style' of undefined

      // This was another option
      //return Json(items, new Newtonsoft.Json.JsonSerializerSettings());
      // Error: Cannot read property 'style' of undefined

      // This seems to be returning the correct data format
      // Now the data just is not being displayed in the view
      // My error seems to be in the JavaScript
      return Json(new { data = items });
}

经过多次尝试，这是我能得到的最接近的。调试网站时，我没有收到任何错误，但模拟数据没有出现在项目视图中。

我怀疑我的问题出在 getAllMessages() 方法中的 Items JS 文件中。我只是不确定如何修复它。

Answer 1

asp.net 核心中响应的命名约定是 camel case 而不是 pascal case。您还需要删除 "dataSrc": ''.

更改如下：

columns: [
  { data: "id" },
  { data: "itemName" },
  { data: "borrower" },
  { data: "lender" },
  {
    data: null,
    defaultContent: "<button class='tblview'>View Id</button><button class='tblDelete'>Delete</button>"
  }
],
ajax: {
    "url": "/Item/GetItems",
    "type": "GET",
    //"dataSrc": ''
},

C# jQuery Ajax 数据表 ASP.NET Core 5 MVC

C# jQuery Ajax Datatables ASP.NET Core 5 MVC

ajax

datatables

asp.net-core-mvc

asp.net-core-signalr

.net-5