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