我的C#探索之路: 010完整作文展示平台製作

　　想法：

　　製作一個作文展示平台，進到主頁面，可以看到所有文章列表，包含兩年四個學期的所有作文。一篇一篇找很麻煩，為家長設想，故製作一個簡易搜尋引擎，依學生名稱找出該生所有文章，並對其中一篇想閱讀的做放大閱讀的功能。

　　這裡是用三個「Panel」做開關。第一個純展示的列表放在「Panel1」，預設一進入網頁就開啟這個Panel。其他兩個則先關閉。

　　為了製作簡易搜尋引擎，拉進一個「DropDownList」，並綁定學生名稱資料表。再拉個按鈕，用來控制第二個展示資料表(GridView2)及「Panel2」的啟閉。

　　接下來，在Panel1裡放進一個GridView，做好資料行的編輯，最後把「作文內容」轉成樣板。

　　轉成樣板的用意，是為了把預設的「Label」改成「TextBox」。因為「Label」無法排版，只有「TextBox」才有基本的排版功能。此外，樣板中的「EditItemTemplate」雖預設就是「TextBox」，但是預設是「SingleLine」，要改成「MultiLine」;不過，這個GridView1是用來展示的，故重點不在「EditItemTemplate」，反而是「ItemTemplate」才是重點。

　　「ItemTemplate」的更改，除了刪除原來的「Label」控制項之外，改長、寬後，「SingLine」改成「MultiLine」，最後，別忘了「DataBinding」。這裡因為是展示，故綁定只需用到「單向繫結」。

　　上圖是展示的結果。當然，這裡只是「Panel1」裡的「GridView1」展示成果。

　　接下來在「Panel2」裡放進第二個「GridView」，在資料來源的選擇上，不用「SqlDataSource1」，選擇「新資料來源」。這裡每一個資料來源的選擇，都用到新的，不與其他共用。

　　重點來了，因為「GridView2」是給搜尋引擎控制的，故到這一步驟時，要打開「where」做進一步的設定。

　　上面的連續圖說，表示要找出哪些資料?必須藉由「DropDownList1」裡的字串，用「Control」的方法來做核對。特別提醒，「運算子」用「=」，是「精確搜尋」，表示要每一個字都一樣才會找出來。如果沒把握每個字都一樣，可以把運算子由「=」改成「Like」，這是「模糊搜尋」的方法。

　　這個例子，是藉由「學生姓名」來搜尋，故將「stu_name」欄位交給「DropDownList1」控制。

　　以上圖解，是補「DropDownList1」的資料繫結。因為之前「GridView2」的「where」子句已寫好，故基本的功能已啟動。(當然，DropDownList1的資料繫結也可以先做，不影響。)

　　雖然「Button1」的程式都還沒寫，但按該按鈕還是會有搜尋的功能。

　　雖然能搜尋了，但其實有些缺點，例如網頁一載入就會先執行搜尋，致資源的浪費。為了解決這問題，首先是把GridView2的「DataSourceID」清空，然後用程式去控制。照下面的圖解操作。

　　上圖表示把「GridView2」的「DataSourceID」原來的「SqlDataSource2」清除。

　　清空資料來源時，會問是否重整欄位和索引鍵，記得選「否」。

　　開始寫ButtonClick程式，按兩下吧!

　　這裡主要的程式碼是:

GridView2.DataSourceID = “SqlDataSource2”;

之前清空了GridView2的資料來源，現在用程式的方式補上，這樣一來，才不會在網頁載入就執行，而是等到按了按鈕後才執行。

此外，網頁不該三個Panel都顯現，正常情況是一次只能有一個打開，故補上三個Panel的開關指令。

　　同樣的，網頁一載入時，也該只出現「Panel1」，故補上相關的程式碼。

　　來看看執行結果。一載入網頁，只有「Panel1」打開，顯示出「GridView1」的成果。

　　當按下「搜尋」按鈕後，「Panel1」關閉，「Panel2」打開，當然，「Panel3」也是關閉的。

　　雖然學生的文章已可基本展示與搜尋了，但當各學期的文章都輸入完成後，一個學生會有好幾篇文章，如果能進一步點選單一文章來閱讀，應該會更理想。為此，我重新編輯資料行，把「選取」的形式從「Link」改成「Button」(其實不改也無妨，只是會以文章連結的方式呈現)。

　　再來，把「SelectText」從「選取」改成「閱讀」。(這裡只是文字的顯示而已)

　　接下來，就準備寫程式來抓取該「GridView2」裡的資料了。

　　雖然按鈕的文字從「選取」改為「閱讀」，但其實它還是選取的功能。

　　當我們按下該按鈕後，會觸發「SelectedIndexChanging」事件，我們就是把程式碼寫在這裡。(特別注意，接下來的程式是寫在「SelectedIndexChanging」裡，不是一般常用的「SelectedIndexChanged」)。

　　此外，要搞清楚我們要撈的資料，是從哪裡撈出來的。回到「GridView2」的樣板編輯，找到「ItemTemplate」，這裡之前被我們改過，把「Label」改為「TextBox」控制項。注意該控制項的「id」，它叫作「TextBox3」，等一下寫程式的時候要指向它。

　　打開「GridView2」的「SelectedIndexChanging」事件，程式碼:

TextBox tb01 = (TextBox)GridView2.Rows[e.NewSelectedIndex].FindControl(“TextBox3”);

註解:

設定一個「TextBox」物件，取名為「tb01」，接下來看「=」右邊，用「FindControl」的方法，去「GridView2」的「TextBox3」裡撈資料，而要撈的是選取到的那一列，因為是使用者選取的，不知是哪一列，故用「Rows[e.NewSelectedIndex]」。最後，把撈到的資料轉換成「TextBox」物件，故「=」右邊會緊接著「(TextBox)」。轉換成功後，把結果丟回「=」左邊給「tb01」。