基于ASP.NET的网页版课程表设计与实现

程方豪

摘要：综合教务处课表查询模块的优缺点，设计出美化版课表显示界面。采用ASP.NET的三层架构思想，在实现课程名称、任课教师、上课地点等课程基本信息查询功能的基础上，以圆角半透明渐变显示块为课表显示单元，对课表外观进行了美化，并增加了课程笔记功能。

关键词关键词：课程表；ASP.NET；显示块；视图；数据集

DOIDOI：10.11907/rjdk.161372

中图分类号：TP319文献标识码：A文章编号文章编号：16727800（2016）007009803

0引言

随着互联网的发展和普及，电子课表成为网络教育服务不可或缺的功能。每位入库学生的电子课表可直接由教务系统获取和导出。通过电子课表，学生可以直接查看上课时间、上课地点和任课教师，可以对每个课程进行评论和打分，可以复制和打印课表。以超级课程表为代表的电子课表深受学生喜爱。但目前这类软件只有移动客户端APP版本[1]，缺乏桌面PC端版本。同时，教务处的课表界面多面向教师，美观度不够，难以满足学生喜好。本文设计和实现了美化版的课表查询页面，并对课表功能进行了一定的补充和完善。

1ASP.NET三层架构思想

ASP.NET三层架构自底向上为数据访问层、业务逻辑层和表示层。数据访问层使用强类型的数据集，通过结构化查询SQL语句实现对数据表的查询、插入、更新、删除等操作。业务逻辑层是在数据访问层和表示层之间进行数据交换的媒介，按照系统业务需求来调用数据访问层中的数据集，并将各种业务规则集合到一个逻辑中。表示层是为客户提供用于交互的前端用户显示界面，帮助用户认识和定位应用服务，将业务逻辑层中传递的数据以美观、明了的方式呈现出来，主要由ASP.NET页面实现[2]，如图1所示。

2网页版课程表设计

2.1数据库设计

项目采用SQL 2008 R2设计后台数据库，针对学生、课程、教师、笔记等数据对象建立相应的表单和视图：①学生信息表：保存学生的学号、姓名、性别、专业、登录密码、邮箱等基本信息，设置学号为主键；②课程基本信息表：记录学校所有课程的编号、课程名称、开课学院、课程性质等基本信息，设置课程编号为主键；③教师信息表：保存教师的编号、教师名称、学院、职称等基本信息，设置教师编号为主键；④课程开课信息表：记录开课的编号、课程编号、老师编号、上课地点等信息，设置开课编号为主键；⑤学生选课信息表：记录选课编号、开课编号、学生学号等信息，设置选课编号为主键；⑥个人笔记表：记录学生学号、笔记内容、备注等信息，设置学生学号为主键；⑦学生姓名专业视图：根据学生信息表，用于获取学生的姓名和专业信息；⑧课表视图：结合学生信息表、教师信息表、课程开课信息表和学生选课信息表，获取学生所选课程的基本信息，从而为构建学生课表提供数据基础。为数据集建立提供数据源的学生姓名专业视图和课表视图如图2和图3所示。

2.2业务逻辑与数据访问设计

学生课表查询模块主要通过数据集的方式来绑定和获取数据源[3]。首先建立命名为DataSet_Scoursetable.xsd的数据集，然后向数据集中添加3个视图对象，包括课表TableAdapter、学生姓名专业TableAdapter和学生笔记TableAdapter，分别用于获取课表信息、学生姓名和专业信息、个人笔记信息以及实现对个人笔记的插入和清空操作。

对于学生姓名专业的获取，定义一个string，用于获取登录界面所传递的学生学号；在pagload事件里根据sesssion所传递的学号，调用学生姓名专业的数据集对象tadp_sname获取数据，并将对应的值显示在页面顶部的标签中。

通过调用课表视图数据集stap_course的getdata（）方法来获取该学生所选课程信息，并显示在每个课程信息块内。所有课程信息块在默认情况下都是不可见的，如果在课表视图中获取到了某个课程信息块所对应的时间内有课，就将其dispaly设置为block，将其显示出来，并将课程信息添加到其中。由于3、4和3、4、5课程块以及10、11和10、11、12均共用一个格子，故应通过后台代码调整前端div的显示位置，以保证在两种情况下课程块和标签文字都居中显示。核心代码如下：

若要进入课程详情页，可将每个课程块中的课程名称控件设置为LinkButton，并定义LinkButton实现页面跳转。由于诸多相同的控件实现相同的功能，故可利用Click（）事件中的sender事件获取触发点击时间的控件，然后将所有的课程名称控件绑定该事件，即可实现课程显示块的超链接功能。

为实现课程笔记显示，需根据学生学号，调用个人笔记视图数据集对象stap_txtwork的getdata（）获取笔记信息，并将返回的字符串赋给笔记TextBox对象的text属性。同理，对个人笔记的保存、清空也可调用数据集中相应的方法进行操作。此外，个人笔记区域默认为不可编辑，实现此功能要在笔记区TextBox对象的鼠标点击事件中，将ReadOnly属性由默认的false改为true。

