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

Answer 1

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.