色色视频在线观看,久久精品国产av麻豆,久久久一区二区三区不卡

Web應(yīng)用開(kāi)發(fā)：ASP.NET 大學(xué)場(chǎng)地預(yù)約借用系統(tǒng)

2021-06-09 14:13

可以在HTML頁(yè)面編寫元素，然后使用js動(dòng)態(tài)生成，例如：

＜table class＝＂primary＂ id＝＂roomInfo＂ style＝＂width： 100％＂＞＜／table＞
document．getElementById（＂roomInfo＂）．innerHTML ＝ creatRoomTable（result）；

也可以直接在aspx文件中使用C＃的腳本進(jìn)行生成：

＜％
System．Data．DataSet ds2 ＝ MyDBUtils．DBHelper．ExecuteQuery（＂select BookInfo．ID， BookInfo．RoomNumber， RoomType， RoomPeople， MyRemark，BookSt，＂＋
＂BookEt， BookDuration from BookInfo join RoomInfo on ＂＋
＂BookInfo．RoomNumber ＝ RoomInfo．RoomNumber where ＂＋
＂BookDate ＞＇＂＋ DateTime．Now．ToString（＂yyyy－MM－dd＂）＋＂＇ and CustomerName＝＇＂＋ Request．Cookies［＂login＿name＂］．Value ＋＂＇＂）；
for （int i ＝ 0； i ＜ ds2．Tables［0］．Rows．Count； i＋＋）
｛
Context．Response．Write（＂＜tr＞＂）；
for （int j ＝ 1； j ＜ 8； j＋＋）
｛
Context．Response．Write（＂＜td＞＂）；
Context．Response．Write（ds2．Tables［0］．Rows［i］［j］．ToString（））；
Context．Response．Write（＂＜／td＞＂）；
｝
Context．Response．Write（＂＜td＞＂）；
Context．Response．Write（＂＜label＞＜input type＝＇checkbox＇ name＝＇checkbokRoom＇ value＝＇＂＋ ds2．Tables［0］．Rows［i］［0］．ToString（）＋＂－＂＋ ds2．Tables［0］．Rows［i］［1］．ToString（）＋＂＇／＞＜span class＝＇checkable＇＞退訂＜／span＞＜／label＞＂）；
Context．Response．Write（＂＜／td＞＂）；
Context．Response．Write（＂＜／tr＞＂）；
｝
％＞

表格中的radio單選按鈕，需要綁定單擊的事件，這部分代碼獲取選中的場(chǎng)地所預(yù)約的時(shí)間段，并將其顯示到表格下方的框框中，為AJAX局部更新，改變選中的場(chǎng)地時(shí)（單選按鈕的改變），也會(huì)在下面更新該場(chǎng)地的預(yù)約時(shí)間段：

function getRoomTimeSpan（）｛
var roomNumber ＝ getSelectedRadioValue（）；
／／發(fā)送請(qǐng)求獲預(yù)約的時(shí)間段
＄．a(chǎn)jax（｛
type：＇get＇，
url：＇RoomBookHandler．a(chǎn)shx＇，
async： true，
data：｛
action：＇getBookTime＇，
roomNo： roomNumber
｝，
success： function （result）｛
var dataList ＝ JSON．parse（result）；
var footerStr ＝＇＜footer id＝＂bookTimeSpan＂＞＇；
for （var ind in dataList）｛
footerStr ＋＝＇＜span class＝＂label warning＂＞＇；
footerStr ＋＝ dataList［ind］．BookSt．toString（）．trim（）．substring（0， 5）；
footerStr ＋＝＇－＇；
footerStr ＋＝ dataList［ind］．BookEt．toString（）．trim（）．substring（0， 5）；
footerStr ＋＝＇＜／span ＞＇；
｝
footerStr ＋＝＇＜／footer ＞＇；
document．getElementById（＂bookTimeSpan＂）．innerHTML ＝ footerStr；
｝，
error： function （）｛
alert（＇獲取數(shù)據(jù)失�。。В�
｝
｝）；
｝

時(shí)間段的選擇使用了一個(gè)時(shí)間選擇控件，效果如下：

預(yù)定時(shí)，獲取用戶輸入的一系列數(shù)據(jù)，然后使用AJAX發(fā)送到后臺(tái)進(jìn)行處理：

function bookRoom（）｛
var bookT ＝ document．getElementById（＂timeArrange＂）．value；
if （bookT ＝＝＝＂＂）｛
alert（＂必須選擇要借用的時(shí)間范圍�。ⅲ�；
return false；
｝
var myR ＝ document．getElementById（＂myRemarks＂）．value；
var roomNumber ＝ getSelectedRadioValue（）；
if （roomNumber ＝＝＝＂＂）｛
alert（＂必須選擇要借用的教室！＂）；
return false；
｝
／／要發(fā)送的數(shù)據(jù)，教室號(hào)，預(yù)定開(kāi)始時(shí)間－結(jié)束時(shí)間，我的備注
＄．a(chǎn)jax（｛
type：＇post＇，
url：＇RoomBookHandler．a(chǎn)shx＇，
async： true，
data：｛
action：＇bookRoom＇，
roomNo： roomNumber，
bookTime： bookT，
myRemark： myR
｝，
success： function （result）｛
alert（result）；
getRoomTimeSpan（）；
updateBookedTable（）；
｝，
error： function （）｛
alert（＇請(qǐng)求失�。。В�；
｝
｝）；
｝

