基于ASP.NET的網(wǎng)頁版課程表設(shè)計與實現(xiàn)

程方豪

摘要：綜合教務(wù)處課表查詢模塊的優(yōu)缺點，設(shè)計出美化版課表顯示界面。采用ASP.NET的三層架構(gòu)思想，在實現(xiàn)課程名稱、任課教師、上課地點等課程基本信息查詢功能的基礎(chǔ)上，以圓角半透明漸變顯示塊為課表顯示單元，對課表外觀進(jìn)行了美化，并增加了課程筆記功能。

關(guān)鍵詞關(guān)鍵詞：課程表；ASP.NET；顯示塊；視圖；數(shù)據(jù)集

DOIDOI：10.11907/rjdk.161372

中圖分類號：TP319文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2016）007009803

0引言

隨著互聯(lián)網(wǎng)的發(fā)展和普及，電子課表成為網(wǎng)絡(luò)教育服務(wù)不可或缺的功能。每位入庫學(xué)生的電子課表可直接由教務(wù)系統(tǒng)獲取和導(dǎo)出。通過電子課表，學(xué)生可以直接查看上課時間、上課地點和任課教師，可以對每個課程進(jìn)行評論和打分，可以復(fù)制和打印課表。以超級課程表為代表的電子課表深受學(xué)生喜愛。但目前這類軟件只有移動客戶端APP版本[1]，缺乏桌面PC端版本。同時，教務(wù)處的課表界面多面向教師，美觀度不夠，難以滿足學(xué)生喜好。本文設(shè)計和實現(xiàn)了美化版的課表查詢頁面，并對課表功能進(jìn)行了一定的補(bǔ)充和完善。

1ASP.NET三層架構(gòu)思想

ASP.NET三層架構(gòu)自底向上為數(shù)據(jù)訪問層、業(yè)務(wù)邏輯層和表示層。數(shù)據(jù)訪問層使用強(qiáng)類型的數(shù)據(jù)集，通過結(jié)構(gòu)化查詢SQL語句實現(xiàn)對數(shù)據(jù)表的查詢、插入、更新、刪除等操作。業(yè)務(wù)邏輯層是在數(shù)據(jù)訪問層和表示層之間進(jìn)行數(shù)據(jù)交換的媒介，按照系統(tǒng)業(yè)務(wù)需求來調(diào)用數(shù)據(jù)訪問層中的數(shù)據(jù)集，并將各種業(yè)務(wù)規(guī)則集合到一個邏輯中。表示層是為客戶提供用于交互的前端用戶顯示界面，幫助用戶認(rèn)識和定位應(yīng)用服務(wù)，將業(yè)務(wù)邏輯層中傳遞的數(shù)據(jù)以美觀、明了的方式呈現(xiàn)出來，主要由ASP.NET頁面實現(xiàn)[2]，如圖1所示。

2網(wǎng)頁版課程表設(shè)計

2.1數(shù)據(jù)庫設(shè)計

項目采用SQL 2008 R2設(shè)計后臺數(shù)據(jù)庫，針對學(xué)生、課程、教師、筆記等數(shù)據(jù)對象建立相應(yīng)的表單和視圖：①學(xué)生信息表：保存學(xué)生的學(xué)號、姓名、性別、專業(yè)、登錄密碼、郵箱等基本信息，設(shè)置學(xué)號為主鍵；②課程基本信息表：記錄學(xué)校所有課程的編號、課程名稱、開課學(xué)院、課程性質(zhì)等基本信息，設(shè)置課程編號為主鍵；③教師信息表：保存教師的編號、教師名稱、學(xué)院、職稱等基本信息，設(shè)置教師編號為主鍵；④課程開課信息表：記錄開課的編號、課程編號、老師編號、上課地點等信息，設(shè)置開課編號為主鍵；⑤學(xué)生選課信息表：記錄選課編號、開課編號、學(xué)生學(xué)號等信息，設(shè)置選課編號為主鍵；⑥個人筆記表：記錄學(xué)生學(xué)號、筆記內(nèi)容、備注等信息，設(shè)置學(xué)生學(xué)號為主鍵；⑦學(xué)生姓名專業(yè)視圖：根據(jù)學(xué)生信息表，用于獲取學(xué)生的姓名和專業(yè)信息；⑧課表視圖：結(jié)合學(xué)生信息表、教師信息表、課程開課信息表和學(xué)生選課信息表，獲取學(xué)生所選課程的基本信息，從而為構(gòu)建學(xué)生課表提供數(shù)據(jù)基礎(chǔ)。為數(shù)據(jù)集建立提供數(shù)據(jù)源的學(xué)生姓名專業(yè)視圖和課表視圖如圖2和圖3所示。

2.2業(yè)務(wù)邏輯與數(shù)據(jù)訪問設(shè)計

