asp.net mvc loading first entries and the others - late

Question

I'm using asp.net mvc razor The page must show a very long list. Phonebook employees - about 500 people. Page is loading too slowly because of too many entities. How to load first 50 entries, and later the others 450 entries - by background? Thank you so much!

Code on page:

@model WarehouseSearch.Controllers.PhonesList

@{
    string LastFirstChar = "";
}

<div id="main-content">  

    <div class="container">    

        <div class="row">
            <div class="col-md-10">
                <h2>Phonebook </h2>
            </div>
            <div class="col-md-4">
                &nbsp;
            </div>
        </div>


            <div class="row">
                <div class="col-md-8" style="border:1px solid #ddd;background-color:white">

                    <div class="row" style="background-color:rgba(247, 225, 181, 1);margin-bottom:1em;padding:0.5em;">
                        <div class="col-md-7 text-left" style="padding-left: 1em; padding-top: 0.2em; padding-right: 1em; padding-bottom: 0.3em;">
                            <span class="fa fa-user fa-2x blue"></span>&nbsp;&nbsp;<input type="text" name="Search" id="search_input" placeholder="search ..." class="search_input" />
                        </div>


                        <div class="col-md-3">
                        </div>
                    </div>

                    <ul id="phones" class="interleave">
                        @foreach (WarehouseSearch.GetPeoplePhonesListResult p in Model.allphones)
                        {
    <li style="padding-top:2em;" class="row">

        <div class="col-md-2">
            @if (LastFirstChar != @p.FirstChar)
            {
                <span style="background-color:#41a7e2;color:white;position:relative;left:-4em;font-size:210%;padding:0.3em;" class="text-right"><b>@p.FirstChar</b></span>
                LastFirstChar = p.FirstChar;
            }

            <img style="width: 85%; display: block;" src="@p.BigPhoto" /><br />
        </div>

        <div class="col-md-5">

            <a href="@Url.Action("Card", "PeoplePhones", new { p_no = p.p_no })"><h3 class="phone smarttlink" style="margin-bottom:0.1em;margin-top:0;">@p.Family</h3></a>
            <div>@p.FirstMiddleName</div>
            <br />
            <small style="color:#666">@p.Title</small>         
        </div>

        .... some other info about people....
          </li>

                        }
                    </ul>
                </div>



            </div>
        </div>
</div>


<script>

    $('#search_input').animate({
        //"width": "100%",
        //"padding": "4px",
        "opacity": 1
    }, 300, function () {
        $(this).focus();
    });




    $(function () {
     $(function () {
            $('#search_input').fastLiveFilter('#phones'
                , {
                      selector: ".phone, .phone2"
                    , callback: function (total) {
                        $('.phone').unhighlight();                      
                        searchTerm = $('#search_input').val();

                        if (searchTerm.length > 0) {
                            $('.phone').highlight(searchTerm);
                        }
                    }
                    , translit : true
                }

                );
        });



    });



</script>

in Controller: :

public ActionResult List()
        {
            using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
            {
                PhonesList pl = new PhonesList();

                pl.allphones = sqldb.GetPeoplePhonesList().ToList<GetPeoplePhonesListResult>(); 
                return View("~/Views/Home/PeoplePhones.cshtml", pl);
            }
        }

Read this: http://stackoverflow.com/questions/29512149/paging-with-pagedlist-is-it-efficient — Offir, Jun 27 '16 at 09:30
You dont understand me. I dont need paging.The task is to show all on one page, but that page worked quickly — Nata Ermakova, Jun 27 '16 at 10:10
@OffirPe'er I edit post and paste code ot this page. It is running slow even if I remove all jquery scripts and leave on the page only the name and phone — Nata Ermakova, Jun 27 '16 at 10:37
Show the function where it binds the server side data to the html, are you doing it using JavaScript? — Offir, Jun 27 '16 at 11:25
I find the answer! https://www.devtxt.com/blog/asp-net-mvc-infinite-scrolling — Nata Ermakova, Jun 27 '16 at 12:16
It looks very similar to what I recommended with the partial view :) Any way try to change the css, it might boost the loading of the page and then you won't have this problem. — Offir, Jun 27 '16 at 12:19

score 1 · Accepted Answer · answered Jun 27 '16 at 12:02

First I would recommend you to use an external CSS file instead of inline styling. That way the CSS can be cached in the browser and might help you to boost the performance.

Also in a div with a class "row" you have only 12 columns,it should be like this.

 <div class="row">
     <div class="col-md-10">
                <h2>Phonebook </h2>
     </div>
     <div class="col-md-2">
                &nbsp;
     </div>
 </div>

I would try change this Action to take the first 50

public ActionResult List()
        {
            using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
            {
                PhonesList pl = new PhonesList();

                pl.allphones = sqldb.GetPeoplePhonesList().Take(50).ToList<GetPeoplePhonesListResult>(); 
                return View("~/Views/Home/PeoplePhones.cshtml", pl);
            }
        }

And later in the view after it finished to iterate over the top 50 phones Call to another function from the controller that will retrieve the rest of the phones.

@{
  ((HomeController)this.ViewContext.Controller).GetLast450();
}

And iterate that, probably a partial view will be good here.

Can you tell what helped exactly? – Offir Jun 28 '16 at 13:41 — Offir, Jun 28 '16 at 13:41

asp.net mvc loading first entries and the others - late

1 Answers1