Плагин jQuery DataTables не показывает данные ASP.Net

#javascript #c# #asp.net #asp.net-mvc #datatables

#javascript #c# #asp.net #asp.net-mvc #таблицы данных

Вопрос:

У меня есть действие 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>
}

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

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

1. Я бы начал с изменения @model IEnumerable<SuperStockpile.Core.Models.Product> на @model List<SuperStockpile.Core.Models.Product> . Итерация по IEnumerable иногда приводит к странным для меня последствиям.

2. Когда я это сделал, я потерял доступ ко всем свойствам моего продукта, и веб-страница выдала ошибку.

3. На самом деле это не имеет смысла. Ты @using System.Collections.Generic ? Вы возвращаете List<> в представление, поэтому, естественно, представление должно быть @model List<> вверху. Возвращая List<> в представление только для интерпретации его как @model IEnumerable<> в представлении, вы теряете некоторые возможности List класса

4. Да, я использую это. И да, вместо этого я поместил @model List<> вверху, и там сказано, что у модели нет свойства с именем UPC.

5. Потому что это @Html.DisplayNameFor(model => model.UPC) пытается получить доступ к свойству UPC для List объекта, а не для элементов в List . Вам нужно поместить все данные @Html.DisplayNameFor внутрь цикла foreach и в этом цикле foreach выполнить foreach (var m in Model) с @Html.DisplayNameFor(model => m.UPC)

Ответ №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>
}