Плагин JQuery DataTables не отображает данные ASP.Net

Question

У меня есть действие index, которое загружает все мои продукты из базы данных.Я проверил, что продукты извлекаются, и он отправляет их в представление.

Единственная проблема заключается в том, что при загрузке представления оно сообщает, что в таблице нет записей данных?

Контроллер

public class InventoryController : Controller
{
    private readonly IRepository<Product> _productContext;
    public InventoryController(IRepository<Product> productContext)
    {
        _productContext = productContext;
    }
    // GET: Inventory
    public ActionResult Index()
    {
        List<Product> Products = _productContext.Collection().ToList();
        return View(Products);
    }
}

Просмотр со скриптом

@model IEnumerable<SuperStockpile.Core.Models.Product>

@{
    ViewBag.Title = "Inventory";
}

<h2>Inventory</h2>

<p>
    @Html.ActionLink("Add New Product","Create","Inventory",null,new {@class = "btn btn-primary"})
</p>
<table class="table table-hover table-bordered" id="products">
    <thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.UPC)</th>
        <th>@Html.DisplayNameFor(model => model.SKU)</th>
        <th>@Html.DisplayNameFor(model => model.Cost)</th>
        <th>@Html.DisplayNameFor(model => model.DiscountPercent)</th>
        <th>@Html.DisplayNameFor(model => model.ItemCode)</th>
        <th>@Html.DisplayNameFor(model => model.CreatedAt)</th>

    </tr>
    </thead>
    <tbody></tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function() {
            $('#products').DataTable();
        });
    </script>
}

Я действительно не уверен, что делаю неправильно.Таблица данных отображается в представлении, как и должно быть.Как будто данные не попадают на мой взгляд?

Буду признателен за любую помощь или рекомендации.

Answer 1

Это должно работать:

@model IEnumerable<SuperStockpile.Core.Models.Product>

@{
    ViewBag.Title = "Inventory";
}

<h2>Inventory</h2>

<p>
    @Html.ActionLink("Add New Product","Create","Inventory",null,new {@class = "btn btn-primary"})
</p>
<table class="table table-hover table-bordered" id="products">
    <thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.UPC)</th>
        <th>@Html.DisplayNameFor(model => model.SKU)</th>
        <th>@Html.DisplayNameFor(model => model.Cost)</th>
        <th>@Html.DisplayNameFor(model => model.DiscountPercent)</th>
        <th>@Html.DisplayNameFor(model => model.ItemCode)</th>
        <th>@Html.DisplayNameFor(model => model.CreatedAt)</th>

    </tr>
    </thead>
    <tbody>
 @foreach (var m in @model) 
    {
        <tr>
            <td>@m.UPC</td>
            <td>@m.SKU</td>
            <td>@m.Cost</td>
            <td>@m.DiscountPercent</td>
            <td>@m.ItemCode</td>
            <td>@m.CreatedAt</td>

        </tr>
    }
</tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function() {
            $('#products').DataTable();
        });
    </script>
}