asp.net mvc 2.0+Silverlight播放器開發的TeamVideo視頻播放網站–系列3

本應該這個系列都應該做完了，抱歉，最近身體不適耽誤了進程。。。。。。。。。。。

前面的文章：

asp.net mvc 2.0+Silverlight播放器開發的TeamVideo視頻播放網站--系列1

asp.net mvc 2.0+Silverlight播放器開發的TeamVideo視頻播放網站--系列2

  

之前有幾個園友要原始碼，我把它給上傳到codeplex上了。你可以到這裡下載最新的代碼。。。(目前沒有發布版本，所以只能下載最新的開發版的代碼)。

http://temvideos.codeplex.com/SourceControl/list/changesets

 

項目首頁目前還沒更新，只是簡單的添加了些介紹：

如果你有時間來一起進行這個項目的完善，歡迎加入。。。。。。可以給我留言。。

  

前天晚上畫了下管理Video頁面：

 

添加和修改Video的頁面如下：

 

我比較喜歡在功能想明白後，開始把所有的功能用畫圖簡單的畫出來，可能是我對圖形比較容易接受。這樣的好處是：

在寫代碼時不需要看著一堆文字來找功能，而是照著圖就可以去把每個功能都給寫出來。

  

在管理微薄這塊，沒有太多的值得說明的東西。我準備和大家分享如下內容：

1.   Ajax實現的分頁顯示記錄功能。
2.   分享一個AJAX Load圖片產生的網站。
3. 關於下載後資料庫還原後需要修改和注意的內容。

  Ajax實現的分頁顯示記錄功能

思路：在頁面上會有兩個圖片，一個是向前翻頁，一個是向後翻頁，點擊圖片時，使用jQuery的ajax post功能向伺服器端發送一個頁碼號，比如點擊後回傳的頁碼是4，伺服器端會通過頁面來判斷要返回給用戶端的記錄應該是哪些，然後會通過代碼來構建一個html模板，在把html拼好後返回給用戶端，用戶端會把一個table清空，並把這段返回的html作為表的body顯示出來。

 

具體實現過程：

首先在VideoManagerController中添加上如下代碼，這樣是為了在index頁面載入時View介面能夠有內容。

 

在View頁面添加兩個圖片，分別代表向前或者向後翻頁：

html代碼：

<img src="http://images.cnblogs.com/prev.ico" id="prev" class="nav" />

<img src="http://images.cnblogs.com/next.ico" id="next" class="nav" />

預設頁面載入時，我會在javascript寫入當前頁面是0也就是PageIndex=0；如果點擊向後翻頁的按鈕，PageIndex就會+1；

這裡需要注意的是當PageIndex為0或者為最大頁數時，點擊前翻頁或者後翻頁就分別不會有任何資料互動了。

  

目前記錄可以分多少頁呢，使用一個隱藏的input來存放它：

<input type="hidden" id="pageCount" value='<%=(Math.Ceiling(new mediaEntities().Videos.Count()/5.0)) %>' />

 

如何來控制頁面翻滾時不會超出最大或者最小值？

主要是通過判斷pageIndex的值來進行，如果已經是0了，那麼我們就直接return，不再執行代碼了。當頁面數最大時道理相同。

  

點擊翻頁圖片後，執行完上面的javascript，就開始向伺服器端Post請求了：

$('#loader').html("<img src='images/ajax-loader.gif''/>").css('width', '50');

$.ajax({ type: 'POST',

url: 'VideoManager/getdata',

data: { pageIndex: $('#pageIndex').val() },

success: function (data) {

$('#empTable tbody').html(data);

$('#loader').html('').css('background-color', 'white');

} });

向伺服器端發送的請求主要是post過去一個PageIndex,成功請求後，返回的資料作為id為empTable的body內容。這樣就把格式的產生交給了伺服器端。。。。。。

  

 

 

下面我們完成getdata方法的代碼：

 

分享一個AJAX Load圖片產生的網站

上面的頁面最終效果如下：

你可以看到在把資料繫結到table前，我們會讓一個ajax-loading圖表顯示出來，這個已經很普遍了，大家是個網站都會這樣，但是

我這裡給你說得是如何來得到這個圖：

http://www.ajaxload.info/#preview

是的，你不需要會設計gif圖，來這個網站就可以自動產生各種自己喜歡的loading圖片：

這麼多樣式你可以選擇，然後你還可以選擇動畫的顏色和背景的顏色。。。。希望對你有用。。。。

 

關於下載後資料庫還原後需要修改和注意的內容

如果你從http://temvideos.codeplex.com/下載了原始碼，需要注意的是你需要修改資料庫中video表中的Url值：

 

Cheers

Nic