ASP.NET AJAX：一步步打造漂亮的新聞列表（無重新整理分頁、內容預覽）（4）

前面三篇文章實現了第一個目標，即無重新整理分頁。本文將實現第二個目標，即預覽新聞內容。有兩種方法可以實現內容的預覽，一個是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)　+　"...";
}
}
}