基于ASP NET的課程網(wǎng)站功能設(shè)計(jì)

《基于ASP NET的課程網(wǎng)站功能設(shè)計(jì)》由會(huì)員分享，可在線閱讀，更多相關(guān)《基于ASP NET的課程網(wǎng)站功能設(shè)計(jì)（6頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、基于ASP.NET的課程資源網(wǎng)站的功能設(shè)計(jì) 　　0引言 　　隨著高職院校對于示范性專業(yè)建設(shè)工作的開展 ,積極探索課程改革新思路， 建立一套支持日常教學(xué)活動(dòng)，集共享、管理和展示等功能于一體的課程資源庫尤為重要。 通過 Web 網(wǎng)站建立實(shí)現(xiàn)課程資源庫，充分利用校園網(wǎng)絡(luò)，為師生提供了新型的教學(xué)平臺(tái). 　　本文圍繞著基于 ASP.NET的課程資源網(wǎng)站的功能設(shè)計(jì)， 對網(wǎng)站實(shí)現(xiàn)過程中的關(guān)鍵技術(shù)進(jìn)行分析研究，具體介紹了大文件 上傳 、定制資 源類 別導(dǎo)航 欄、文 檔自 動(dòng)轉(zhuǎn)換及在線閱讀的實(shí)現(xiàn)過程。 　　1系統(tǒng)功能 　　課程資源網(wǎng)站從使用角度分為前臺(tái)功能和后臺(tái)功能，前臺(tái)功能面向?yàn)g覽網(wǎng)頁的普通用戶

2、和課程學(xué)習(xí)的學(xué)生用戶，可以在線學(xué)習(xí)或者下載課程資源 ,網(wǎng)站后臺(tái)面向網(wǎng)站管理員及教師用戶，對網(wǎng)站的課程資源進(jìn)行更新維護(hù)。 　　1.1網(wǎng)站前臺(tái) 　?。?） 資源分類瀏覽模塊 　　如圖 1 所示，頁面左側(cè)的垂直導(dǎo)航欄顯示課程資源分類列表，頁面的主體區(qū)域顯示選中類別下的所有課程資源，顯示內(nèi)容包括資源的名稱、文件格式、上傳者和上傳時(shí)間及相關(guān)描 述等 ,通 過資 源名 稱鏈接 ,在打 開的頁面中可以查看資源詳細(xì)。 　?。?） 查 看資源詳細(xì)模塊 　　課程資 源包 含的文 件格 式主 要有 PDF、RAR 和 AVI這三種，因此課程資源詳細(xì)頁面采用三種不同的呈現(xiàn)方式 展現(xiàn) 課程資 源所 包含 的內(nèi)

3、容 . 教師 上傳資 源 前 先 將word 、ppt 文檔轉(zhuǎn)換成 PDF 文檔以實(shí)現(xiàn)在線閱讀 , 課程項(xiàng)目庫和案例庫則是打包成 RAR 壓縮文件以方便用戶進(jìn)行下載，對于 avi 視頻文件格式，不僅能夠下載，也可以通過在網(wǎng)頁中嵌入流媒體播放器進(jìn)行在線播放。 圖 2 所示為在線瀏覽 PDF 文檔轉(zhuǎn)換成 swf 格式的課程資源。 　　1.2網(wǎng)站后臺(tái)設(shè)計(jì) 　　（1） 課 程資源類別管理模塊 　　資源類別管理包含了添加、刪除、修改資源類別。 為便于用戶的查看和使用，資源類別名顯示在前臺(tái)頁面的垂直導(dǎo)航欄中，在管理頁面中可以對資源類別的順序進(jìn)行設(shè)置和保存，對前臺(tái)頁面資源導(dǎo)航欄進(jìn)行更新。 如圖3 所示

4、為課程資源類別管理 . 　?。?） 課程資源管理 　　課程資源管理實(shí)現(xiàn)了對課程資源網(wǎng)站的更新，可以將選中的多個(gè)資源信息進(jìn)行刪除，資源信息的刪除不僅刪除數(shù)據(jù)庫對應(yīng)的表記錄，還將徹底刪除服務(wù)器文件上傳目錄對應(yīng)的資源文件。 添加資源不僅將新的課程資源信息添加至數(shù)據(jù)庫 ,還將 對應(yīng) 的文檔 、程序 包或視 頻上傳至服務(wù)器。 　　2系統(tǒng)開發(fā)運(yùn)行環(huán)境 　　網(wǎng) 站 開 發(fā) 使 用 了 微 軟 的 ASP.NET 技 術(shù) ,C# 作 為 編程語言，使用 jQuery 技術(shù)在瀏覽器端對 HTML 元素進(jìn)行操作。 開發(fā)環(huán)境選用 Visual Studio 2005,數(shù)據(jù)庫平臺(tái)為SQL Server 200

