一步步打造漂亮的新聞列表(無刷新分頁、內(nèi)容預(yù)覽)第二步

更新時間：2010年07月18日 22:42:19 作者：

由于我們僅僅是項(xiàng)目中的一個小部分，但也差不多按照以上的順序進(jìn)行開發(fā)，這是一個良好的習(xí)慣。我們將概要設(shè)計(jì)和詳細(xì)設(shè)計(jì)放在一起。

在上一篇文章中，我們進(jìn)行了需求分析，如下：

1。動態(tài)的新聞列表（這個很簡單）

2。可以分頁讀取新聞列表（這個也不難）

3?？梢詿o刷新的分頁讀取新聞列表（這個稍微有點(diǎn)難度）

4?？梢灶A(yù)覽新聞的內(nèi)容（這個也稍微有點(diǎn)難度）

5。界面友好（這個是必須的）

按照軟件工程的順序，我們應(yīng)按照這樣的順序開發(fā)軟件：可行性分析===》需求分析===》概要設(shè)計(jì)===》詳細(xì)設(shè)計(jì)===》編碼===》測試

由于我們僅僅是項(xiàng)目中的一個小部分，但也差不多按照以上的順序進(jìn)行開發(fā)，這是一個良好的習(xí)慣。我們將概要設(shè)計(jì)和詳細(xì)設(shè)計(jì)放在一起。

下面我們來設(shè)計(jì)數(shù)據(jù)庫，由于采用的是Access數(shù)據(jù)庫，而且字段也相對簡單。就一張表tb_news，數(shù)據(jù)庫名為news。

列

名稱類型長度

news_id 長整型 4

news_title 文本 255

news_content 內(nèi)存 -

news_time 日期/時間 8

news_readtimes 長整型 4

當(dāng)然，你可以根據(jù)自己的需要增加字段或減少字段。其中news_content盡可能的長一些，符合新聞的長度。

數(shù)據(jù)庫設(shè)計(jì)完畢后，我們可以開始編碼了。首先建立asp.net項(xiàng)目（我比較偏向于web application，而不是website），將其命名為MyNewsList。如下圖所示：

如果是用vs2010正式版，創(chuàng)建好后會發(fā)現(xiàn)會生成很多文件，它是vs2010自帶的有些樣式的頁面（母版頁），有點(diǎn)類似于asp.net mvc。這里我們不需要，將他們刪除并且將一些文件夾重命名，將Account文件夾、About.aspx、Default.aspx、Global.asax和site.Mater刪掉，并且將Scripts文件夾重命名為js文件夾；將Styles重命名為css文件夾，這樣更符合我們的習(xí)慣，當(dāng)然你也可以不改。并且將news數(shù)據(jù)庫文件拷貝至App_Data文件夾。（如果你是vs2008或者其他版本，做類似的操作）最后的列表如下圖：

ok，地基我們已經(jīng)搭建好了，現(xiàn)在我們要筑房子了。建立NewsList.aspx頁面，這就是我們的新聞列表頁面。
在編輯NewsList.aspx之前，我們來先配置一下web.config文件，建立于數(shù)據(jù)庫的連接。將<connectionStrings/>改為：

復(fù)制代碼代碼如下:

 
<connectionStrings> 
<add name="NewsConnection" connectionString="provider=Microsoft.Jet.OLEDB.4.0 ; Data Source=|DataDirectory|\news.mdb;"/> 
</connectionStrings> 

我們注意到：Data Source=|DataDirectory|\news.mdb;中的DataDirectory，這就是為什么我們要將數(shù)據(jù)庫文件拷貝到App_Data文件夾下，這樣就很方便的調(diào)用數(shù)據(jù)庫了，不必為路徑的問題而煩惱了。

配好web.config文件后，我們開始設(shè)計(jì)前臺。NewsList.aspx頁面前臺body的代碼如下：

復(fù)制代碼代碼如下:

 
<body> 
<form id="form1" runat="server"> 
<div> 
<div id="tableData"> 
<table cellpadding="5" cellspacing="1" width="90%" id="productTable" align="center"> 
<tr> 
<th style="width: 60%"> 
<a style="cursor: pointer;">新聞的標(biāo)題</a><span id="productid"></span> 
</th> 
<th style="width: 10%"> 
<a style="cursor: pointer;">閱讀次數(shù)</a><span id="UnitPrice"></span> 
</th> 
<th style="width: 30%"> 
<a style="cursor: pointer;">發(fā)表</a><span id="Discontinued"></span> 
</th> 
</tr> 
</table> 
</div> 
<div id="pagination" class="digg"> 
</div> 
</div> 
</form> 
</body> 

我們看到這是一個table，但里面并沒有綁定或者寫一些代碼，這是為了以后使用ajax添加上去。同時我們注意到有這樣的一些id
<span id="productid"></span>這是以后使用json綁定是需要的。

現(xiàn)在，我們來寫一些后臺代碼，嘗試著連接數(shù)據(jù)庫。為了簡單起見，我把連接數(shù)據(jù)庫的代碼寫到NewsList.aspx的后臺代碼及NewsList.aspx.cs中，其實(shí)我們在實(shí)際的項(xiàng)目中，往往會把數(shù)據(jù)庫操作的那塊封裝起了，只提供接口。
后臺代碼如下：

復(fù)制代碼代碼如下:

 
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 MyNewsList 
{ 
public partial class NewsList : System.Web.UI.Page 
{ 
//數(shù)據(jù)庫連接字符串 
public static string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString(); 
public static OleDbConnection conn; 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!Page.IsPostBack) 
{ 
TestConnection();//測試連接數(shù)據(jù)庫 
} 
} 
protected void TestConnection() 
{ 
conn = new OleDbConnection(connectionString);//創(chuàng)建新的連接 
try 
{ 
conn.Open(); 
if (conn.State == System.Data.ConnectionState.Open) 
{ 
Response.Write("數(shù)據(jù)庫連接成功"); 
} 
else 
{ 
Response.Write("連接狀態(tài)是關(guān)閉的"); 
} 
} 
catch (Exception e) 
{ 
Response.Write("連接失敗，錯誤原因："+e.Message);//如果連接失敗將錯誤顯示出來 
} 
finally 
{ 
conn.Close();//一定要及時關(guān)掉conn 
} 
} 
} 
} 