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

Posted 2023-03-31

【中文标题】C# jQuery Ajax 数据表 ASP.NET Core 5 MVC

【英文标题】：C# jQuery Ajax Datatables ASP.NET Core 5 MVC

【发布时间】：2021-08-27 03:45:26

【问题描述】：

我正在尝试实现 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:
//https://***.com/questions/51764211/jquery-datatable-loading-using-ajax-asp-net-mvc
// 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:
// https://***.com/questions/51705732/jquery-datatable-ajax-no-data-available-mvc
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
      // https://***.com/questions/38578463/asp-net-core-the-name-jsonrequestbehavior-does-not-exist-in-the-current-cont
      //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 文件中。我只是不确定如何解决它。

【参考方案1】：

asp.net core 中响应的命名约定是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": ''
,

【讨论】：

我已经为这件事苦苦挣扎了一周。非常感谢你。数据正在显示