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