注意，如果用戶輸入不合法，比如未選中時(shí)間段，未選中教室，時(shí)間段沖突等都無(wú)法有效完成預(yù)定。

預(yù)約成功顯示預(yù)約的教室：

表格創(chuàng)建代碼與場(chǎng)地顯示的表格創(chuàng)建代碼類似，取消預(yù)約的需要將取消的預(yù)定號(hào)（預(yù)定號(hào)綁定到了checkbox的value中）發(fā)送到后臺(tái)，進(jìn)行記錄刪除：

function cancelBook（）｛
var checkList ＝［］；
var timeSpanUpList ＝［］；
var checkbokContext ＝ document．getElementsByName（＂checkbokRoom＂）；
for （i ＝ 0； i ＜ checkbokContext．length；＋＋i）｛
if （checkbokContext［i］．checked）｛
var dataStr ＝ checkbokContext［i］．value．split（＇－＇）；
checkList．push（dataStr［0］）；
timeSpanUpList．push（dataStr［1］）；
｝
｝
if （checkList．length ＝＝ 0）｛
alert（＂請(qǐng)選擇您需要取消預(yù)約的教室�。ⅲ�；
return false；
｝
var cancelListStr ＝ checkList．join（＇，＇）；／／轉(zhuǎn)成1，3，4這種形式，后臺(tái)再解析
＄．a(chǎn)jax（｛
type：＇post＇，
url：＇RoomBookHandler．a(chǎn)shx＇，
async： true，
data：｛
action：＇cancelBook＇，
cancel： cancelListStr
｝，
success： function （result）｛
alert（result）；
／／刷新本表
updateBookedTable（）；
／／刷新foot
if （timeSpanUpList．indexOf（getSelectedRadioValue（））！＝－1）｛
getRoomTimeSpan（）；
｝
｝，
error： function （）｛
alert（＇連接失敗�。В�；
｝
｝）；
｝

成功以后，更新該表格。但是需要注意的是，此外還做了一個(gè)小細(xì)節(jié)，取消某一時(shí)間段以后，如果恰好在場(chǎng)地展示頁(yè)面選中的也是這個(gè)教室，那么下面的預(yù)約時(shí)間段也會(huì)同步更新，采用的同樣為AJAX技術(shù)。

success： function （result）｛
alert（result）；
／／刷新本表
updateBookedTable（）；
／／刷新foot
if （timeSpanUpList．indexOf（getSelectedRadioValue（）） �。� －1）｛
getRoomTimeSpan（）；
｝
｝，

歷史預(yù)約表格的生成，采用的是aspx中嵌入腳本的形式生成的：

＜table class＝＂primary＂ style＝＂width： 100％＂＞
＜tr＞
＜th＞教室號(hào)＜／th＞
＜th＞教室類型＜／th＞
＜th＞容納人數(shù)＜／th＞
＜th＞我的備注＜／th＞
＜th＞日期＜／th＞
＜th＞開(kāi)始時(shí)間＜／th＞
＜th＞結(jié)束時(shí)間＜／th＞
＜th＞借用時(shí)長(zhǎng)（小時(shí)）＜／th＞
＜／tr＞
＜tbody＞
＜％
System．Data．DataSet ds3 ＝ MyDBUtils．DBHelper．ExecuteQuery（＂select BookInfo．RoomNumber， RoomType， RoomPeople， MyRemark，BookDate，BookSt，＂＋
＂BookEt， BookDuration from BookInfo join RoomInfo on ＂＋
＂BookInfo．RoomNumber ＝ RoomInfo．RoomNumber ＂＋
＂where BookDate ＜＇＂＋ DateTime．Now．AddDays（1）．ToString（＂yyyy－MM－dd＂）＋＂＇ and CustomerName＝＇＂＋ Request．Cookies［＂login＿name＂］．Value ＋＂＇＂）；
for （int i ＝ 0； i ＜ ds3．Tables［0］．Rows．Count； i＋＋）
｛
Context．Response．Write（＂＜tr＞＂）；
for （int j ＝ 0； j ＜ 8； j＋＋）
｛
Context．Response．Write（＂＜td＞＂）；
Context．Response．Write（ds3．Tables［0］．Rows［i］［j］．ToString（））；
Context．Response．Write（＂＜／td＞＂）；
｝
Context．Response．Write（＂＜／tr＞＂）；
｝
％＞
＜／tbody＞
＜／table＞