基于ASP.NET的课程资源网站的功能设计

来源：学术堂作者：姚老师
发布于：2015-09-15 共4438字

　　0引言

　　随着高职院校对于示范性专业建设工作的开展 ,积极探索课程改革新思路，建立一套支持日常教学活动，集共享、管理和展示等功能于一体的课程资源库尤为重要。通过 Web 网站建立实现课程资源库，充分利用校园网络，为师生提供了新型的教学平台.

　　本文围绕着基于 ASP.NET的课程资源网站的功能设计，对网站实现过程中的关键技术进行分析研究，具体介绍了大文件上传、定制资源类别导航栏、文档自动转换及在线阅读的实现过程。

　　1系统功能

　　课程资源网站从使用角度分为前台功能和后台功能，前台功能面向浏览网页的普通用户和课程学习的学生用户，可以在线学习或者下载课程资源 ,网站后台面向网站管理员及教师用户，对网站的课程资源进行更新维护。

　　1.1网站前台

　　（1）资源分类浏览模块

　　如图 1 所示，页面左侧的垂直导航栏显示课程资源分类列表，页面的主体区域显示选中类别下的所有课程资源，显示内容包括资源的名称、文件格式、上传者和上传时间及相关描述等 ,通过资源名称链接 ,在打开的页面中可以查看资源详细。

　　（2）查看资源详细模块

　　课程资源包含的文件格式主要有 PDF、RAR 和 AVI这三种，因此课程资源详细页面采用三种不同的呈现方式展现课程资源所包含的内容 . 教师上传资源前先将word 、ppt 文档转换成 PDF 文档以实现在线阅读 , 课程项目库和案例库则是打包成 RAR 压缩文件以方便用户进行下载，对于 avi 视频文件格式，不仅能够下载，也可以通过在网页中嵌入流媒体播放器进行在线播放。图 2 所示为在线浏览 PDF 文档转换成 swf 格式的课程资源。

　　1.2网站后台设计

　　（1）课程资源类别管理模块

　　资源类别管理包含了添加、删除、修改资源类别。为便于用户的查看和使用，资源类别名显示在前台页面的垂直导航栏中，在管理页面中可以对资源类别的顺序进行设置和保存，对前台页面资源导航栏进行更新。如图3 所示为课程资源类别管理 .

　　（2）课程资源管理

　　课程资源管理实现了对课程资源网站的更新，可以将选中的多个资源信息进行删除，资源信息的删除不仅删除数据库对应的表记录，还将彻底删除服务器文件上传目录对应的资源文件。添加资源不仅将新的课程资源信息添加至数据库 ,还将对应的文档、程序包或视频上传至服务器。

　　2系统开发运行环境

　　网站开发使用了微软的 ASP.NET 技术 ,C# 作为编程语言，使用 jQuery 技术在浏览器端对 HTML 元素进行操作。开发环境选用 Visual Studio 2005,数据库平台为SQL Server 2005 , 服务器软件 IIS6.0 及运行平台 .NETframework 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 文件路径进行绑定。

　　最后 , 通过变量 fileURL 获取隐藏域的 value 属性值 ,var fileURL=$ （"#file"）。val （）；将 swf 文件路径传递给页面的播放器配置参数，最终实现了课程资源文档的在线阅读。

　　3.2定制资源类别导航栏

　　本系统采用 jQuery 技术对 HTML 元素进行操作 ,以 " 所见即所得 " 的方式完成了对资源类别顺序的调整[ 3].

　　网页中包含 jQuery 程序包，代码如下所示：

　　编写 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>

　　（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 ） ; // 执行文件上传操作}

　　软件与算法Software and Algorithms3.1定时控件。

　　系统利用 timer 定时控件实现波形的实时显示 . 为了避免 timer 定时控件在刷新时产生图形闪烁，采用了双缓冲存储绘制的方法，其关键代码如下：

　　BufferedGraphicsContext currentContext ;// 为了消除绘图闪烁 , 重新定义绘制缓冲区BufferedGraphics myBuffer ;currentContext=BufferedGraphicsManager.Current ;myBuffer =currentContext.Allocate （ this.CreateGraphics （） ,this.DisplayRectangle ） ;3.2串口控件。

　　使用 serialPort 控件时需要设置匹配的波特率以及端口号，并在主程序中设置开启串口 ,通过串口传送过来的数据可以用 serialPort1.ReadLine 函数读取[4].
　　

　参考代码如下：

　　private void serialPort1_DataReceived （ object sender , Sys-tem.IO.Ports.SerialDataReceivedEventArgs e ）{serialPort1.NewLine="\n" ; // 判断接收是否开始string RecData ; // 定义接收变量if （ serialPort1.IsOpen== true ） // 判断串口状态{RecData= serialPort1.ReadLine （） ; // 接收数据RecData.Trim （） ;}

　　}

　　4结束语

　　系统实现了测试信号的自动记录，并加入了存储、打印、显示控制等功能。实现了 C8051F020 单片机采集、串口通信功能；利用 C# 自行设计了专用控件，实现了信号波形的显示控制、存储打印等功能。系统经过在部队的使用表明，满足了装备维护的需求，提高了维护效率，降低了维护成本。系统的设计体现了装备维护信息化、自动化的特点，系统可扩展性强，可延伸到其他型号的装备上，具有一定推广价值。

相关内容推荐