基于ASP.NET的課程資源網站的設計與實現

常婉綸，劉 輝

（西安理工大學，陜西 西安 710082）

0 引言

隨著高職院校對于示范性專業建設工作的開展，積極探索課程改革新思路，建立一套支持日常教學活動，集共享、管理和展示等功能于一體的課程資源庫尤為重要。通過Web網站建立實現課程資源庫，充分利用校園網絡，為師生提供了新型的教學平臺[1]。

本文圍繞著基于ASP.NET的課程資源網站的功能設計，對網站實現過程中的關鍵技術進行分析研究，具體介紹了大文件上傳、定制資源類別導航欄、文檔自動轉換及在線閱讀的實現過程。

1 系統功能

課程資源網站從使用角度分為前臺功能和后臺功能，前臺功能面向瀏覽網頁的普通用戶和課程學習的學生用戶，可以在線學習或者下載課程資源，網站后臺面向網站管理員及教師用戶，對網站的課程資源進行更新維護。

1.1 網站前臺

（1）資源分類瀏覽模塊

如圖1所示，頁面左側的垂直導航欄顯示課程資源分類列表，頁面的主體區域顯示選中類別下的所有課程資源，顯示內容包括資源的名稱、文件格式、上傳者和上傳時間及相關描述等，通過資源名稱鏈接，在打開的頁面中可以查看資源詳細。

圖1 課程資源分類瀏覽

（2）查看資源詳細模塊

課程資源包含的文件格式主要有PDF、RAR和AVI這三種，因此課程資源詳細頁面采用三種不同的呈現方式展現課程資源所包含的內容。教師上傳資源前先將word、ppt文檔轉換成 PDF文檔以實現在線閱讀，課程項目庫和案例庫則是打包成RAR壓縮文件以方便用戶進行下載，對于avi視頻文件格式，不僅能夠下載，也可以通過在網頁中嵌入流媒體播放器進行在線播放。圖2所示為在線瀏覽PDF文檔轉換成swf格式的課程資源。

圖2 課程資源在線瀏覽

1.2 網站后臺設計

（1）課程資源類別管理模塊

資源類別管理包含了添加、刪除、修改資源類別。為便于用戶的查看和使用，資源類別名顯示在前臺頁面的垂直導航欄中，在管理頁面中可以對資源類別的順序進行設置和保存，對前臺頁面資源導航欄進行更新。如圖3所示為課程資源類別管理。

圖3 課程資源類別管理

（2）課程資源管理

課程資源管理實現了對課程資源網站的更新，可以將選中的多個資源信息進行刪除，資源信息的刪除不僅刪除數據庫對應的表記錄，還將徹底刪除服務器文件上傳目錄對應的資源文件。添加資源不僅將新的課程資源信息添加至數據庫，還將對應的文檔、程序包或視頻上傳至服務器。

2 系統開發運行環境

網站開發使用了微軟的ASP.NET技術，C#作為編程語言，使用jQuery技術在瀏覽器端對HTML元素進行操作。開發環境選用Visual Studio 2005，數據庫平臺為SQL Server 2005，服務器軟件IIS6.0及運行平臺.NET framework 2.0，瀏覽器版本在IE9.0以上。

此外，還需要三個軟件包的支持，分別是用于大文件上傳的 NeatUpload、轉換 swf格式的 SwfTools、在線閱讀播放器 Flexpaper。

3 關鍵技術實現

3.1 文檔swf轉換及在線閱讀

課程資源的各類文檔以PDF格式上傳，再通過SwfTools中的PDF2SWF工具將PDF文件轉換為體積較小的SWF文件，適合網絡傳播[2]。

（1）下載并安裝 SwfTools軟件包，用于將 PDF文檔轉換為Swf文檔。

C#程序調用SwfTools進行文件的Swf轉換：

//提供完整的軟件安裝路徑

string cmdStr=＂C：\Program Files\SWFTools\pdf2swf.exe＂；string filePath=HttpContext.Current.Server.MapPath（＂../loadpath/＂+NewFileName+ExtenName）；

//設置執行命令，filePath是被轉換文件的路徑，savePath是轉換后swf文件的存放路徑

string args=＂-t＂+filePath+＂-o＂+savePath+＂\＂+NewFile-Name+＂.swf＂；

pdf2swf.ExecutCmd （cmdStr，args）；//pdf2swf工具執行轉換命令

需要注意，服務器端如果是32位操作系統，獲取可執行文件的路徑需要寫成C：\Program Files（x86）\SWFTools\pdf2swf.exe，否則無法找到轉換工具。

（2）在線閱讀文檔

本系統使用開源的Flexpaper播放器，可以嵌入到網頁中播放swf文檔。

首先，下載解壓的js文件夾和FlexPaperViewer.swf文件并復制到站點目錄下，在文檔閱讀頁面添加JavaScript腳本對播放器參數進行配置，這時頁面中播放的文檔是固定不變的。

接著，進行資源文件的路徑綁定，這樣Flexpaper播放器中的文檔就可以切換。在該頁面中添加一個隱藏域，通過value屬性將對應資源的swf文件路徑進行綁定。

＜input type=＂hidden＂id=＂file＂value=′＜%=FileURL%＞′/＞

最后，通過變量fileURL獲取隱藏域的value屬性值，var fileURL=$（＂#file＂）.val（）；將 swf文件路徑傳遞給頁面的播放器配置參數，最終實現了課程資源文檔的在線閱讀。

3.2 定制資源類別導航欄

本系統采用jQuery技術對HTML元素進行操作，以“所見即所得”的方式完成了對資源類別順序的調整[3]。

網頁中包含jQuery程序包，代碼如下所示：

＜script language=＂javascript＂src=＂../jquery-1.3.2.min.js＂

