基于ASP.NET的課程資源網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

常婉綸，劉 輝

（西安理工大學(xué)，陜西 西安 710082）

0 引言

隨著高職院校對(duì)于示范性專業(yè)建設(shè)工作的開(kāi)展，積極探索課程改革新思路，建立一套支持日常教學(xué)活動(dòng)，集共享、管理和展示等功能于一體的課程資源庫(kù)尤為重要。通過(guò)Web網(wǎng)站建立實(shí)現(xiàn)課程資源庫(kù)，充分利用校園網(wǎng)絡(luò)，為師生提供了新型的教學(xué)平臺(tái)[1]。

本文圍繞著基于ASP.NET的課程資源網(wǎng)站的功能設(shè)計(jì)，對(duì)網(wǎng)站實(shí)現(xiàn)過(guò)程中的關(guān)鍵技術(shù)進(jìn)行分析研究，具體介紹了大文件上傳、定制資源類別導(dǎo)航欄、文檔自動(dòng)轉(zhuǎn)換及在線閱讀的實(shí)現(xiàn)過(guò)程。

1 系統(tǒng)功能

課程資源網(wǎng)站從使用角度分為前臺(tái)功能和后臺(tái)功能，前臺(tái)功能面向?yàn)g覽網(wǎng)頁(yè)的普通用戶和課程學(xué)習(xí)的學(xué)生用戶，可以在線學(xué)習(xí)或者下載課程資源，網(wǎng)站后臺(tái)面向網(wǎng)站管理員及教師用戶，對(duì)網(wǎng)站的課程資源進(jìn)行更新維護(hù)。

1.1 網(wǎng)站前臺(tái)

（1）資源分類瀏覽模塊

如圖1所示，頁(yè)面左側(cè)的垂直導(dǎo)航欄顯示課程資源分類列表，頁(yè)面的主體區(qū)域顯示選中類別下的所有課程資源，顯示內(nèi)容包括資源的名稱、文件格式、上傳者和上傳時(shí)間及相關(guān)描述等，通過(guò)資源名稱鏈接，在打開(kāi)的頁(yè)面中可以查看資源詳細(xì)。

圖1 課程資源分類瀏覽

（2）查看資源詳細(xì)模塊

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

圖2 課程資源在線瀏覽

1.2 網(wǎng)站后臺(tái)設(shè)計(jì)

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

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

圖3 課程資源類別管理

（2）課程資源管理

課程資源管理實(shí)現(xiàn)了對(duì)課程資源網(wǎng)站的更新，可以將選中的多個(gè)資源信息進(jìn)行刪除，資源信息的刪除不僅刪除數(shù)據(jù)庫(kù)對(duì)應(yīng)的表記錄，還將徹底刪除服務(wù)器文件上傳目錄對(duì)應(yīng)的資源文件。添加資源不僅將新的課程資源信息添加至數(shù)據(jù)庫(kù)，還將對(duì)應(yīng)的文檔、程序包或視頻上傳至服務(wù)器。

2 系統(tǒng)開(kāi)發(fā)運(yùn)行環(huán)境

網(wǎng)站開(kāi)發(fā)使用了微軟的ASP.NET技術(shù)，C#作為編程語(yǔ)言，使用jQuery技術(shù)在瀏覽器端對(duì)HTML元素進(jìn)行操作。開(kāi)發(fā)環(huán)境選用Visual Studio 2005，數(shù)據(jù)庫(kù)平臺(tái)為SQL Server 2005，服務(wù)器軟件IIS6.0及運(yùn)行平臺(tái).NET framework 2.0，瀏覽器版本在IE9.0以上。

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

3 關(guān)鍵技術(shù)實(shí)現(xiàn)

3.1 文檔swf轉(zhuǎn)換及在線閱讀

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

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

C#程序調(diào)用SwfTools進(jìn)行文件的Swf轉(zhuǎn)換：

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

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

//設(shè)置執(zhí)行命令，filePath是被轉(zhuǎn)換文件的路徑，savePath是轉(zhuǎn)換后swf文件的存放路徑

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

pdf2swf.ExecutCmd （cmdStr，args）；//pdf2swf工具執(zhí)行轉(zhuǎn)換命令

需要注意，服務(wù)器端如果是32位操作系統(tǒng)，獲取可執(zhí)行文件的路徑需要寫(xiě)成C：\Program Files（x86）\SWFTools\pdf2swf.exe，否則無(wú)法找到轉(zhuǎn)換工具。

（2）在線閱讀文檔

本系統(tǒng)使用開(kāi)源的Flexpaper播放器，可以嵌入到網(wǎng)頁(yè)中播放swf文檔。

首先，下載解壓的js文件夾和FlexPaperViewer.swf文件并復(fù)制到站點(diǎn)目錄下，在文檔閱讀頁(yè)面添加JavaScript腳本對(duì)播放器參數(shù)進(jìn)行配置，這時(shí)頁(yè)面中播放的文檔是固定不變的。

接著，進(jìn)行資源文件的路徑綁定，這樣Flexpaper播放器中的文檔就可以切換。在該頁(yè)面中添加一個(gè)隱藏域，通過(guò)value屬性將對(duì)應(yīng)資源的swf文件路徑進(jìn)行綁定。

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

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

3.2 定制資源類別導(dǎo)航欄

本系統(tǒng)采用jQuery技術(shù)對(duì)HTML元素進(jìn)行操作，以“所見(jiàn)即所得”的方式完成了對(duì)資源類別順序的調(diào)整[3]。

