码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-17 17:36:53      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!