ASP.NET AJAX：一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）

ASP.NET AJAX：一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）2010-11-29 博客园 Alexis前面三篇文章实现了第一个目标，即无刷新分页。本文将实现第二个目标，即预览新闻内容。有两种方法可以实现内容的预览，一个是ajax，一个是伪ajax （姑且这么叫）。

我们先用伪ajax实现新闻内容的预览。方法很简单，就是在读取新闻列表的时候将要预览的内容也读取出来但不显示在页面里面，当鼠标移到链接上面时将预览的内容的显示出来。实现起来也很简单，

我们可以将预览的内容赋值给超链接标签里面的title属性，然后在 mousehover的时候显示出来即可。下面就用这个方法实现新闻的预览。

这里我们用到了一个jquery插件niceTitle

niceTitle是一款当鼠标移到超链接上面显示提示的插件。我们可以使用该插件来实现新闻、文字的预览。

这不是真正的预览，在读取文字列表的时候同时读取每个文章的内容概要（即想要预览的内容），然后使用该插件就可以实现假预览。

效果图如下，自己可以相应修改

代码如下：

<link rel="Stylesheet" type="text/css"  href="Styles/jQuery.niceTitle.css" />
<script type="text/javascript"  src="Scripts/jQuery.niceTitle.js"></script>
<script type="text/javascript">
$（function （） {
$（"a[class=info]"）.niceTitle（）;
}）;
</script>
<a href="链接地址" title="预览的内容" class="info">链接名 </a>

需要在上一篇文章中修改如下地方：

1。在NewsHandler.ashx.cs中修改查询条件和增加字符串的截取

string cmdText = "select news_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 < dt.Rows.Count; i++）
{
if （dt.Rows[i]["news_content"].ToString（）.Length > 300）
{
dt.Rows[i]["news_content"] = dt.Rows[i]["news_content"].ToString （）.Substring（0, 299） + "...";
}
}
}