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

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

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

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

1。動(dòng)態(tài)的新聞列表（這個(gè)很簡(jiǎn)單）

2?？梢苑猪?yè)讀取新聞列表（這個(gè)也不難）

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

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

5。界面友好（這個(gè)是必須的）

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

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

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

列

名稱類型長(zhǎng)度

news_id 長(zhǎng)整型 4

news_title 文本 255

news_content 內(nèi)存 -

news_time 日期/時(shí)間 8

news_readtimes 長(zhǎng)整型 4

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

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

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

ok，地基我們已經(jīng)搭建好了，現(xiàn)在我們要筑房子了。建立NewsList.aspx頁(yè)面，這就是我們的新聞列表頁(yè)面。
在編輯NewsList.aspx之前，我們來(lái)先配置一下web.config文件，建立于數(shù)據(jù)庫(kù)的連接。將<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ù)庫(kù)文件拷貝到App_Data文件夾下，這樣就很方便的調(diào)用數(shù)據(jù)庫(kù)了，不必為路徑的問(wèn)題而煩惱了。

配好web.config文件后，我們開(kāi)始設(shè)計(jì)前臺(tái)。NewsList.aspx頁(yè)面前臺(tái)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> 

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

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

復(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ù)庫(kù)連接字符串 
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();//測(cè)試連接數(shù)據(jù)庫(kù) 
} 
} 
protected void TestConnection() 
{ 
conn = new OleDbConnection(connectionString);//創(chuàng)建新的連接 
try 
{ 
conn.Open(); 
if (conn.State == System.Data.ConnectionState.Open) 
{ 
Response.Write("數(shù)據(jù)庫(kù)連接成功"); 
} 
else 
{ 
Response.Write("連接狀態(tài)是關(guān)閉的"); 
} 
} 
catch (Exception e) 
{ 
Response.Write("連接失敗，錯(cuò)誤原因："+e.Message);//如果連接失敗將錯(cuò)誤顯示出來(lái) 
} 
finally 
{ 
conn.Close();//一定要及時(shí)關(guān)掉conn 
} 
} 
} 
} 