5、5 , 服 務(wù) 器 軟 件 IIS6.0 及 運(yùn) 行 平 臺(tái) .NETframework 2.0 , 瀏 覽器版本在 IE9.0 以 上 . 　　此外，還 需 要 三 個(gè) 軟 件 包 的 支 持 ,分 別 是 用 于 大 文件 上 傳 的 NeatUpload、 轉(zhuǎn) 換 swf 格 式 的 SwfTools、 在 線 閱讀播放器 Flexpaper. 　　3關(guān)鍵技術(shù)實(shí)現(xiàn) 　　3.1文檔 　　swf轉(zhuǎn)換及在線閱讀課 程 資 源 的 各 類 文 檔 以 PDF 格 式 上 傳 , 再 通 過SwfTools 中 的 PDF2SWF 工 具 將 PDF 文 件 轉(zhuǎn) 換 為 體 積 較小的 S

6、WF 文件，適合網(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í)行命令

7、, 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í) 行 文 件 的 路 徑 需 要 寫 成 C:\\Program Files （x86）\\SWFTools\\pdf2swf.exe?, 否則無法找到轉(zhuǎn)換

8、工具 . 　?。?） 在線閱讀文檔本系統(tǒng)使用開源的 Flexpaper 播放器，可以嵌入到網(wǎng)頁中播放 swf 文檔。 　　首 先 , 下 載 解 壓 的 js 文 件 夾 和 FlexPaperViewer.swf文 件 并 復(fù) 制 到 站 點(diǎn) 目 錄 下 , 在 文 檔 閱 讀 頁 面 添 加JavaScript 腳 本對播放器參數(shù)進(jìn)行配置 , 這時(shí)頁面中播放的文檔是固定不變的。 　　接著，進(jìn) 行 資 源 文 件 的 路 徑 綁 定 ,這 樣 Flexpaper 播放 器中的 文檔 就可 以切換 . 在該 頁面中 添加 一 個(gè) 隱 藏域，通過 value 屬性將對應(yīng)資源的 swf 文件

9、路徑進(jìn)行綁定。 　　′/> 　　最 后 , 通 過 變 量 fileURL 獲 取 隱 藏 域 的 value 屬 性值 ,var fileURL=$ （"#file"）。val （）；將 swf 文 件 路 徑 傳 遞給頁面的播放器配置參數(shù)，最終實(shí)現(xiàn)了課程資源文檔的在線閱讀。 　　3.2定制資源類別導(dǎo)航欄 　　本系統(tǒng) 采用 jQuery 技 術(shù) 對 HTML 元 素 進(jìn) 行 操 作 ,以 " 所 見 即 所 得 " 的 方 式 完 成 了 對 資源類別順序的調(diào)整[ 3].

10、 　　網(wǎng)頁中包含 jQuery 程序包，代碼如下所示： 　　 　　編寫 JavaScript 腳 本程 序， 實(shí)現(xiàn) html 表 格 選 中 行 與相 鄰行 的交換 ,以選 中行 上移為 例，通 過 jQuery 交 換 相鄰行，代碼如下： 　　var currentStep=0 ; // 標(biāo) 記選中行var max_line_num=<%#i%> ; // 總 共的行數(shù)function up_exchange_line （ ）{if （ currentS

11、tep==0 ） {alert （ ′ 請 選擇一項(xiàng) ! ′ ） ;return false ;} 　　if （ currentStep<=1 ） {// 選中行超過范圍給出錯(cuò)誤提示alert （ ′ 非 法操作 ! ′ ） ;return false ;} 　　var upStep=currentStep-1 ; // 修 改序號(hào)$ （ ′#line ′+upStep+"td : first-child" ） .html （ currentStep ） ;$ （ ′#line ′+currentStep+"td : first-child" ） .html （ upStep ） ;//

12、獲 取隱藏域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)前行與上一

13、行內(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ù) 庫中 , 最后點(diǎn) 擊 "

