js 滾動加載數據

最近做了下滾動加載數據，整理了代碼，公布出來，希望對有需求的人有幫助。

public ActionResult About()
        {

            var list = new List<UserInfo>(); for (int i = 1; i <= 1000; i++) { list.Add(new UserInfo() { ID=i, Name="xxxxxx", Name1 = "xxxxxx", Name2 = "xxxxxx", Name3 = "xxxxxx", Name4 = "xxxxxx", }); } return View(list); } [HttpPost] public ActionResult AddUser(int id) { var list = new List<UserInfo>(); var temp = id + 100; var tb = "<td>{0}</td>"; StringBuilder sb = new StringBuilder(); for (int i = id; i < temp; i++) { sb.Append("<tr>"); sb.Append(string.Format(tb,i)); sb.Append(string.Format(tb, "xxxxxx")); sb.Append(string.Format(tb, "xxxxxx")); sb.Append(string.Format(tb, "xxxxxx")); sb.Append(string.Format(tb, "xxxxxx")); sb.Append(string.Format(tb, "xxxxxx")); sb.Append("</tr>"); } return Content(sb.ToString()); } <div id="box1"> <table id="container"> @foreach (var item in list) { <tr> <td>@item.ID</td> <td>@item.Name</td> <td>@item.Name1</td> <td>@item.Name2</td> <td>@item.Name3</td> <td>@item.Name4</td> </tr> } </table> </div> <script type="text/javascript"> $(document).ready(function () { $("#box1").scroll(function () { var viewH = $(this).height();//可見高度 var contentH = $(this).get(0).scrollHeight;//內容高度 var scrollTop = $(this).scrollTop();//滾動高度 var count = $("#container tr").length; if (contentH - viewH - scrollTop<=100) { $.ajax({ url: "/Home/AddUser?id=" + count, type: "POST", success: function (data) { $("#container").append(data); } }); } }); }) </script>