基于ASP.NET的课程资源网站的设计与实现

2015-09-21常婉纶

网络安全与数据管理 2015年11期

关键词：播放器控件类别

常婉纶，刘辉

（西安理工大学，陕西西安 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控件显示传输进度。

实现文件上传功能的程序如下。