Troubleshooting: ASP.Net data not displaying correctly with JQuery DataTables Plugin

My index action loads all the products from the database and sends them to the view. I have confirmed that the products are being pulled successfully.

The problem arises when the view is loaded, as it displays a message indicating there are no data entries in the table.

Controller

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

View With script

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

I seem to be encountering an issue where the data is not displaying correctly in my view. The data table appears correctly but without any content. Any assistance or suggestions would be greatly appreciated.

Answer №1

This solution should get the job done:

@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 item in @model) 
    {
        <tr>
            <td>@item.UPC</td>
            <td>@item.SKU</td>
            <td>@item.Cost</td>
            <td>@item.DiscountPercent</td>
            <td>@item.ItemCode</td>
            <td>@item.CreatedAt</td>

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to utilize SignalR with conventional Asp .Net (not ASP. Net Core)?

I am facing some confusion regarding SignalR and its compatibility with ASP.NET (not ASP.NET Core). I am currently working on a project in ASP.NET, but I cannot seem to find any resources or examples that mention SignalR's capability to work on tradit ...

Vows.js: Utilizing data from parent topics in nested topics

Is there a way to access the return value of an outer topic from within a test in an inner topic? To clarify, consider this example: "build.css" : { topic : function(file) { fs.readFile(fixtures + "/public/build.css", "utf8", this.callback); }, ...

What is the best way to align a <div> element below another without being on the same line?

I'm currently working on developing a snake game. My focus right now is figuring out how to make the body parts of the snake follow the head and be positioned after it. <!--Player--> <div class="snake"></div> So here we have the sn ...

Enterprise Library Logging doesn't store logs in SQL databases

Utilizing EntLib 6 for logging a web application proved to be challenging as I implemented multiple layers. To streamline the process, I centralized the logging logic within a library accessible across all layers. However, despite my efforts, the logging ...

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

Is there a way to deactivate the click function in ngx-quill editor for angular when it is empty?

In the following ngx-quill editor, users can input text that will be displayed when a click button is pressed. However, there is an issue I am currently facing: I am able to click the button even if no text has been entered, and this behavior continues li ...

Validating Form Inputs with Multiple Button Options

I currently have a form with multiple buttons that trigger PHP processing. The existing code for the buttons is as follows: <button id="btn_back" class='ym-button ym-success' name="action_back">Back</button> <button id="btn_finis ...

Using Rails: How can I insert form data upon clicking?

In my Rails application, I have a basic form for shipping details: <% form_for shipping_object do |f| %> <%= f.text_field :address1, :placeholder => "Address Line 1*", :class => "forms" %><br/> <%= f.text_field :address2, :place ...

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

"Rearranging the Firefox ghost image by dragging and dropping it

My drag and drop game is working perfectly on all browsers except for Firefox. In Firefox, the ghost image that appears when an item is dragged seems to be positioned very far away from the cursor. Although the ghost image can still be seen on the page, it ...

Updating variable value in a Javascript function

I'm currently working on a signup page and I need to verify if an email address already exists in the database. var emailnum = getEmailCount(`select * from contactinfo where email='${email}'`); console.log(emailnum); // Output shows ...

The Spotify Web API encountered an uncaught TypeError (in promise) stating that it cannot read the property 'setState' of an undefined object

I am facing an issue with Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined. I'm attempting to utilize this.setState to render some tracks, but I want to limit it to only 9 tracks to check if everything is done co ...

Sending a content-body with a GET request using this verb-type is not allowed

Currently, I am working on a task where I need to re-route a request received through the WebApi to another website. The objective is to receive a request, for example: http://localhost:9999/#q=test, and then redirect it to the actual site (for testing pu ...

Utilizing custom-built process to merge directory files in ASP.NET

I am looking to combine files from two different directories into a single file. Even though I am aware of native minification, I am seeking a custom solution for my single-page application, which involves specific conditions for including files based on u ...

Is implementing an API necessary for handling this basic event in Express JS?

Lately, I've been encountering challenges with the backend, particularly when working with Express JS. I realize that part of the problem might be my own misunderstanding - assuming that Express JS is a framework generator for MVC or solely for authen ...

Awaiting Node.js/Mongoose to patiently loop through asynchronous tasks

I have a question that might be quite basic for some. I am working with an array in my mongodb database and need to query/find multiple elements from it. My goal is to set an error variable to true if at least one element passes an if-statement. However, ...

Tips for validating updates in MongooseEnsuring data integrity is

My current Schema does not validate upon updating. Can you please point out where I went wrong and help me fix it? ...

I am looking to access a public property during the pre-render stage in VB.NET and also handle a click event for a custom server control

I'm struggling to grasp the life cycle of a page. Within my custom server control, I have a simple button: Public Class MyButton Inherits Button Private Property _identity As String = Nothing Public Property identity() As String Get Ret ...

Utilize the keyof operator on a nullable property

Is there a way to utilize keyof in defining function parameters based on an optional field within an Object, while also including a default value? interface test { example?: { choice1: string, choice2: string } } function sample(param: keyof ...

Implementing the kendo-grid directive with a headerless row

Is it possible for the Kendo UI - Grid / AngularJS to display a grid without a header row? I am hoping to achieve this: https://i.sstatic.net/guYPf.jpg instead of this: https://i.sstatic.net/xlfgC.jpg If it is supported, what should the options in its ...