asp.net点击 查看更多 实现无刷新加载的实现代码

页面页面的js代码如下,


代码如下:

<script type="text/javascript">
$(function () {
function init(count, start) {
$.ajax({
type: "GET",
dataType: "json",
url: "Handler/Handler.ashx",
data: { action: "GetMoreNews", count: count, start: start },
beforeSend: function () { $("#divload").show(); $("#more2").hide(); },
complete: function () { $("#divload").hide(); $("#more2").show(); },
success: function (json) {
var str = "";
$.each(json, function (index, array) {
var str = "<div class='single_item'>"
+ "<div class='element_head'>"
+ "<div class='author'>" + array['Title'] +"</div>"
+ "<div class='date'>" + array['Date'] + "</div>"
+ "</div>"
+ "<div class='content'>" + array['Contents'] + "</div>"
+ "</div>";
$("#more").append(str);
});
if (json == "") {
$("#more2").html("没有更多内容加载了……");
}
}
});
}
var count = 5;
var start = 0;
init(count, start);
$(".get_more").click(function () {
start += 5;
init(count, start);
});
});
</script>

解释上面js的大体意思:定义一个init方法,此方法带有两个参数count和start,count意思是每次加载显示评论数,start意思是,每次从数据库中读取的位置,比如0,5,10。
Handler.ashx处理页面的代码如下


代码如下:

页面页面的js代码如下,
<b> <script type="text/javascript">
$(function () {
function init(count, start) {
$.ajax({
type: "GET",
dataType: "json",
url: "Handler/Handler.ashx",
data: { action: "GetMoreNews", count: count, start: start },
beforeSend: function () { $("#divload").show(); $("#more2").hide(); },
complete: function () { $("#divload").hide(); $("#more2").show(); },
success: function (json) {
var str = "";
$.each(json, function (index, array) {
var str = "<div class='single_item'>"
+ "<div class='element_head'>"
+ "<div class='author'>" + array['Title'] +"</div>"
+ "<div class='date'>" + array['Date'] + "</div>"
+ "</div>"
+ "<div class='content'>" + array['Contents'] + "</div>"
+ "</div>";
$("#more").append(str);
});
if (json == "") {
$("#more2").html("没有更多内容加载了……");
}
}
});
}
var count = 5;
var start = 0;
init(count, start);
$(".get_more").click(function () {
start += 5;
init(count, start);
});
});
</script></b>
解释上面js的大体意思:定义一个init方法,此方法带有两个参数count和start,count意思是每次加载显示评论数,start意思是,每次从数据库中读取的位置,比如0,5,10。
Handler.ashx处理页面的代码如下
[code]
case "GetMoreNews":
int count = int.Parse(context.Request.QueryString["count"].ToString());
int start = int.Parse(context.Request.QueryString["start"].ToString());
IList<WineNews> morenews = WineNewsManager.WineNewsQueryFromMToN(count,start);
Content = JavaScriptConvert.SerializeObject(morenews);
break;

WineNewsQueryFromMToN代码如下


代码如下:

public static IList<WineNews> WineNewsQueryFromMToN(int count,int start)
{
using (SqlConnection cn = new SqlConnection(SQLHelp.Conn))
{
cn.Open();
string sql = "SELECT TOP " + count + " f.* FROM tb_WineNews f WHERE Id NOT IN (SELECT TOP " + start + " Id FROM tb_WineNews ORDER BY Id desc) ORDER BY Id desc";
SqlCommand cmd = new SqlCommand(sql, cn);
SqlDataReader dr = cmd.ExecuteReader();
IList<WineNews> list = new List<WineNews>();
while (dr.Read())
{
WineNews wineNews = new WineNews();
if (dr["ID"] != DBNull.Value)
{
wineNews.ID = (int)dr["ID"];
}
if (dr["Title"] != DBNull.Value)
{
wineNews.Title = (string)dr["Title"];
}
if (dr["Contents"] != DBNull.Value)
{
wineNews.Contents = (string)dr["Contents"];
}
if (dr["Picture"] != DBNull.Value)
{
wineNews.Picture = (string)dr["Picture"];
}
if (dr["Date"] != DBNull.Value)
{
wineNews.Date = ((DateTime)dr["Date"]).ToString("yyyy-MM-dd HH:mm:ss");
}
list.Add(wineNews);
}
dr.Close();
return list;
}
}

运行效果如下

作者:陈赛

(0)

相关推荐

  • asp.net中Timer无刷新定时器的实现方法

    本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID="

  • asp.net 30分钟掌握无刷新 Repeater

    示例代码下载: /201109/yuanma/JQueryElementTest.rar本文中所包含的内容如下: * 准备 * 主要功能 * 绑定字段 * 绑定属性 * 基本设置 * 设置分页 * 设置字段 * 设置调用的服务端方法 * 请求/返回数据的格式 * 填充/搜索 * 更新 * 删除 * 新建 * 行状态说明 * 排序状态说明 * 设置模板 * ItemTemplate * UpdatedItemTemplate/InsertedItemTemplate * RemovedItemTe

  • Asp.net实现无刷新调用后台实体类数据并以Json格式返回

    新建一般处理程序 public class Temp { public int Index { get; set; } public string Description { get; set; } public string ImagePath { get; set; } public DateTime MyDate { get; set; } } //数据源 List<Temp> listTemp = new List<Temp>() { new Temp(){ Index=1

  • asp.net使用AJAX实现无刷新分页

    查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页. 在ASP.NET 中有很多数据展现的控件,比如Repeater.GridView,用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的. AJAX的分页可以很好的解决这些问题. 数

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • asp.net ajax实现无刷新验证码

    1.首先是在后台验证码的aspx文件的Page_Load中的事件代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; namespace 学生在线考试系统 { public partial class

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • asp.net Ajax之无刷新评论介绍

    首先还是建一个DoComments.aspx页面和一个DealComments.ashx页面(代码基本上都有注释,如果没写注释,请先看前几篇!).Docomments.aspx页面中的代码为: 复制代码 代码如下: <head runat="server"> <title></title> <script type="text/javascript"> var objXmlHttp = null; function C

  • Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现

    兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的.如果看到回显.当然就是成功了. 经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了.真是煞费苦心啊.但是做出来的瞬间还是蛮开心的. 第一步:我们需要加载几个JS库.jquery库.jquery.form.js库. 下载这两个库,并引用到页面中. 以下为页面中 JS 代码: 复制代码 代码如下: function upload() {            var options = {                type: "POST

  • Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码

    首先贴上Jquery的ajax: 复制代码 代码如下: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType: 'application/json;charset=utf-8', dataType: 'json', data: '{ PpareId:"' + varlue + '"}', success: function (data) { var dataObj = eval("(&q

  • asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;">     <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • asp.net 简便无刷新文件上传系统

    ps:flash实现的效果是好得多,但这不是我研究的范围,也没什么可比性. 兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 重置 选择文件 重置 选择文件 ps:由于需要后台,要测试系统请下载实例测试. ps2:在完整实例文件中,还有一个文件属性查看实例. 程序说明 [upload] 程序中最重要的方法就是upload了,调用它就可以进行无刷新上传.

随机推荐