019作業清點系統V.1.0實作

　　首先把資料表做好，如下：

　　這個資料表很簡單，流水號(id)之外，「stu_date」是資料輸入的日期，這欄位的資料由系統直接截取當天日期(程式碼為

TextBox2.Text = DateTime.Now.ToString();

「stu_subject」是科目;接下來的三欄分別是未完成作業的學生、已完成的學生，以及最後日期註解欄位。

　　接下來是網站規劃。預計設定三個頁面：

（１）       展示頁，取名「homewordCkShow.aspx」。

這個頁面用來展示每日清點的結果。該頁面不設權限控管，故在最外層，與「login」頁面同一層。此外，該頁面做兩個按鈕連結，一個是「總表編輯」，一個是「清點作業」。

這個頁面相對單純，只用一個GridView展示。其中有三個欄位要轉成樣板，並做好細部修改。(樣板的重新繫結在此不贅述，參考其他章節)

因為這個頁面相對單純，沒什麼程式碼要特別講的，就這樣吧！

以下是該頁面的畫面設計：

（２）作業清點頁面，取名「homeworkCK.aspx」。

這是最複雜的一個頁面了，程式相對也多。先看畫面：

這裡用到了兩個「Panel」。「Panel1」裡放兩個「CheckBoxList」，以「互相搬移」的程式做清點座號的基礎，相關程式設計概念請看前一章節。不過為了詳述，在此仍列出相關程式如下：

移至已交區按鈕的程式截圖如下：

String[] itemA:這是設一個字串陣列。等號右邊是說這個陣列的大小不能超過「CheckBoxList1」裡項目的總數。

接下來是一個回圈，用來把「CheckBoxlist1」裡被選到的項目丟到兩個地方，一個是字串陣列「itemA」;另一個是「CheckBoxList2」。

　　第二個回圈則是把「CheckBoxList1」裡剛才被選到的項目(item)從「CheckBoxList1」裡移除。要注意的是這裡使用的是對照itmeA裡被填進去的項目。

送回未交區按鈕的程式截圖如下：

跟上一個類似，不多說。

不過，由於一開始先將「CheckBoxList2」區域的兩個按鈕都設了「enabled = false」(在「Page_Load」裡先設定了!)，要等到「CheckBoxList1」的資料「送出」後才打開這一區的兩個按鈕(「送回未交於」及「清點完成」兩個按鈕)。這時如果將資料反向送回未交區，會導致該區兩個按鈕同時失去作用，故在此加上打開的程式碼如下:

打開當然不該是無條件的，如果「CheckBoxList2」裡沒東西，就不用送回，因此這兩個按鈕要保持「不能動」的狀態；反之，則打開。

接下來，我們來看看執行的結果，應該會像下面的圖：

這裡故意留下一個號碼放在「CheckBoxList1」裡。如果這是清點的結果，再來應該是按下「清點完成」按鈕，並將相關資料送交「Panel2」裡的暫存區，同時「Panel1」要關閉，才不會產生干擾。

「Panel2」裡的畫面設計如下:

　　日期欄位的資料直接截取當日的日期，程式碼為:

TextBox2.Text = DateTime.Now.ToString();

其他各欄位的資料都由「Panel1」裡的各欄位依序產生，這些相關的程式碼都寫在「Panel1」裡的最後一個按鈕à「清點完成」。

清點完成按鈕的程式碼如下：

　　如果CheckBoxList1裡的選項全都送到CheckBoxList2，表示所有學生都交作業了，這時，在TextBox3裡(未交學生區)就直接顯示「全部完成」;如果有未交的學生，則進到「if…」程式裡的「else」區。其他的就不多作解釋了。

　　此外，如果點完才發現還有調整的空間呢？有了這層考量，所以又增加了一個「微調」按鈕，程式碼如下：

　　基本上就是把「Panel1」打開，把「Panel2」關閉，同時把「Panel1」裡的所有按鈕打開(enabled = true)，把兩個CheckBoxList打開，同時把「Panel2」裡的所有TextBox資料清空。

　　如果發現需要重新清點呢？我在這裡設了一個全部重來的按鈕，程式碼如下：

　　很簡單的一行程式碼，其實只是讓網頁重新載入到最初的狀態而已。

　　此外，考量到如果很快可以判斷全班都交了，一個一個點太累了，因此加了一個按鈕，叫作「全選用前置按鈕」，它的使用方法是先選第一個選項，再按這個按鈕，那麼CheckBoxList1裡的所有選項就會同時被勾選。程式碼如下:

　　到目前為止，都是清點的前置作業，這些資料都還沒進到資料表中。當一切都確認了後，就是把資料寫入資料表裡的時候了。這跟之前網誌「008自訂新增文章頁面」裡介紹的一樣。首先，拉進一個「SqlDataSource」，設定資料來源，指向相關資料表，並進到「進階」，產生insert陳述式。如下圖所示：

　　點「SqlDataSource1」，並切換到「原始檔」，如下圖：

「Delete」跟「Update」用不到，可以註解掉(不理它們也無妨)；重點是「InsertParameters」標籤保留。切換回「設計」，看畫面右邊欄位，找到「InsertQuery(查詢)」，點右側的小方塊：

用「control」方式，指定好每個欄位的相應位置：

　　最後，把插入資料的程式碼寫在「確認，儲存」按鈕：

　　程式碼如下：

　　資料寫入資料庫的同時，網頁也重新載入，這樣一來所有表單就都清除了。

　　到這裡，清點系統最複雜的部份就搞定了！

(註:此外，還有核取方塊太小要解決的問題，參看之前章節，有決解方法)

（３）編輯頁面，取名「homeworkED.aspx」。

　　這裡就不多說明，因為都是之前章節介紹過的，只設概念。

　　清點作業完成後，資料表裡新增了一筆資料。可以在最外層的總表頁面查看。如果想對表中的資料做修改，例如原本沒交作業的學生把作業完成了，就要針對每一筆資料作修改，這時就可以進到這一頁來處理。

　　進到這一頁後，我的想法是用兩個「GridView」放在兩個Panel裡。第一個GridView展示用，並開啟排序，這樣才能找到最新一筆資料(目前還沒找到讓資料表反向排序的設定，可能要自己寫程式，目前還沒這功力…)。如果要修改某一筆資料，則按「選取」，這時兩個Panel的開關就互換了。

　　以上做法很基本，前面章節有。只是在做這一頁時，發現Panel2裡的GridView2編輯完後，會跳回Panel1的GridView1，雖然資料已改，但呈現的是上一頁的畫面。解決方法是在「GridView2」的「RowEditing」及「RowUpdating」事件上寫下兩個Panel的開關，如下圖示：