【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>
【MVC】AJAX+PartialView实现商城首页的楼层加载的更多相关文章
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- Ajax的ActionLink方法(适用于异步加载)
8.2.1 AJAX的ActionLink方法 在Razor视图中,AJAX辅助方法可以通过Ajax属性访问.和HTML辅助方法类似,Ajax属性上的大部分AJAX辅助方法都是扩展方法(除了Ajax ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- ASP.NET MVC中通过Request.IsAjaxRequest()来判断是否要加载公共视图
个人目测 Request.IsAjaxRequest()这个东西是判断前台提交过来的header中的 X-Requested-With:XMLHttpRequest来区分是不是ajax请求的. ASP ...
- jQuery加载外部文件的方式get、post、ajax、load的区别及异步加载的实现
一.$.post(url, [data], [callback], [type]) url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 ...
- jQuery:多个AJAX/JSON请求对应单个回调并行加载
因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
随机推荐
- 三种经典iPhone上网络抓包方法详解
此文章来自:听云博客 很多时候需要网络抓包分析,在iPhone上抓包稍有不同,下面介绍三种常用的方式.分析工具以wireshark为例. 一.最简单的方式:用PC作为热点,在PC上抓包 优点:简单 缺 ...
- 【代码笔记】iOS-饼图
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @class QuizChartView; @interf ...
- Oc中的数组
========================== 数组 ========================== 一.认识数组 oc中可以把NSObject对象的子类放到数组这个集合中,但是int.f ...
- C#复习⑧
C#复习⑧ 2016年6月22日 13:50 Main Attribute & Threads 属性与线程 1.Conditional Attribute 条件属性 #define debug ...
- 安装centos 7后恢复windows 2008R2 (Windows7)启动项
安装CentOS 7,安装之后发现Win2008R2的启动项不见了(Windows7同理).一般安装Linux过程中会自动识别windows系统并添加引导项,centos的问题在于默认不支持ntfs分 ...
- linux命令 wget
Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...
- JavaScript(五)——插入地图
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- raspberry pi2 智能小车源码及测试视频
作者:XIAOBO QQ:463431476 转载请注明作者Python 源代码 import RPi.GPIO as GPIO #human-computer-interaction import ...
- mysql 二进制文件增量备份
1.首先在my.cnf下添加二进制文件路径(windows下文件名称为my.ini) 在[mysqld]下添加 log-bin=mysql-bin 2.centos下默认安装mysql 5.6,数据默 ...
- Nagios check_logfiles插件的使用记录
1 获取与安装 https://labs.consol.de/assets/downloads/nagios/check_logfiles-3.7.4.tar.gz 链接可能会失效,建议去官网下载. ...