以上业务逻辑流程[4]如图4所示。

2.3用户界面设计

学生课表界面主要由title标题和body主体两部分构成，title区域由3个div标签并排构成，分别显示logo图标和学生姓名专业、界面标题、辅助图片。body区域分为左右两个div，左边为个人笔记区域，右边为课表显示区域。

在title部分，以学士帽作为logo，这样既符合学生身份，又简约大方。页面标题区域为艺术字“我的课程表”，颜色为天蓝色，与课表的蓝天白云背景相对应，并采用美观而富有活力的QQ字体。

body左边是个人笔记区域，运用了TextBox控件，并将TextMode属性设置为MultiLine，以使其能够多行编辑和显示；笔记的页面线条绘制可根据TextBox中字体的大小，通过PS制作一个行线背景图片，其高度保证可以恰好容纳TextBox中的文字，宽度与TextBox相同，然后再将这个“单位”背景图填充到TextBox的背景图片中，一个仿真的笔记本效果便实现了；笔记本标题背景由一个顶部边角为圆角的蓝色背景div和一个白色加粗样式的Lable标签构成；个人笔记的下方是3个经过美化的圆形按钮，分别实现对个人笔记的编辑、保存和清空功能，设计重点在于设置按钮的box-shadow属性，以实现鼠标悬浮在按钮上面，按钮按下的动态效果。

body右边是课表显示区，课表实质上是一个13×8的table，其中在第1行，除第1列以外，依次为周一到周日7个标签，其余12行的首列分别为1～12的课程节数；另一方面，上课时间一般安排为1～2，3～4，6～7，8～9，10～11，3～5，10～12，故应将table中每列的1、2行，6、7行以及8、9行分别合并为一行，将每列的3、4、5行和10、11、12行合并为一行，从而保证课程能跨行显示。

课程表背景考虑到使用人群主要为学生，因而应表现出年轻人所喜爱的青春阳光风格。课表背景颜色不能太深，如果底层颜色过深，对比度太过明显，会影响课程块的显示效果。背景图片应全部为图画，不能出现文字，从而确保课程块内的文字显示不会与背景中的文字发生重叠。鉴于以上因素，选择一个男孩在彩虹下放风筝的背影图，并通过PS对背景进行了虚化，修改为圆角图片。

填充每个课程格子的是一个课程显示块，它也是一个div，对于显示两节课的div，将其height设置为table两行的高度，对于显示3节课的div，则将其height设置为table3行的高度。对于3、4、5以及10、11、12这些行，会根据课程情况占用前两行或者3行全部占用。为了实现该效果，需要先在这些区域内部填充一个同等大小跨3行的div，然后再在该div内部填充一个跨2行的div，并将这些div的display属性值设置为none，即为不可见。读取数据库数据时再根据所需要显示的课程类型决定显示跨2行的div还是跨3行的div，即将要显示的div的display属性设置为block。每个div都由3个标签构成，分为3行以显示课程名称、上课地点和任课教师；每个课程显示块都实现渐变效果，确保渐变效果能够在IE、谷歌以及火狐等浏览器中正确显示。通过设置课程显示块div的opacity属性，可以改变div的透明度。各div在默认状态下的opacity值为0.85，鼠标悬浮在上面时，opacity值为0.90，这样会给用户一种div可以起伏的动态感觉。最后，将课程显示块div的cursor属性设置为hand，实现当鼠标经过div时，鼠标形状变为竖起一只手指的手形光标。课程显示块渐变效果核心代码如下[5]：

3项目成果与分析

综合以上步骤，以笔者学校课程信息为例，在360安全浏览器上的课表界面显示效果如图5所示。同参考文献 [6]等课表查询系统相比，本系统在界面上采用半透明渐变圆角悬浮块来显示课表信息，与青春阳光的背景相结合，符合学生的审美观；增加了个人笔记功能，学生可在线记录课程笔记或课程作业等信息，进一步完善了电子课表的服务功能。

4结语

针对高校课表查询界面不够美观以及缺少课程笔记功能的现状，设计并实现了一种基于ASP.NET的网页版课程表，采用SQL 2008 R2作为数据平台，以学生课表信息的导入和显示为例，对界面的显示效果等进行了论述。本文设计的课表查询系统是以自行设计的数据库为数据基础的，如何获取各高校学生选课信息库记录，使其更具有通用性和普适性，将是下阶段的研究重点。

参考文献：

[1]郭禹汐.基于马斯洛需求层次理论的“超级课程表”手机APP案例研究[J].科技风，2014（19）：275276.

[2]吴志祥.高级Web程序设计[M].北京：科学出版社，2013.

[3]杨亚菁.以项目实践为导向的ASP.NET课程层次化教学研究[J].软件导刊，2016，15（1）：186187.

[4]叶海智.基于微信的图书馆移动信息服务设计与实现[J].软件导刊，2013，12（11）：8890.

[5]迈耶.CSS权威指南[M].北京：中国电力出版社，2008.

[6]钱凌.一个基于本体和规则推理的查询系统的设计与实现[D].南京：东南大学，2006.

责任编辑（责任编辑：杜能钢）