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

【MVC】AJAX+PartialView实现商城首页的楼层加载的更多相关文章

  1. ajax按楼层加载数据

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  2. Ajax的ActionLink方法(适用于异步加载)

    8.2.1  AJAX的ActionLink方法 在Razor视图中,AJAX辅助方法可以通过Ajax属性访问.和HTML辅助方法类似,Ajax属性上的大部分AJAX辅助方法都是扩展方法(除了Ajax ...

  3. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  4. ASP.NET MVC中通过Request.IsAjaxRequest()来判断是否要加载公共视图

    个人目测 Request.IsAjaxRequest()这个东西是判断前台提交过来的header中的 X-Requested-With:XMLHttpRequest来区分是不是ajax请求的. ASP ...

  5. jQuery加载外部文件的方式get、post、ajax、load的区别及异步加载的实现

    一.$.post(url, [data], [callback], [type])  url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 ...

  6. jQuery:多个AJAX/JSON请求对应单个回调并行加载

    因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...

  7. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  8. AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

  9. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

随机推荐

  1. 三种经典iPhone上网络抓包方法详解

    此文章来自:听云博客 很多时候需要网络抓包分析,在iPhone上抓包稍有不同,下面介绍三种常用的方式.分析工具以wireshark为例. 一.最简单的方式:用PC作为热点,在PC上抓包 优点:简单 缺 ...

  2. 【代码笔记】iOS-饼图

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @class QuizChartView; @interf ...

  3. Oc中的数组

    ========================== 数组 ========================== 一.认识数组 oc中可以把NSObject对象的子类放到数组这个集合中,但是int.f ...

  4. C#复习⑧

    C#复习⑧ 2016年6月22日 13:50 Main Attribute & Threads 属性与线程 1.Conditional Attribute 条件属性 #define debug ...

  5. 安装centos 7后恢复windows 2008R2 (Windows7)启动项

    安装CentOS 7,安装之后发现Win2008R2的启动项不见了(Windows7同理).一般安装Linux过程中会自动识别windows系统并添加引导项,centos的问题在于默认不支持ntfs分 ...

  6. linux命令 wget

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  7. JavaScript(五)——插入地图

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  8. raspberry pi2 智能小车源码及测试视频

    作者:XIAOBO QQ:463431476 转载请注明作者Python 源代码 import RPi.GPIO as GPIO  #human-computer-interaction import ...

  9. mysql 二进制文件增量备份

    1.首先在my.cnf下添加二进制文件路径(windows下文件名称为my.ini) 在[mysqld]下添加 log-bin=mysql-bin 2.centos下默认安装mysql 5.6,数据默 ...

  10. Nagios check_logfiles插件的使用记录

    1 获取与安装 https://labs.consol.de/assets/downloads/nagios/check_logfiles-3.7.4.tar.gz 链接可能会失效,建议去官网下载. ...