【MVC】AJAX+PartialView实现商城首页的楼层加载

使用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>