訂閱
糾錯(cuò)
加入自媒體

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

可以在HTML頁面編寫元素,然后使用js動態(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單選按鈕,需要綁定單擊的事件,這部分代碼獲取選中的場地所預(yù)約的時(shí)間段,并將其顯示到表格下方的框框中,為AJAX局部更新,改變選中的場地時(shí)(單選按鈕的改變),也會在下面更新該場地的預(yù)約時(shí)間段:

function getRoomTimeSpan() {
 var roomNumber = getSelectedRadioValue();
 //發(fā)送請求獲預(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ā)送到后臺進(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ù),教室號,預(yù)定開始時(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('請求失。。В;
       }
   });

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

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

表格創(chuàng)建代碼與場地顯示的表格創(chuàng)建代碼類似,取消預(yù)約的需要將取消的預(yù)定號(預(yù)定號綁定到了checkbox的value中)發(fā)送到后臺,進(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("請選擇您需要取消預(yù)約的教室。ⅲ;
       return false;
   }
   var cancelListStr = checkList.join(','); //轉(zhuǎn)成1,3,4這種形式,后臺再解析
   $.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í)間段以后,如果恰好在場地展示頁面選中的也是這個(gè)教室,那么下面的預(yù)約時(shí)間段也會同步更新,采用的同樣為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>教室號</th>
       <th>教室類型</th>
       <th>容納人數(shù)</th>
       <th>我的備注</th>
       <th>日期</th>
       <th>開始時(shí)間</th>
       <th>結(jié)束時(shí)間</th>
       <th>借用時(shí)長(小時(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>

檢索的時(shí)候,系統(tǒng)將自動從預(yù)訂表中檢索該用戶在今天之前的預(yù)約信息,并展示出來。

<上一頁  1  2  3  4  下一頁>  
聲明: 本文由入駐維科號的作者撰寫,觀點(diǎn)僅代表作者本人,不代表OFweek立場。如有侵權(quán)或其他問題,請聯(lián)系舉報(bào)。

發(fā)表評論

0條評論,0人參與

請輸入評論內(nèi)容...

請輸入評論/評論長度6~500個(gè)字

您提交的評論過于頻繁,請輸入驗(yàn)證碼繼續(xù)

  • 看不清,點(diǎn)擊換一張  刷新

暫無評論

暫無評論

人工智能 獵頭職位 更多
掃碼關(guān)注公眾號
OFweek人工智能網(wǎng)
獲取更多精彩內(nèi)容
文章糾錯(cuò)
x
*文字標(biāo)題:
*糾錯(cuò)內(nèi)容:
聯(lián)系郵箱:
*驗(yàn) 證 碼:

粵公網(wǎng)安備 44030502002758號