＞＜/script＞

編寫JavaScript腳本程序，實現html表格選中行與相鄰行的交換，以選中行上移為例，通過jQuery交換相鄰行，代碼如下：

var currentStep=0； //標記選中行

var max_line_num=＜%#i%＞； //總共的行數

function up_exchange_line（）{

if（currentStep==0）{

alert（′請選擇一項! ′）；

return false；

}

if（currentStep＜=1）{

//選中行超過范圍給出錯誤提示

alert（′非法操作! ′）；

return false；

}

var upStep=currentStep-1； //修改序號

$（′#line′+upStep+＂td：first-child＂）.html（currentStep）；

$（′#line′+currentStep+＂td：first-child＂）.html（upStep）；

//獲取隱藏域

var lastVal=$（′#h′+upStep）.val（）；

$（′#h′+upStep）.val（currentStep）；

$（′#h′+currentStep）.val（lastVal）；

//取得兩行的內容

var upContent=$（′#line′+upStep）.html（）；

var currentContent=$（′#line′+currentStep）.html（）；

$（′#line′+upStep）.html（currentContent）；

//交換當前行與上一行內容

$（′#line′+currentStep）.html（upContent）；

$（′#content tr′）.each（function（）

{$（this）.css（＂background-color＂，＂#ffffff＂）；}）；

$（′#line′+upStep）.css（＂background-color＂，＂yellow＂）；

currentStep=upStep；

}

當點擊表格上方的上下按鈕時，選中行在表格中發生移動，修改完畢點擊“保存目錄順序”按鈕，修改后的類別順序保存至數據庫中，最后點擊 “重新生成導航欄”，與導航欄數據源綁定的XML文檔自動更新，方便用戶的使用。

3.3 大文件上傳

通常使用ASP.NET提供的FileUpload控件就可實現文件上傳，但是該控件存在一些弊端。第一，當請求超過maxRequestLength（默認 4 MB）之后，ASP.NET處理程序將不會處理該請求；第二，無法提供文件上傳時的進度條提示。

課程資源網站經常需要上傳教學視頻、項目庫等較大文件，這些文件從幾兆到幾十兆不等，傳輸時間較長，實時提示傳輸進度非常必要。為解決文件上傳問題，可以采用開源界提供的上傳組件NeatUpload[4-5]。具體實現過程如下：

（1）NeatUpload上傳組件的安裝和配置

下載的NeatUpload版本是NeatUploadBinaries-1-3-26，解壓后的文件夾如圖4所示，首先將 bin目錄下的Brettle.Web.NeatUpload.dll文件添加至 Web站點，然后將NeatUpoad文件夾整體拷貝至站點根目錄下。

接著，在 Visual Studio 2005集成開發環境下的“工具箱”區域單擊右鍵---＞彈出的菜單中選 “選擇項”---＞彈出窗口中選擇 “瀏覽”---＞添加“Brettle.Web.NeatUpload.dll”，.NET Framework組件選項卡中選中對應的組件，這樣工具欄中就會出現NeatUpload控件組。本系統主要使用InputFile和ProgressBar這兩個控件。

（2）修改網站配置文件

Web.config是站點文件夾的配置文件，system.web節點中寫入下面的配置，設置最大請求長度和運行超時時間，并且傳輸文件的過程中顯示進度條。

＜httpModules＞

＜add name=＂UploadHttpModule＂

type=＂Brettle.Web.NeatUpload.UploadHttpModule，

Brettle.Web.NeatUpload＂/＞

＜/httpModules＞

＜http Runtime maxRequestLength=＂400000＂

executionTimeout=＂3600＂/＞

（3）使用 NeatUpload實現大文件上傳

從工具欄中將InputFile和ProgressBar這兩個控件拖放至頁面，其中InputFile控件用于在瀏覽器端選擇上傳的文件，ProgressBar控件顯示傳輸進度。

實現文件上傳功能的程序如下。

protected void btnOK_Click（object sender，EventArgs e）

{

if（this.InputFile1.HasFile） //判斷文件是否存在

{

string FileName=this.InputFile1.FileName；//獲取上傳文件的全路徑

string ExtenName=System.IO.Path.GetExtension

（FileName）； //獲取擴展名

string NewFileName=DateTime.Now.ToString

（＂yyyyMMddhhmm＂）； //用當前日期時間設置新文件名

string SaveFileName=System.IO.Path.Combine

（Request.PhysicalApplicationPath+@＂/loadpath/＂，

NewFileName+ExtenName）；

//合并上傳到服務器上的全路徑

this.InputFile1.MoveTo （SaveFileName，Brettle.Web.NeatU-pload.MoveToOptions.Overwrite）； //執行文件上傳操作

}

else

{

Web.Tools.ObjectHandler.MessageBox （＂請選擇文件！ ＂）；

}

}

如圖4所示為執行文件上傳過程的進度條。

圖4 使用NeatUpoad上傳文件時的進度條

4 結束語

該網站對課程資源的共享、維護和更新，不僅為教師授課提供便利，也積極地促進學生的課程學習，實現優質資源共享，適應教育發展的趨勢。

[1]杜垚.高職院校網絡數據庫課程資源庫建設的探索和研究[J].科技視界，2012，9（25）：189-190.

[2]亓小濤.基于 FlashPaper的文檔在線閱讀技術探析[J].軟件導刊，2013（3）：82-83.

[3]袁江.jQuery開發從入門到精通[M].北京：清華大學出版社，2013.

[4]魏峰.ASP.NET文件上傳解決方案[J].電腦編程技巧與維護，2009，12（14）：13.

[5]吳云.顧保磊.精品課程網站關鍵技術研究[J].軟件導刊，2014，13（3）：195-196.