locked
MVC: Populate Page using DataTable RRS feed

  • Question

  • User1324715958 posted

    I'm working on a view and I have a few questions for completing my task. I want to make an expandable data grid. In web forums I could just drag & drop the data grid controller and set the source to the data table. But MVC of course is different. So how do I do this in MVC? Here is my current code:

    <div id="div-profile-container-sub">
                <!--My Products-->
                <div class="title-bar">My Products</div>
                <div class="title-bar-body" id="My_Products">
                    <br />
                    <table class="table-high-scores" align="center">
                        <!--Row 1-->
                        <tr>
                            <td class="td-high-score-title">
                                Product Name
                            </td>
                            <td class="td-high-score-title">
                                Purchase Date
                            </td>
                            <td class="td-high-score-title">
                                Purchase Amount
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

    Here is what the page/view looks like for users currently:

    I would like to keep my current column headers if I can and just add the data in using javascript. I'm already passing data in via model for most of the page. So I cant just pass this in via model. Plus I'd like this to load async in the background so the page will load first and this data can load & populate later. If that makes sense. 

    Thursday, June 13, 2019 7:30 PM

All replies

  • User475983607 posted

    First, you need to stop using DataTables.  MVC uses Models.  Model is part of the acronym not DataTable.

    Once you craft a Model which is just a class then you can take advantage of MVC scaffolding.   Right click on any controller action and select Add View...  A wizard pops up where you can select a Template type; Create, Edit, List, etc  and a Model which creates a strongly typed View.

    If you are using Entity Framework then you can create a CRUD Controller and associated Views in one shot.

    These concepts are covered in the getting started docs.

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

    Thursday, June 13, 2019 7:46 PM
  • User1324715958 posted

    The API is returning a data table. I can change it to a class model if that's what your recommending but I'm already passing in a model to the view currently. I wanted to call the API using Javascript, populate the data and then display it in a grid like format. 

    Thursday, June 13, 2019 9:06 PM
  • User839733648 posted

    Hi UOKSoftware,

    According to your description, I have several concerns.

    UOKSoftware

    I would like to keep my current column headers if I can and just add the data in using javascript

    Do you mean that you have use datatable to define the data which will populate on the page?

    Could you please how is your passing data defined?

    UOKSoftware

    'd like this to load async in the background so the page will load first and this data can load & populate later.

    Do you mean that you want to load the table with delay?

    In my opinion, I suggest that you could use ajax to load the data on your page.

    You could define a function to return the data in your controller.(And it is encouraged to use List<> to create your data)

    Then use .$get() to get the data to show.

    Here is a perfect tutorial video you may refer to: How to display table data from database in Asp.net MVC using Jquery Ajax

    Best Regards,

    Jenifer

    Friday, June 14, 2019 7:27 AM