JQuery DataTables 插件不顯示數據 ASP.Net

Question

我有一個從數據庫加載我所有產品的索引操作。 我已經驗證有產品被拉取並將它們發送到視圖。

唯一的問題是當視圖加載時它說表中沒有數據條目？

控制器

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>
}