I am populating a razor table with a decent amount of data, but it takes > 10 minutes to load.

I am using a lot of logic in my view, and i know this isnt the best way to do this but this is what ive come up, as im new to razor.

names contains about 800 items, contacts 700, urls 3600, servers 1200

I dont think this is a lot but the way i am making the table is what i assume is holding up the application since i traverse these lists multiple times while within other ones.

Ive applied DataTables to this table, i thought it would help as limiting the rows show on the screen should mean the entire lists arent being traversed? Unless datatables still loads the entire table and just displays the 25. Is there a way to only load 100 results initially then slowly load the rest in over time?

Whats the best way to stop my app from hanging when creating this table

<table class="table table-responsive" id="result" data-page-length='25'>
        <thead>
            <tr>
                <th>Application</th>
                <th>Ministry</th>
                <th>Contacts</th>
                <th>Server</th>
                <th>URL</th>
            </tr>
        </thead>

        <tbody>
            @foreach(var l in Model.names)
            {
                <tr>
                    <td style="width: 27%">
                        @Html.DisplayFor(modelItem => l.appName)
                    </td>

                    <td style="width:20%">
                        @Html.DisplayFor(modelItem => l.ministry)
                    </td>

                    <td style="width:20%">
                        @foreach (var k in Model.contacts)
                        {
                            if(k.appName == l.appName){@Html.Raw(k.contactName + " - " + k.contactRole + "<br>")}                    
                        }
                    </td>

                    <td colspan="2">
                        <table>
                            @foreach(var s in Model.servers)
                            {
                            <tr >
                                @if(s.appName == l.appName)
                                {
                                    <td>
                                        <p class="big">
                                            @Html.Raw(s.server)
                                        </p>
                                    </td> 
                                }


                                <td>
                                    @foreach(var u in Model.filteredURls)
                                    {
                                        @if(u.appName == l.appName && u.server == s.server){@Html.Raw(u.url + "<br>")} 
                                    }
                                </td>

                            </tr>  
                            }

                        </table>
                    </td>  
                </tr>
            }
        </tbody>
    </table>
</div>

<script type="text/javascript" >
    jQuery(document).ready(function () {
        jQuery('#result').DataTable();
    });
</script>

Related posts

Recent Viewed