ASP.NET輕鬆實現網站動態新聞效果

ASP.NET輕鬆實現網站動態新聞效果

動態新聞可以理解是實時更新的新聞。重點在於“實時更新”。

最明顯的例子可以參照這個。51CTO的最新博文就是最明顯的“動態新聞”效果。每當有新的文章都會在這個區域顯示文章的標題。

clip_image002

想要實現這個效果不可能使用靜態網站技術,那豈不是要把網站編輯生生累到每日吐血三兩升?

但是如果網站管理員給編輯用ASP.NET編寫一個簡單的動態新聞程序,再加上一個能夠插入新聞的網頁編輯器。你猜,我們網工的地位會在這位編輯的心目中提高到什麼程度?

想要提高地位,那就不閒扯了。下面就跟着我來一步步的實現“動態新聞”效果。

1首先打開數據庫,創建一個新的庫,在新庫中創建一張表。

(注意標示主鍵和選擇數據類型)

clip_image004

2 打開visual studio 新建一個網站的“母版頁”,注意是C#的。(母版文件後綴名是master)

(這是我隨便找的一個模板頁面。直接複製代碼粘貼進visual studio的。)

clip_image006

3 在母版中編寫“動態新聞”程序

1 首先在頁面中選好程序的放置位置,並找出這部分的代碼。然後將代碼複製在文檔中,以備後用。

clip_image008

clip_image010

2 複製好代碼後,將原先的代碼刪除。(注意,只刪除div標記中的內容,不要把div標記刪除掉)

clip_image012

3 然後再div標記中添加一個Repeater控件

clip_image014

4 回到設計頁面,將Repeater控件連接數據庫。(選擇新建數據源)

clip_image016

5 源類型爲“數據庫”下一步,選擇“新建連接”

clip_image018

6 服務器名爲“.”,數據庫名是剛纔建立的“mynews”

clip_image020

7 之後一路下一步,直至 配置Select語句界面。這裏單擊“ORDER.BY”按鈕

clip_image022

8 因爲新聞總是把最新的放在上面,所以這裏選擇以“ID”列“降序”排列。

clip_image024

9 當然,一個頁面上也不可能把所有的新聞都列出來。只需列出前幾條就行了。

先把下面的Select語句複製下來,然後選擇上面的“指定自動以SQL語句或存儲過程”選項

clip_image026

10 單擊下一步後,把剛纔複製的語句粘貼到這裏,並在“*”前添加“top(5)”用以只顯示前5條新聞

clip_image028

11 下一步直至完成。之後會出現一個對話框,點擊是

clip_image030

12 回到源頁面,會看到多出了一段代碼。

clip_image032

打開文檔,把之前粘貼進去的代碼複製到源頁面中。

(代碼在優化一下。可以和上面的圖片對比對比)

clip_image034

注意代碼的粘貼位置和需要添加的語句

clip_image036 注意在這裏將代碼修改爲“<%# Eval (“biaoti”)%>” “biaoti”是數據庫表中的列名

clip_image038

OK,到這裏動態新聞效果就有了。當然,你可不能再母版中查看效果,需要創建一個套用母版的頁面才能看啊。

在新建的頁面上Ctrl+F5(別忘了在這之前必須要在數據庫中添加點內容出來)

clip_image040

clip_image042

clip_image044

每在數據庫中添加一條新聞,網頁上刷新後就會自動出現

clip_image046

動態新聞效果算是出來了。但是還不完全。如何顯示新聞的內容?如何在網頁添加新聞到數據庫?這些還是問題。

限於篇幅問題,剩下的問題就在下一片文章中再做詳細介紹吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章