当我使用带有剃刀页面的插件 Jquery DataTable 时出现问题答案

【问题标题】：Problem when I use the plugin Jquery DataTable with razor page当我使用带有剃刀页面的插件 Jquery DataTable 时出现问题
【发布时间】：2021-09-21 23:20:11
【问题描述】：

我有一个带有实体框架的 .Net 5 应用程序，我将尝试使用 Jquery DataTable 插件来操作我的表，但我不明白为什么视图返回空表。在我的控制器中，GetProduct 方法具有以下代码：

模型产品

namespace EcommerceModels.Stock
{
    [Table("Products")]
    [Index(nameof(ProductID), IsUnique = true)]
    public class Product
    {
        #region "PROPRIEDADES PRODUCT"
        public int ProductID { get; set; }
        [ForeignKey("Category")]
        [Display(Name = "Categoria")]
        public int CategoryID { get; set; }
        public virtual Category Category { get; set; }
        [Required(ErrorMessage = "O Nome do produto é obrigatório.", AllowEmptyStrings = false)]
        [Display(Name = "Nome")] 
        public string NameProduct { get; set; }
        [Required(ErrorMessage = "A Decrição do produto é obrigatória.", AllowEmptyStrings = false)]
        [Display(Name = "Descrição")] 
        public string DescriptionProduct { get; set; }
        [Display(Name = "Tipo")] 
        public string TypeProduct { get; set; }
        [Required(ErrorMessage = "O Peso do produto é obrigatório.", AllowEmptyStrings = false)]
        [Display(Name = "Peso")] 
        public double WeightProduct { get; set; }
        [ForeignKey("Warehouse")]
        [Required(ErrorMessage = "O Armazém do produto é obrigatório.", AllowEmptyStrings = false)]
        [Display(Name = "Armazém")] 
        public int WarehouseID { get; set; }
        public virtual Warehouse Warehouse { get; set; }
        [Display(Name = "Descontinuado")] 
        public bool DiscontinuedProduct { get; set; }
        [Required(ErrorMessage = "O Preço de Compra do produto é obrigatório.", AllowEmptyStrings = false)]
        [Display(Name = "Preço de Compra")] 
        public double PricePurchaseProduct { get; set; }
        [Required(ErrorMessage = "O Preço de Venda do produto é obrigatório.", AllowEmptyStrings = false)]
        [Display(Name = "Preço")]
        //[RegularExpression(@"^[1-9]\d{0,2}(\.\d{3})*,\d{ 2}$")]
        public double PriceSellProduct { get; set; }
        [Display(Name = "Categoria")] 
        public string CategoryProduct { get; set; }
        [Required(ErrorMessage = "A Imagem do produto é obrigatória.", AllowEmptyStrings = false)]
        [Display(Name = "Imagem")] 
        public byte[] image { get; set; }
        public string Delete { get; set; }

        #endregion

        #region "CONTRUTORES PRODUCT"
        public Product()
        {

        }
        public Product(string delete, string categoryProduct, string nameProduct, string descriptionProduct, string typeProduct, double weightProduct, string warehouseProduct, bool discontinuedProduct, double pricePurchaseProduct, double priceSellProduct)
        {
            NameProduct = nameProduct;
            DescriptionProduct = descriptionProduct;
            TypeProduct = typeProduct;
            WeightProduct = weightProduct;
            DiscontinuedProduct = discontinuedProduct;
            PricePurchaseProduct = pricePurchaseProduct;
            PriceSellProduct = priceSellProduct;
            CategoryProduct = categoryProduct;
            Delete = delete;
            //WarehouseProduct = warehouseProduct;//Não entendi porque... ass: Myrella
        }
        #endregion

    }
}

产品控制器

[HttpGet]
public ActionResult GetProducts()
{   
   var listaProdutos = _context.Products.ToList();

   return Json(listaProdutos, new Newtonsoft.Json.JsonSerializerSettings());
            
}

INDEX.CSHTM

@model IEnumerable<EcommerceModels.Stock.Product>

@{
    ViewData["Title"] = "Index";
    //ViewBag.Title = "ClientesLista";
}
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<h1>Index</h1>
<div class="container">
    <div class="jumbotron">
        <h2>Cadastro de Produtos</h2>
    </div>
</div>
<p>
    <a asp-action="Create">Create New</a>
</p>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="myDataTable" class="table">
                                <thead>
                                    <tr>
                                        <th>@Html.DisplayNameFor(model=>model.CategoryProduct</th>
                                        <th>@Html.DisplayNameFor(model =>model.NameProduct)</th>
                                     <th>@Html.DisplayNameFor(model=>model.DescriptionProduct</th>
                                        <th>@Html.DisplayNameFor(model => model.PriceSellProduct</th>
                                        <th>@Html.DisplayNameFor(model => model.image)</th>
                                        
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <!-- JS -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Pega os dados do banco de dados para preencher o datatable
            debugger;

            var oTable = $("#myDataTable").DataTable({
                "language": {
                    "lengthMenu": "Exibe _MENU_ Registros por página",
                    "search": "Procurar",
                    "paginate": { "previous": "Retorna", "next": "Avança" },
                    "zeroRecords": "Nada foi encontrado",
                    "info": "Exibindo página _PAGE_ de _PAGES_",
                    "infoEmpty": "Sem registros",
                    "infoFiltered": "(filtrado de _MAX_ regitros totais)"
                },
                "processing": true, // mostrar a progress bar
                //"serverSide": true, // processamento no servidor
                "filter": true, // habilita o filtro(search box)
                "lengthMenu": [[3, 5, 10, 25, 50, -1], [3, 5, 10, 25, 50, "Todos"]],
                "pageLength": 3, // define o tamanho da página
                "ajax": {
                    "url": "/Products/GetProducts",
                    "type": "GET",
                    "dataType": "json"
                },
                "columns": [ //I think that the problem is here
                    { "data": "CategoryProduct", "autowidth": true },
                    { "data": "NameProduct", "autowidth": true },
                    { "data": "DescriptionProduct", "autowidth": true },
                    { "data": "PriceSellProduct", "autowidth": true },
                    { "data": "PriceSellProduct", "autowidth": true } 
                ]
            });
        });
    </script>
}

我认为问题出在这里：

"columns": [
                    { "data": "CategoryProduct", "autowidth": true },
                    { "data": "NameProduct", "autowidth": true },
                    { "data": "DescriptionProduct", "autowidth": true },
                    { "data": "PriceSellProduct", "autowidth": true },
                    { "data": "PriceSellProduct", "autowidth": true }
                ]

【问题讨论】：

这些属性的首字母需要小写，如{ "data": "categoryProduct","autowidth": true }...

标签： jquery asp.net-core razor

【解决方案1】：

您可以进行以下更改以使其正常工作。

1：将您的GetProducts 更改为：

[HttpGet]
public ActionResult GetProducts()
{   
   var listaProdutos = _context.Products.ToList();

   return new JsonResult(new { data = listaProdutos });
            
}

2：将您的 ajax 更改为：

"columns": [
                { "data": "categoryProduct", "autowidth": true },
                { "data": "nameProduct", "autowidth": true },
                { "data": "descriptionProduct", "autowidth": true },
                { "data": "priceSellProduct", "autowidth": true },
                { "data": "priceSellProduct", "autowidth": true }
            ]

【讨论】：