基于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.

責任編輯（責任編輯：杜能鋼）