008自訂新增文章頁面

為了日後維護方便，先在資料庫裡新增三張資料表：「stuNumList---學生座號」、「stuNameList---學生姓名」，以及「compTitleList---作文題目列表」。

往後如果要變動裡面的資料，例如增加作文題目、學生改名、增加學生……直接在資料表中更改即可，這樣，用同一張資料表的所有網頁就會跟著變，方便有效率。以下是三張資料表的內容：

接下來，打開一張新網頁，列出「座號」、「姓名」、「作文題目」以及「作文內容」四個項目，並在其後拉出三個「DropDownList」以及一個「TextBox」，如下圖:

以座號為例，要把「DropDownList1」與「stuNumList」資料表連結，依照以下圖示操作:

操作至此，開啟瀏覽器測試結果如下:

可知在瀏覽器上，已可正常使用資料表的內容了。

「姓名」以及「作文題目」的操作方式相同，只是，每一個都要用「新資料來源」才行，這樣才會有不一樣的「SqlDataSource」，如下圖:

都設定好了，「座號」、「姓名」及「作文題目」在瀏覽器上的顯示應該如下圖:

至於「作文內容」呢?因為不會用到資料表，而是要另外打字進去的，所以不用另外連結資料表。

接下來是重點中的重點，要藉由一個「SqlDataSource」做資料連結，並由此做到「新增」的功能。以下圖示操作:

拉進一個「SqlDataSource」控制項。因為之前做了三個資料繫結，用了三個SqlDataSource控制項，所以後來拉進來的這一個控制項，編號就到了4了。

接下來，設定資料來源以及資料表連結的過程，前面已操作過許多次了，照圖來設定:

這樣就連結好作文展示平台的資料表了。

　　如上圖，我們來檢視一下HTML原始檔。

藍底的部份是「SqlDataSource4」所產生的html標籤，包含「delete」、「insert」與「update」。我們要用的只有「insert」部份，所以其餘兩個可以直接刪除。當然，保留也無妨，不會妨礙到程式的執行。不過，這裡我選擇註解掉它。

　　整段註解就會呈現綠色，程式不會執行註解的部份。

回到「設計」畫面，先選取「SqlDataSource4」，再看看右側屬性欄位，找到「InsertQuery(查詢)」，點右側的小按鈕，如下圖:

接下來的設定很重要，就是要把資料表的相關欄位對應到剛才頁面上自行設定的每個欄位，操作如下:

上兩圖表示把資料表中的「stu_no」欄位用「Control」的方法與「DropDownList1」綁在一起。接下來的三個欄位也是一樣的方法。其中，與「TextBox1」欄位綁在一起的就是「stu_article」欄位，這是作文內容呈現的欄位。下兩張圖是示意圖:

按下「確定」後，資料表裡的各欄位就都跟頁面上的每一個控制項綁定了。最後，就是寫程式讓網頁資料能寫入資料表中的工作了。

程式要寫在哪裡?抓一個「Button」控制項，取名「新增文章」，然後把程式寫在「Button_Click」事件裡:

如上，簡單一行:「SqlDataSource4.Insert();」，當按下該按鈕，讓SqlDataSource控制項做插入的動作。

完成後，打開瀏覽器，輸入一篇文章看看:

例如我們去新增2號同學的文章，把相關資料從選單中選定，再把他的文章貼到作文內容裡。因為我們要看該篇文章有沒有新增到資料表中，故必須借助之前做的「四丁作文平台」頁面，如下圖:

最後的成果表示插入一篇新文章是沒問題的。