正文
【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 + , successload) == -) {
loadFloor(index + );
successload.push(index + );
}
}
});
}
//楼层商品绑定
function loadFloor(loadIndex) {
if (loadIndex == ) {
$.ajax({
url: $("#GetProductsUrl").val(),
type: "POST",
dataType: "html",//格式是html
success: function (data) {
$("#floor1").html(data);
},
error: function (msg) {
alert("error:" + msg.responseText);
}
});
}
if (loadIndex == ) {
$.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>
