c#-ajax用分四部打造漂亮的新闻列表(无刷新分页-内容预览)

l 第一节新闻列表是信息管理系统中最常见的，也是最简单的，一些简单的新闻列表就是一个table，然后里面循环写入数据，没有分页。这样如果数据量很大时，情况就变得十分糟糕，往往打开一个网页就需要很长的时候，大大的降低了的用户的体验效果。而分页的话也是很有讲究的，不同的数据库往往对应着不同的分页方式。这里不做讨论。下面我们仅以简单的access作为数据库来进行新闻列表的无刷新分页。无刷新意味着要使用ajax技术，当然无刷新不仅仅是ajax，还有其他的方法做到无刷新，如将所有的数据一次性读取出来，然后根据页数的不同显示不同的内容，这个仅仅靠JavaScript就可以实现了，但是这个无疑是饮鸩止渴，和上面没有分页效果是一样的，换汤不换药，仅仅是感觉上很好而已。要使用ajax可以自己手动写，也可以使用框架，我比较倾向于使用jquery来写ajax，而且vs2010对jQuery的支持是很好的。而分页的话，jQuery已经有现成的插件供我们使用。下面开始打造漂亮的新闻第一步：需求分析随便在做什么的时候，一定要知道你的需求是什么，不然忙活了半天发现这根本不符合需求，结果白忙活一场。我们的需求如下：1。动态的新闻列表（这个很简单）2。可以分页读取新闻列表（这个也不难）3。可以无刷新的分页读取新闻列表（这个稍微有点难度）4。可以预览新闻的内容（这个也稍微有点难度）5。界面友好（这个是必须的）下面来详细谈谈我们的需求：对于1、2和5就不做说明了，网上可以找到大把的资料。就第三点和第四点来说明下，其实如果是懂一点ajax的话，这些是小儿科。3.=无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。4=预览新闻内容，在鼠标移到连接上面时触发事件，得到新闻的id并使用ajax去数据库中查找相应的新闻内容，截取一部分显示在div里面，这里有一个要注意的地方，就是如果截取的内容里面有html标记时要特别注意下。ok，需求分析弄好后，开始着手做了。准备如下环境：vs2010 +access +jquery开发环境vs也可以使用2008sp1，因为这个以上的版本才对jQuery有智能提示，当然也可以使用其他的版本，就是没有智能提示的效果。access数据库的版本为2003jquery：1.3.2以上版本当然还有其他的文件需要用到，这个以后才说，先来预览下最后的效果吧：(分页的被预览的部分遮住了.)注：本文的对象主要是ajax新手，或者是完全没有接触过，但想快速使用ajax做出东西来的人。l 第二节在上一篇文章中，我们进行了需求分析，如下：1。动态的新闻列表（这个很简单）2。可以分页读取新闻列表（这个也不难）3。可以无刷新的分页读取新闻列表（这个稍微有点难度）4。可以预览新闻的内容（这个也稍微有点难度）5。界面友好（这个是必须的）按照软件工程的顺序，我们应按照这样的顺序开发软件：可行性分析=需求分析=概要设计=详细设计=编码=测试由于我们仅仅是项目中的一个小部分，但也差不多按照以上的顺序进行开发，这是一个良好的习惯。我们将概要设计和详细设计放在一起。下面我们来设计数据库，由于采用的是Access数据库，而且字段也相对简单。就一张表tb_news，数据库名为news。列名称类型长度news_id长整型4news_title文本255news_content内存-news_time日期/时间8news_readtimes长整型4当然，你可以根据自己的需要增加字段或减少字段。其中news_content尽可能的长一些，符合新闻的长度。数据库设计完毕后，我们可以开始编码了。首先建立项目（我比较偏向于web application，而不是website），将其命名为MyNewsList。如下图所示：如果是用vs2010正式版，创建好后会发现会生成很多文件，它是vs2010自带的有些样式的页面（母版页），有点类似于 mvc。这里我们不需要，将他们删除并且将一些文件夹重命名，将Account文件夹、About.aspx、Default.aspx、Global.asax和site.Mater删掉，并且将Scripts文件夹重命名为js文件夹；将Styles重命名为css文件夹，这样更符合我们的习惯，当然你也可以不改。并且将news数据库文件拷贝至App_Data文件夹。（如果你是vs2008或者其他版本，做类似的操作）最后的列表如下图：ok，地基我们已经搭建好了，现在我们要筑房子了。建立NewsList.aspx页面，这就是我们的新闻列表页面。在编辑NewsList.aspx之前，我们来先配置一下web.config文件，建立于数据库的连接。将改为：我们注意到：Data Source=|DataDirectory|news.mdb;中的DataDirectory，这就是为什么我们要将数据库文件拷贝到App_Data文件夹下，这样就很方便的调用数据库了，不必为路径的问题而烦恼了。配好web.config文件后，我们开始设计前台。NewsList.aspx页面前台body的代码如下：新闻的标题阅读次数发表我们看到这是一个table，但里面并没有绑定或者写一些代码，这是为了以后使用ajax添加上去。同时我们注意到有这样的一些id这是以后使用json绑定是需要的。现在，我们来写一些后台代码，尝试着连接数据库。为了简单起见，我把连接数据库的代码写到NewsList.aspx的后台代码及NewsList.aspx.cs中，其实我们在实际的项目中，往往会把数据库操作的那块封装起了，只提供接口。后台代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data.OleDb;namespace MyNewsListpublic partial class NewsList : System.Web.UI.Page/数据库连接字符串public static string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStringsNewsConnection.ToString();public static OleDbConnection conn;protected void Page_Load(object sender, EventArgs e)if (!Page.IsPostBack)TestConnection();/测试连接数据库protected void TestConnection()conn = new OleDbConnection(connectionString);/创建新的连接tryconn.Open();if (conn.State = System.Data.ConnectionState.Open)Response.Write(数据库连接成功);elseResponse.Write(连接状态是关闭的);catch (Exception e)Response.Write(连接失败，错误原因：+e.Message);/如果连接失败将错误显示出来finallyconn.Close();/一定要及时关掉conn当我们运行页面后发现“数据库连接成功”后，我们才开始下面的code编码。l 第三节前面两个章节我们将需求分析和概要设计简单介绍了，接下来是重点的编代码的阶段了（实现无刷新分页）。在编写代码之前，一定要有计划的去编写代码，不能一开始啥也不管就开始编代码，除非你特牛。我们来看一下需求分析：3.=无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。这里面有两个事件，都是js事件，我们用jquery代码来实现。分页的话，我们采用jquery的分页插件pagination，官方地址为/project/pagination下载js文件和css文件（最下面附下载地址）先讲讲它的基本用法：跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$(#page).pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。例如下面的使用代码：$(#Pagination).pagination(56, num_edge_entries: 2, num_display_entries: 4, callback: pageselectCallback, items_per_page:1);这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。具体的用法可以参考官方文档或是/aosiyelong/archive/2010/03/30/1700262.html然后讲讲如何将它整合到我们这边来。在NewsList.aspx页面中添加相关的js文件和css文件（最下面附下载地址）：jquery-1.4.1.js，pagination.js然后，我们来看关键的js代码：$().ready(function() InitData(0););/处理翻页function pageselectCallback(page_id, jq) /alert(page_id);InitData(page_id);function InitData(pageindx)var tbody = ;var orderby=news_id;$.ajax(type: POST,/用POST方式传输dataType:json,/数据格式JSONurl:Ajax/NewsHandler.ashx,/目标地址data:pageno=+(pageindx+1)+&orderby=+orderby, success:function(json) $(#productTable tr:gt(0).remove();var productData = json.News;$.each(productData, function(i, n) var trs = ;trs += + n.news_title + + n.news_readtimes + + n.news_time + ;tbody += trs;);$(#productTable).append(tbody);/奇偶行颜色不同$(#productTable tr:gt(0):odd).attr(class, odd);$(#productTable tr:gt(0):even).attr(class, enen););$(#pagination).pagination(, callback: pageselectCallback,prev_text: ,items_per_page:9,num_display_entries:6,current_page:pageindx,num_edge_entries:2);这里有必要说明下json数据格式，JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：term:BACCHUS,part:n.,definition:A convenient deity invented by the ancients as an excuse for getting drunk.,quote:Is public worship,then,a sin.,That for devotions paid to Bacchus,The lictors dare to run us in.,And resolutely thump and whack us?,author:Jorace,term:BACKBITE,part:v.t.,definition:To speak of a man as you find him when he can t find you.,term:BEARD,part:n.,definition:The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the 有现成的josn处理的dll，名为Newtonsoft.Json.Net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：public static string DataTableToJSON(DataTable dt, string dtName)StringBuilder sb = new StringBuilder();StringWriter sw = new StringWriter(sb);using (JsonWriter jw = new JsonTextWriter(sw)JsonSerializer ser = new JsonSerializer();jw.WriteStartObject();jw.WritePropertyName(dtName);jw.WriteStartArray();foreach (DataRow dr in dt.Rows)jw.WriteStartObject();foreach (DataColumn dc in dt.Columns)jw.WritePropertyName(dc.ColumnName);ser.Serialize(jw, drdc.ToString();jw.WriteEndObject();jw.WriteEndArray();jw.WriteEndObject();sw.Close();jw.Close();return sb.ToString();我们来看一下上面关键的js代码：InitData(pageindx)是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件NewsHandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。在项目中添加ajax文件夹用来存放ajax处理文件，并且添加Generic Handler类型的文件（或是一般的webform），取名为NewsHandler.ashx，这个文件是用来处理ajax请求的。主要代码如下：int pageindex;/页数int.TryParse(context.Requestpageno, out pageindex);/把赋值给pageindexstring orderby = context.Requestorderby.ToString();/以什么排序DataTable dt = new DataTable();dt = PageData(pageindex, 10, tb_news, orderby);/获取数据string jsonData = DataTableToJSON(dt, News);/创建json对象,将datatable对象转换为json对象context.Response.Write(jsonData);/返回json数据上面的代码中有这样一个方法 PageData(pageindex, 10, tb_news, orderby);方法主要获取第几页的数据，详细代码如下：#region 返回特定页数的数据/ / 返回特定页数的数据/ / 特定的页数/ 页的大小/ 哪张表/ public DataTable PageData(int pageindex, int pagesize, string table, string orderby)string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStringsNewsConnection.ToString();OleDbConnection conn;if (pageindex 0)pageCount = recordCount / pagesize + 1;elsepageCount = recordCount / pagesize;if (pageindex pageCount)pageindex = pageCount;DataTable dataTemp = new DataTable();string cmdText = selectnews_id,news_title,news_readtimes,news_time from + table + order by + orderby + desc;OleDbCommand cmd = new OleDbCommand(cmdText, conn);OleDbDataAdapter oda = new OleDbDataAdapter(cmd);oda.Fill(dataTemp);dt= dataTemp.Clone();for (int i = 0; i pagesize; i+)if (recordCount = (pagesize * (pageindex - 1) + i)break;dt.Rows.Add(dataTemp.Rowspagesize * (pageindex - 1) + i.ItemArray);catch (Exception e)finallyconn.Close();return dt;#endregion整合一下就实现了需求分析的第三点了附代码的下载：（只实现了无刷新的分页，预览新闻内容等待下一章）/alexis/MyNewsList(%e5%8f%aa%e5%ae%9e%e7%8e%b0%e6%97%a0%e5%88%b7%e6%96%b0%e5%88%86%e9%a1%b5).rarl 第四节前面三篇文章实现了第一个目标，即无刷新分页。本文将实现第二个目标，即预览新闻内容。有两种方法可以实现内容的预览，一个是ajax，一个是伪ajax（姑且这么叫）。我们先用伪ajax实现新闻内容的预览。方法很简单，就是在读取新闻列表的时候将要预览的内容也读取出来但不显示在页面里面，当鼠标移到链接上面时将预览的内容的显示出来。实现起来也很简单，我们可以将预览的内容赋值给超链接标签里面的title属性，然后在mousehover的时候显示出来即可。下面就用这个方法实现新闻的预览。这里我们用到了一个jquery插件niceTitleniceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用该插件来实现新闻、文字的预览。这不是真正的预览，在读取文字列表的时候同时读取每个文章的内容概要（即想要预览的内容），然后使用该插件就可以实现假预览。效果图如下，自己可以相应修改代码如下：$(function () $(aclass=info).niceTitle(););链接名需要在上一篇文章中修改如下地方：1。在NewsHandler.ashx.cs中修改查询条件和增加字符串的截取string cmdText = selectnews_id,news_title,news_readtimes,news_time from + table + order by + orderby + desc; 改为string cmdText = select * from + table + order by + orderby + desc;并增加如下代码以控制返回的是预览的内容而不是新闻的内容：/将dt中news_content的字数都控制在300个字多余的使用.if (dt != null | dt.Rows.Count 0)for (int i = 0; i 300)dt.Rowsinews_content = dt.Rowsinews_content.ToString().Substring(0, 299) + .;2。修改前台代码添加js文件和css文件在ajax处理函数的success方法里面改为如下代码