學(xué)生課表查詢模塊主要通過數(shù)據(jù)集的方式來綁定和獲取數(shù)據(jù)源[3]。首先建立命名為DataSet_Scoursetable.xsd的數(shù)據(jù)集，然后向數(shù)據(jù)集中添加3個視圖對象，包括課表TableAdapter、學(xué)生姓名專業(yè)TableAdapter和學(xué)生筆記TableAdapter，分別用于獲取課表信息、學(xué)生姓名和專業(yè)信息、個人筆記信息以及實現(xiàn)對個人筆記的插入和清空操作。

對于學(xué)生姓名專業(yè)的獲取，定義一個string，用于獲取登錄界面所傳遞的學(xué)生學(xué)號；在pagload事件里根據(jù)sesssion所傳遞的學(xué)號，調(diào)用學(xué)生姓名專業(yè)的數(shù)據(jù)集對象tadp_sname獲取數(shù)據(jù)，并將對應(yīng)的值顯示在頁面頂部的標(biāo)簽中。

通過調(diào)用課表視圖數(shù)據(jù)集stap_course的getdata（）方法來獲取該學(xué)生所選課程信息，并顯示在每個課程信息塊內(nèi)。所有課程信息塊在默認(rèn)情況下都是不可見的，如果在課表視圖中獲取到了某個課程信息塊所對應(yīng)的時間內(nèi)有課，就將其dispaly設(shè)置為block，將其顯示出來，并將課程信息添加到其中。由于3、4和3、4、5課程塊以及10、11和10、11、12均共用一個格子，故應(yīng)通過后臺代碼調(diào)整前端div的顯示位置，以保證在兩種情況下課程塊和標(biāo)簽文字都居中顯示。核心代碼如下：

若要進(jìn)入課程詳情頁，可將每個課程塊中的課程名稱控件設(shè)置為LinkButton，并定義LinkButton實現(xiàn)頁面跳轉(zhuǎn)。由于諸多相同的控件實現(xiàn)相同的功能，故可利用Click（）事件中的sender事件獲取觸發(fā)點擊時間的控件，然后將所有的課程名稱控件綁定該事件，即可實現(xiàn)課程顯示塊的超鏈接功能。

為實現(xiàn)課程筆記顯示，需根據(jù)學(xué)生學(xué)號，調(diào)用個人筆記視圖數(shù)據(jù)集對象stap_txtwork的getdata（）獲取筆記信息，并將返回的字符串賦給筆記TextBox對象的text屬性。同理，對個人筆記的保存、清空也可調(diào)用數(shù)據(jù)集中相應(yīng)的方法進(jìn)行操作。此外，個人筆記區(qū)域默認(rèn)為不可編輯，實現(xiàn)此功能要在筆記區(qū)TextBox對象的鼠標(biāo)點擊事件中，將ReadOnly屬性由默認(rèn)的false改為true。

以上業(yè)務(wù)邏輯流程[4]如圖4所示。

2.3用戶界面設(shè)計

學(xué)生課表界面主要由title標(biāo)題和body主體兩部分構(gòu)成，title區(qū)域由3個div標(biāo)簽并排構(gòu)成，分別顯示logo圖標(biāo)和學(xué)生姓名專業(yè)、界面標(biāo)題、輔助圖片。body區(qū)域分為左右兩個div，左邊為個人筆記區(qū)域，右邊為課表顯示區(qū)域。

在title部分，以學(xué)士帽作為logo，這樣既符合學(xué)生身份，又簡約大方。頁面標(biāo)題區(qū)域為藝術(shù)字“我的課程表”，顏色為天藍(lán)色，與課表的藍(lán)天白云背景相對應(yīng)，并采用美觀而富有活力的QQ字體。

body左邊是個人筆記區(qū)域，運用了TextBox控件，并將TextMode屬性設(shè)置為MultiLine，以使其能夠多行編輯和顯示；筆記的頁面線條繪制可根據(jù)TextBox中字體的大小，通過PS制作一個行線背景圖片，其高度保證可以恰好容納TextBox中的文字，寬度與TextBox相同，然后再將這個“單位”背景圖填充到TextBox的背景圖片中，一個仿真的筆記本效果便實現(xiàn)了；筆記本標(biāo)題背景由一個頂部邊角為圓角的藍(lán)色背景div和一個白色加粗樣式的Lable標(biāo)簽構(gòu)成；個人筆記的下方是3個經(jīng)過美化的圓形按鈕，分別實現(xiàn)對個人筆記的編輯、保存和清空功能，設(shè)計重點在于設(shè)置按鈕的box-shadow屬性，以實現(xiàn)鼠標(biāo)懸浮在按鈕上面，按鈕按下的動態(tài)效果。

