2017年5月11日 星期四

007編輯資料行與轉成樣板

  GridView的預設值未必符合我們的需求,因此適當的調整是必要的。看下面的圖:
  其實「id」不必出現,那是電腦在紀錄的流水號,故可隱藏;此外,各欄位的標題改成中文,較符合我們的使用習慣;最後,學生的文章內容應該要有足夠的長度與寬度,預設用「Label」是不理想的,故最後一個欄位應該改成「TextBox」來呈現較好。以下是操作流程。

  GridView控制項的右上角有一個小按鈕,游標靠近才會出現。點它,如以呼叫出下層選單。選「編輯資料行」。

  「id」不需呈現在瀏覽器畫面上,故把它「×」。它還是存在,只是沒呈現出來而已。

接下來只是把英文名改成中文名而已,找各欄位的「HeaderText」修改。

  因為「作文內容」在呈現上是以「Label」的樣式呈現,不符合我們的需求,為了將它改成「TextBox」,故必須先將該欄位轉為「TemplateField(樣板)


  雖然「作文內容」欄位被轉成樣板,但裡面的設定沒變。為了要符合我們的需求,要對它作編輯。

  預設情況下,進到樣板編輯裡,會停留在「ItemTemplate」的編輯畫面。「ItemTemplate」是用來將最後結果呈現出來的樣板。我們要編輯的,除了該樣板之外,還有用來輸入資料的樣板,故連「EditItemTemplate」也要一併做編輯。因此,改選更上層的「Column[4]-作文內容。


  選了上層,就會把所以可編輯的欄位都呈現出來。首先,把「EditItemTemplate」點選,再看右側下方的欄位,做屬性的調整。

  一開始要調整的是「TextMode」,預設是單行輸入(SingleLine),把它調成多行輸入(MultiLine)。

  接下來,加大欄位空間,把高度與寬度都加大。

  剛才改的是編輯樣板。接下來,要改變呈現的方式。預設用「Label」,資料只能文字一串呈現,無法排版,例如無法行首空兩格。改成「TextBox」就可解決了。

  首先,把「Label」控制項刪除。

  接下來,重新放入一個「TextBox」控制項。

  跟「EditItemTemplate」一樣,把相關參數調整好。

  兩個部份都調整好了以後,游標移到右上角,會出現一個小箭頭按鈕,選「編輯DataBindings」。因為原來的「Label」控制項是有資料繫結的,被刪除了後,新增的「TextBox」控制項沒有資料繫結,是沒有作用的,因此要自己動手做資料繫結。

  照著圖示操作。要注意的是,「雙向繫結」的寫法是「Bind(“欄位名”)」,而「單向繫結」關為「Eval(“欄位名稱”)」。雙向可輸入,單向則專用於資料呈現。

  都設定好後,別忘了游標移到該樣板的右上角,呼叫出選單。

  按下「結束樣板編輯」,剛才的設定才會生效。

  最後,看看結果吧!

  試著輸入文章,並做斷行、空兩格的格式調整。

  編完後,按「更新」。

  這是最後呈現的樣子。

2017年5月3日 星期三

邁向五月,新的里程

  五月了,部落格建立至今,跨過一個新的月份。這幾天工作忙,沒有新的進度。希望接下來的日子,能專心在程式設計的領域,並能有所突破,自勉~