标签:
使用AJAX实现楼层加载的例子已经非常多,但是html代码大都是手动拼接的,编写不便,而且难以维护。
下面就使用AJAX+PartialView来实现
1.html代码
<!--楼层1开始--> <div class="floor" id="floor1"> </div> <!--楼层1结束--> <!--楼层2开始--> <div class="floor" id="floor2"> </div> <!--楼层2结束-->
2.js代码
<script type="text/javascript"> var successload = new Array(); //已加载楼层 //滚动条滚动 $(window).scroll(function () { scrollload(); }); //滚动条滚动事件 function scrollload() { var scrolltop = $(this).scrollTop(); //当内容滚动到底部时加载新的内容 $(".floor").each(function (index, value) { if (scrolltop + $(window).height() >= $(this).offset().top && $(this).offset().top + $(this).height() >= scrolltop) { if ($.inArray(index + 1, successload) == -1) { loadFloor(index + 1); successload.push(index + 1); } } }); } //楼层商品绑定 function loadFloor(loadIndex) { if (loadIndex == 1) { $.ajax({ url: $("#GetProductsUrl").val(), type: "POST", dataType: "html",//格式是html success: function (data) { $("#floor1").html(data); }, error: function (msg) { alert("error:" + msg.responseText); } }); } if (loadIndex == 2) { $.ajax({ url: $("#GetProductsUrl").val(), type: "POST", dataType: "html",//格式是html success: function (data) { $("#floor2").html(data); }, error: function (msg) { alert("error:" + msg.responseText); } }); } } </script>
3.控制器
[HttpPost] public ActionResult GetProducts() { return PartialView("Products"); }
4.PartialView页面
@{ Layout = null; } <p>welcome</p>
【MVC】AJAX+PartialView实现商城首页的楼层加载
标签:
原文地址:http://www.cnblogs.com/xcsn/p/4816699.html