javascript - asp.net mvc 加载第一个条目和其他条目 - 迟到

Question

我正在使用 asp.net mvc razor该页面必须显示一个很长的列表。电话簿员工 - 约 500 人。由于实体太多，页面加载速度太慢。如何通过后台加载前 50 个条目，然后加载其他 450 个条目？非常感谢!

页面上的代码:

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

在 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

首先，我建议您使用外部 CSS 文件而不是内联样式。这样 CSS 就可以缓存在浏览器中，并可能帮助您提高性能。

此外，在具有“row”类的 div 中，您只有 12 列，应该是这样的。

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

我会尝试更改此操作以获取前 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);
            }
        }

稍后在 View 中完成对前 50 部手机的迭代后从 Controller 调用另一个函数来检索其余的手机。

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

并重申，这里的部分 View 可能会很好。