14、重 新 生 成 導(dǎo) 航欄",與 導(dǎo)航 欄數(shù)據(jù) 源綁 定的 XML 文 檔 自 動(dòng) 更 新 ,方 便用戶的使用。 　　3.3大文件上傳通常使用 ASP.NET 提供的 FileUpload 控件就可實(shí)現(xiàn)文件上傳，但是該控件存在一些弊端。第一，當(dāng)請求超過maxRequestLength （ 默 認(rèn) 4 MB ） 之 后 ,ASP.NET 處 理 程 序?qū)⒉粫?huì)處理該請求；第 二，無法 提供 文件 上傳時(shí) 的進(jìn) 度條提示。 　　課程資源網(wǎng)站經(jīng)常需要上傳教學(xué)視頻、項(xiàng)目庫等較大文件，這些文件從幾兆到幾十兆不等，傳輸時(shí)間較長，實(shí)時(shí)提示傳輸進(jìn)度非常必要。 為解決文件上傳問題，可以采用開源界提供的上傳組件

15、NeatUpload[ 4-5] 　　. 具 體實(shí)現(xiàn)過程如下： 　　（1 ）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ū) 域 單 擊 右 鍵--->彈 出

16、 的 菜 單 中 選 "選 擇 項(xiàng) "---> 彈 出 窗 口 中 選 擇 " 瀏 覽 " ---> 添 加 "Brettle.Web. 　　NeatUpload.dll " ,.NET Framework 組 件選項(xiàng)卡中選中對應(yīng)的組件，這樣工具欄中就會(huì)出現(xiàn) NeatUpload 控件組。 本系統(tǒng)主要使用 InputFile 和 ProgressBar 這兩個(gè)控件。 　?。? ） 修 改網(wǎng)站配置文件Web.config 是 站點(diǎn)文件夾的配置文件 ,system.web 節(jié)點(diǎn)中寫入下面的配置，設(shè)置最大請求長度和運(yùn)行超時(shí)時(shí)間，并且傳輸文件的過程中顯示進(jìn)度條。 　　

17、 　　 　　 　　 　?。? ） 使 用 NeatUpload 實(shí) 現(xiàn)大文件上傳從工具欄中將 InputFile 和 ProgressBar 這兩個(gè)控件拖放至頁面，其中 InputFile 控件用于在瀏覽器端選擇上傳的文件，P

18、rogressBar 控件顯示傳輸進(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 .

19、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í)行文件上傳操作} 　　軟件與算法S

20、oftware and Algorithms3.1定時(shí)控件。 　　系統(tǒng)利用 timer 定時(shí)控件實(shí)現(xiàn) 波形 的實(shí)時(shí) 顯示 . 為了避免 timer 定時(shí)控件在刷新時(shí)產(chǎn)生圖形閃爍， 采用了雙緩沖存儲(chǔ)繪制的方法，其關(guān)鍵代碼如下： 　　BufferedGraphicsContext currentContext ;// 為了消除繪圖閃爍 , 重新定義繪制緩沖區(qū)BufferedGraphics myBuffer ;currentContext=BufferedGraphicsManager.Current ;myBuffer =currentContext.Allocate （ this.Crea

21、teGraphics （ ） ,this.DisplayRectangle ） ;3.2串口控件。 　　使 用 serialPort 控 件 時(shí) 需 要 設(shè) 置 匹 配 的 波 特 率 以 及端口號(hào)，并在主程序中設(shè) 置開 啟串口 ,通過 串口 傳送過來的數(shù)據(jù)可以用 serialPort1.ReadLine 函數(shù)讀取[4]. 　　 　 參考代碼如下： 　　private void serialPort1_DataReceived （ object sender , Sys-tem.IO.Ports.SerialDataReceivedEventArgs e ）{serialPort1.N

22、ewLine="\n" ; // 判斷接收是否開始string RecData ; // 定 義接收變量if （ serialPort1.IsOpen== true ） // 判 斷串口狀態(tài){RecData= serialPort1.ReadLine （ ） ; // 接 收數(shù)據(jù)RecData.Trim （ ） ;} 　　} 　　4結(jié)束語 　　系統(tǒng)實(shí)現(xiàn)了測試信號(hào)的自動(dòng)記錄， 并加入了存儲(chǔ)、打印、顯示控制等功能。 實(shí)現(xiàn)了 C8051F020 單片機(jī)采集、串口通信功能；利用 C# 自行設(shè)計(jì)了專用控件，實(shí)現(xiàn)了信號(hào)波形的顯示控制、存儲(chǔ)打印等功能。 系統(tǒng)經(jīng)過在部隊(duì)的使用表明，滿足了裝備維護(hù)的需求，提高了維護(hù)效率，降低了維護(hù)成本。 系統(tǒng)的設(shè)計(jì)體現(xiàn)了裝備維護(hù)信息化、自動(dòng)化的特點(diǎn)，系統(tǒng)可擴(kuò) 展性 強(qiáng)，可 延伸到 其他 型號(hào)的裝備上，具有一定推廣價(jià)值。