網(wǎng)頁(yè)中包含jQuery程序包，代碼如下所示：

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

＞＜/script＞

編寫(xiě)JavaScript腳本程序，實(shí)現(xiàn)html表格選中行與相鄰行的交換，以選中行上移為例，通過(guò)jQuery交換相鄰行，代碼如下：

var currentStep=0； //標(biāo)記選中行

var max_line_num=＜%#i%＞； //總共的行數(shù)

function up_exchange_line（）{

if（currentStep==0）{

alert（′請(qǐng)選擇一項(xiàng)! ′）；

return false；

}

if（currentStep＜=1）{

//選中行超過(guò)范圍給出錯(cuò)誤提示

alert（′非法操作! ′）；

return false；

}

var upStep=currentStep-1； //修改序號(hào)

$（′#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）；

//取得兩行的內(nèi)容

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

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

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

//交換當(dāng)前行與上一行內(nèi)容

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

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

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

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

currentStep=upStep；

}

當(dāng)點(diǎn)擊表格上方的上下按鈕時(shí)，選中行在表格中發(fā)生移動(dòng)，修改完畢點(diǎn)擊“保存目錄順序”按鈕，修改后的類別順序保存至數(shù)據(jù)庫(kù)中，最后點(diǎn)擊 “重新生成導(dǎo)航欄”，與導(dǎo)航欄數(shù)據(jù)源綁定的XML文檔自動(dòng)更新，方便用戶的使用。

3.3 大文件上傳

通常使用ASP.NET提供的FileUpload控件就可實(shí)現(xiàn)文件上傳，但是該控件存在一些弊端。第一，當(dāng)請(qǐng)求超過(guò)maxRequestLength（默認(rèn) 4 MB）之后，ASP.NET處理程序?qū)⒉粫?huì)處理該請(qǐng)求；第二，無(wú)法提供文件上傳時(shí)的進(jìn)度條提示。

課程資源網(wǎng)站經(jīng)常需要上傳教學(xué)視頻、項(xiàng)目庫(kù)等較大文件，這些文件從幾兆到幾十兆不等，傳輸時(shí)間較長(zhǎng)，實(shí)時(shí)提示傳輸進(jìn)度非常必要。為解決文件上傳問(wèn)題，可以采用開(kāi)源界提供的上傳組件NeatUpload[4-5]。具體實(shí)現(xiàn)過(guò)程如下：

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

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

接著，在 Visual Studio 2005集成開(kāi)發(fā)環(huán)境下的“工具箱”區(qū)域單擊右鍵---＞彈出的菜單中選 “選擇項(xiàng)”---＞彈出窗口中選擇 “瀏覽”---＞添加“Brettle.Web.NeatUpload.dll”，.NET Framework組件選項(xiàng)卡中選中對(duì)應(yīng)的組件，這樣工具欄中就會(huì)出現(xiàn)NeatUpload控件組。本系統(tǒng)主要使用InputFile和ProgressBar這兩個(gè)控件。

（2）修改網(wǎng)站配置文件

Web.config是站點(diǎn)文件夾的配置文件，system.web節(jié)點(diǎn)中寫(xiě)入下面的配置，設(shè)置最大請(qǐng)求長(zhǎng)度和運(yùn)行超時(shí)時(shí)間，并且傳輸文件的過(guò)程中顯示進(jìn)度條。

＜httpModules＞

＜add name=＂UploadHttpModule＂

type=＂Brettle.Web.NeatUpload.UploadHttpModule，

Brettle.Web.NeatUpload＂/＞

＜/httpModules＞

＜http Runtime maxRequestLength=＂400000＂

executionTimeout=＂3600＂/＞

（3）使用 NeatUpload實(shí)現(xiàn)大文件上傳

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

實(shí)現(xiàn)文件上傳功能的程序如下。

protected void btnOK_Click（object sender，EventArgs e）

{

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

{

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

string ExtenName=System.IO.Path.GetExtension

（FileName）； //獲取擴(kuò)展名

string NewFileName=DateTime.Now.ToString

（＂yyyyMMddhhmm＂）； //用當(dāng)前日期時(shí)間設(shè)置新文件名

string SaveFileName=System.IO.Path.Combine

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

NewFileName+ExtenName）；

//合并上傳到服務(wù)器上的全路徑

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

}

else

{

Web.Tools.ObjectHandler.MessageBox （＂請(qǐng)選擇文件！ ＂）；

}

}

如圖4所示為執(zhí)行文件上傳過(guò)程的進(jìn)度條。

圖4 使用NeatUpoad上傳文件時(shí)的進(jìn)度條

4 結(jié)束語(yǔ)

該網(wǎng)站對(duì)課程資源的共享、維護(hù)和更新，不僅為教師授課提供便利，也積極地促進(jìn)學(xué)生的課程學(xué)習(xí)，實(shí)現(xiàn)優(yōu)質(zhì)資源共享，適應(yīng)教育發(fā)展的趨勢(shì)。

[1]杜垚.高職院校網(wǎng)絡(luò)數(shù)據(jù)庫(kù)課程資源庫(kù)建設(shè)的探索和研究[J].科技視界，2012，9（25）：189-190.

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

[3]袁江.jQuery開(kāi)發(fā)從入門(mén)到精通[M].北京：清華大學(xué)出版社，2013.

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

[5]吳云.顧保磊.精品課程網(wǎng)站關(guān)鍵技術(shù)研究[J].軟件導(dǎo)刊，2014，13（3）：195-196.