你的位置:首页 > ASP.net教程

[ASP.net教程]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>