#jquery #asp.net-core #razor
Вопрос:
У меня есть приложение .Net 5 с Entity Framework, и я собираюсь попробовать использовать плагин 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());
}
Указатель.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 }
]
Комментарии:
1. Вам нужно записать первую букву этих атрибутов в нижнем регистре,например
{ "data": "categoryProduct","autowidth": true }...
Ответ №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 }
]