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

简介: 使用AJAX实现楼层加载的例子已经非常多,但是html代码大都是手动拼接的,编写不便,而且难以维护。 下面就使用AJAX+PartialView来实现 1.html代码 2.

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

 

相关文章
|
6月前
|
数据采集 Web App开发 前端开发
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
|
设计模式 前端开发 Java
JavaWeb07(MVC应用01[家居商城]&连接数据库)
JavaWeb07(MVC应用01[家居商城]&连接数据库)
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
176 0
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
185 0
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(开篇)
[回馈]ASP.NET Core MVC开发实战之商城系统(开篇)
224 0
|
JSON 前端开发 数据格式
ztree+ajax+json请求,实现加载一棵ztree树
ztree+ajax+json请求,实现加载一棵ztree树
79 0
ztree+ajax+json请求,实现加载一棵ztree树
|
存储 前端开发
ajax实现简单的点击左侧菜单,右侧加载不同网页
ajax实现简单的点击左侧菜单,右侧加载不同网页
94 0
|
前端开发 数据库
JavaWeb08(MVC应用02[家居商城]&连接数据库)
JavaWeb08(MVC应用02[家居商城]&连接数据库)
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。
179 0
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(六)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理功能开发,仅供学习分享使用,如有不足之处,还请指正。
251 0