使用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实现商城首页的楼层加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。