body右邊是課表顯示區(qū)，課表實質(zhì)上是一個13×8的table，其中在第1行，除第1列以外，依次為周一到周日7個標(biāo)簽，其余12行的首列分別為1～12的課程節(jié)數(shù)；另一方面，上課時間一般安排為1～2，3～4，6～7，8～9，10～11，3～5，10～12，故應(yīng)將table中每列的1、2行，6、7行以及8、9行分別合并為一行，將每列的3、4、5行和10、11、12行合并為一行，從而保證課程能跨行顯示。

課程表背景考慮到使用人群主要為學(xué)生，因而應(yīng)表現(xiàn)出年輕人所喜愛的青春陽光風(fēng)格。課表背景顏色不能太深，如果底層顏色過深，對比度太過明顯，會影響課程塊的顯示效果。背景圖片應(yīng)全部為圖畫，不能出現(xiàn)文字，從而確保課程塊內(nèi)的文字顯示不會與背景中的文字發(fā)生重疊。鑒于以上因素，選擇一個男孩在彩虹下放風(fēng)箏的背影圖，并通過PS對背景進(jìn)行了虛化，修改為圓角圖片。

填充每個課程格子的是一個課程顯示塊，它也是一個div，對于顯示兩節(jié)課的div，將其height設(shè)置為table兩行的高度，對于顯示3節(jié)課的div，則將其height設(shè)置為table3行的高度。對于3、4、5以及10、11、12這些行，會根據(jù)課程情況占用前兩行或者3行全部占用。為了實現(xiàn)該效果，需要先在這些區(qū)域內(nèi)部填充一個同等大小跨3行的div，然后再在該div內(nèi)部填充一個跨2行的div，并將這些div的display屬性值設(shè)置為none，即為不可見。讀取數(shù)據(jù)庫數(shù)據(jù)時再根據(jù)所需要顯示的課程類型決定顯示跨2行的div還是跨3行的div，即將要顯示的div的display屬性設(shè)置為block。每個div都由3個標(biāo)簽構(gòu)成，分為3行以顯示課程名稱、上課地點和任課教師；每個課程顯示塊都實現(xiàn)漸變效果，確保漸變效果能夠在IE、谷歌以及火狐等瀏覽器中正確顯示。通過設(shè)置課程顯示塊div的opacity屬性，可以改變div的透明度。各div在默認(rèn)狀態(tài)下的opacity值為0.85，鼠標(biāo)懸浮在上面時，opacity值為0.90，這樣會給用戶一種div可以起伏的動態(tài)感覺。最后，將課程顯示塊div的cursor屬性設(shè)置為hand，實現(xiàn)當(dāng)鼠標(biāo)經(jīng)過div時，鼠標(biāo)形狀變?yōu)樨Q起一只手指的手形光標(biāo)。課程顯示塊漸變效果核心代碼如下[5]：

3項目成果與分析

綜合以上步驟，以筆者學(xué)校課程信息為例，在360安全瀏覽器上的課表界面顯示效果如圖5所示。同參考文獻(xiàn) [6]等課表查詢系統(tǒng)相比，本系統(tǒng)在界面上采用半透明漸變圓角懸浮塊來顯示課表信息，與青春陽光的背景相結(jié)合，符合學(xué)生的審美觀；增加了個人筆記功能，學(xué)生可在線記錄課程筆記或課程作業(yè)等信息，進(jìn)一步完善了電子課表的服務(wù)功能。

4結(jié)語

針對高校課表查詢界面不夠美觀以及缺少課程筆記功能的現(xiàn)狀，設(shè)計并實現(xiàn)了一種基于ASP.NET的網(wǎng)頁版課程表，采用SQL 2008 R2作為數(shù)據(jù)平臺，以學(xué)生課表信息的導(dǎo)入和顯示為例，對界面的顯示效果等進(jìn)行了論述。本文設(shè)計的課表查詢系統(tǒng)是以自行設(shè)計的數(shù)據(jù)庫為數(shù)據(jù)基礎(chǔ)的，如何獲取各高校學(xué)生選課信息庫記錄，使其更具有通用性和普適性，將是下階段的研究重點。

參考文獻(xiàn)：

[1]郭禹汐.基于馬斯洛需求層次理論的“超級課程表”手機(jī)APP案例研究[J].科技風(fēng)，2014（19）：275276.

[2]吳志祥.高級Web程序設(shè)計[M].北京：科學(xué)出版社，2013.

[3]楊亞菁.以項目實踐為導(dǎo)向的ASP.NET課程層次化教學(xué)研究[J].軟件導(dǎo)刊，2016，15（1）：186187.

[4]葉海智.基于微信的圖書館移動信息服務(wù)設(shè)計與實現(xiàn)[J].軟件導(dǎo)刊，2013，12（11）：8890.

[5]邁耶.CSS權(quán)威指南[M].北京：中國電力出版社，2008.

[6]錢凌.一個基于本體和規(guī)則推理的查詢系統(tǒng)的設(shè)計與實現(xiàn)[D].南京：東南大學(xué)，2006.

責(zé)任編輯（責(zé)任編輯：杜能鋼）