常婉綸，劉 輝
?。ㄎ靼怖砉ご髮W(xué)，陜西 西安 710082）
摘 要： 基于ASP.NET建立的課程資源網(wǎng)站，集共享、管理和展示功能于一體。介紹了網(wǎng)站具備的主要功能模塊和開發(fā)運(yùn)行環(huán)境，描述了文檔自動(dòng)轉(zhuǎn)換及在線閱讀、定制資源類別導(dǎo)航欄、大文件上傳的具體實(shí)現(xiàn)過(guò)程。
關(guān)鍵詞： 課程資源網(wǎng)站；在線閱讀；定制資源類別；大文件上傳
0 引言
隨著高職院校對(duì)于示范性專業(yè)建設(shè)工作的開展，積極探索課程改革新思路，建立一套支持日常教學(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所示，頁(yè)面左側(cè)的垂直導(dǎo)航欄顯示課程資源分類列表，頁(yè)面的主體區(qū)域顯示選中類別下的所有課程資源，顯示內(nèi)容包括資源的名稱、文件格式、上傳者和上傳時(shí)間及相關(guān)描述等，通過(guò)資源名稱鏈接，在打開的頁(yè)面中可以查看資源詳細(xì)。
?。?）查看資源詳細(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格式的課程資源。
1.2 網(wǎng)站后臺(tái)設(shè)計(jì)
?。?）課程資源類別管理模塊
資源類別管理包含了添加、刪除、修改資源類別。為便于用戶的查看和使用，資源類別名顯示在前臺(tái)頁(yè)面的垂直導(dǎo)航欄中，在管理頁(yè)面中可以對(duì)資源類別的順序進(jìn)行設(shè)置和保存，對(duì)前臺(tái)頁(yè)面資源導(dǎo)航欄進(jìn)行更新。如圖3所示為課程資源類別管理。
?。?）課程資源管理
課程資源管理實(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)開發(fā)運(yùn)行環(huán)境
網(wǎng)站開發(fā)使用了微軟的ASP.NET技術(shù)，C#作為編程語(yǔ)言，使用jQuery技術(shù)在瀏覽器端對(duì)HTML元素進(jìn)行操作。開發(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]。
?。?）下載并安裝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+"\\"+NewFileName+".swf"；
pdf2swf.ExecutCmd（cmdStr，args）；//pdf2swf工具執(zhí)行轉(zhuǎn)換命令
需要注意，服務(wù)器端如果是32位操作系統(tǒng)，獲取可執(zhí)行文件的路徑需要寫成C：\\Program Files（x86）\\SWFTools\\pdf2swf.exe，否則無(wú)法找到轉(zhuǎn)換工具。
?。?）在線閱讀文檔
本系統(tǒng)使用開源的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)行操作，以“所見即所得”的方式完成了對(duì)資源類別順序的調(diào)整[3]。
網(wǎng)頁(yè)中包含jQuery程序包，代碼如下所示：
<script language="javascript"src="../jquery-1.3.2.min.js"
></script>
編寫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)度非常必要。為解決文件上傳問題，可以采用開源界提供的上傳組件NeatUpload[4-5]。具體實(shí)現(xiàn)過(guò)程如下：
?。?）NeatUpload上傳組件的安裝和配置
下載的NeatUpload版本是NeatUploadBinaries-1-3-26，解壓后的文件夾如圖4所示，首先將bin目錄下的Brettle.Web.NeatUpload.dll文件添加至Web站點(diǎn)，然后將NeatUpoad文件夾整體拷貝至站點(diǎn)根目錄下。
接著，在Visual Studio 2005集成開發(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)中寫入下面的配置，設(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" />
?。?）使用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
?。?quot;yyyyMMddhhmm"）；//用當(dāng)前日期時(shí)間設(shè)置新文件名
string SaveFileName=System.IO.Path.Combine
?。≧equest.PhysicalApplicationPath+@"/loadpath/"，
NewFileName+ExtenName）；
//合并上傳到服務(wù)器上的全路徑
this.InputFile1.MoveTo（SaveFileName，Brettle.Web.NeatUpload.MoveToOptions.Overwrite）；//執(zhí)行文件上傳操作
}
else
{
Web.Tools.ObjectHandler.MessageBox（"請(qǐng)選擇文件！"）；
}
}
如圖4所示為執(zhí)行文件上傳過(guò)程的進(jìn)度條。
4 結(jié)束語(yǔ)
該網(wǎng)站對(duì)課程資源的共享、維護(hù)和更新，不僅為教師授課提供便利，也積極地促進(jìn)學(xué)生的課程學(xué)習(xí)，實(shí)現(xiàn)優(yōu)質(zhì)資源共享，適應(yīng)教育發(fā)展的趨勢(shì)。
參考文獻(xiàn)
[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開發(fā)從入門到精通[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.