[ASP.NET WebForm] #6 迴圈是什麼、GridView 的練習

本篇重點:

  • 迴圈
  • GridView 的介紹
  • 補充用法

迴圈的介紹

  1. 簡化程式碼:需要重複執行相同或類似的程式碼,可以使用迴圈來簡化。
  2. 控制程式流程:例如在某個條件滿足之前重複執行程式碼,或在某個條件滿足後退出迴圈。
  3. 處理集合中的元素:當需要迭代處理集合(如陣列、清單或資料庫結果集)中的每個元素時,可以使用迴圈來進到各個集合中並對每個元素執行相同的操作。 <br/> 常見的迴圈結構包括: <br/>
  • For迴圈:用於指定固定次數的迭代,根據初始值、終止條件和遞增/遞減值進行。

  • While迴圈:在迴圈開始之前先評估條件,只有在條件為真時才執行迴圈內的程式碼。

  • Do-While迴圈:在迴圈開始之前先執行一次程式碼,然後評估條件,只有在條件為真時才繼續執行迴圈內的程式碼。

  • For Each迴圈:用於遍歷集合中的每個元素,不需要指定計數器或範圍。 <br/> 總之,迴圈能夠提高程式的效率,減少重複出現的程式碼,並且提供更靈活的程式流程控制。但是也需要注意迴圈中的退出條件並確保不會產生無窮迴圈,以免導致程式執行過程中的問題。


以下簡單示範 FOR 迴圈的寫法,

For counter As Integer = start To end Step increment
    ' 在此執行的程式碼區塊
Next

counter:計數器變數,用於追蹤迴圈的執行次數。<br/> start:起始值,指定計數器的起始值。<br/> end:結束值,指定計數器的結束值。<br/> increment:遞增量,指定計數器的遞增或遞減步數。<br/>

【範例】:將 1 到 5 顯示在 Label,並用「,」隔開。

For i As Integer = 1 To 5
    Label.Text = Label.Text & i & ","
Next

這個迴圈從 1 開始,以遞增方式執行到 5。在每次遞增時,迴圈會將變數 i 的值丟進 Label 中。

GridView

GridView 是一個用於顯示和編輯資料的網格控制項,能夠將資料庫的資料以表格形式呈現在網頁上。

STEP 1:打開工具箱 –> 資料 –> GridView。<br/> 螢幕擷取畫面 2023-07-12 144019<br/><br/> STEP 2:前端布局。<br/> 點選「自動格式化」選擇模板 –> 在「編輯資料行」編輯欄位資料。<br/> 螢幕擷取畫面 2023-07-12 144254<br/>

選擇欄位 –> 按加入 –> 輸入 HeaderText (欄位)、Visible (隱藏與否)、DataField (資料識別名稱) –> 最後將「自動產生欄位」消除。<br/>

螢幕擷取畫面 2023-07-12 155057 <br/><br/>

在GridView中,有不同的欄位類型可用於顯示資料。以下是幾種常見欄位類型:<br/>

  1. BoundField(綁定欄位):這是預設的欄位類型。可以顯示資料來源中的單一欄位。BoundField 會將資料綁定到 GridView 的欄位上,以文字的形式顯示。可以通過設定 DataField 和 HeaderText 屬性來指定要顯示的資料欄位和欄位標題。

  2. TemplateField(樣板欄位):提供更多彈性和自定義的資料顯示方式。可以在欄位中使用自訂的 HTML 和控制項,例如嵌入按鈕、超連結或其他控制項。可以在 ItemTemplate 屬性中定義欄位的模板。

  3. CommandField(命令欄位):用於在 GridView 每一列的欄位中添加命令按鈕,例如編輯、刪除、選擇等。CommandField 具有 Edit、Delete、Select 等預設的命令按鈕類型。

  4. CheckBoxField(複選框欄位):用於在 GridView 中顯示複選框,讓使用者可以進行多選操作。

除了以上列出的幾種類型外,還有其他特定的欄位類型,例如 HyperLinkField(超連結欄位)、ImageField(圖片欄位)等,能夠在 GridView 中顯示超連結和圖片等內容。<br/><br/>

  • 後端程式:
         '新增資料表
          Dim dt As Data.DataTable = New Data.DataTable()  '宣告一個 DataTable 的變數 dt
          Dim drow As Data.DataRow                         '宣告一個 Row 變數
          dt.Columns.Add("第1欄名稱", System.Type.GetType("System.String")) '欄位名稱
          dt.Columns.Add("第2欄名稱", System.Type.GetType("System.String"))
          dt.Columns.Add("第3欄名稱", System.Type.GetType("System.String"))
          '迴圈暫存變數
          Dim i As Integer
          For i = 0 To 5
               drow = dt.NewRow()   '新增一列
               drow("第1欄名稱") = i
               drow("第2欄名稱") = i & i
               drow("第3欄名稱") = i & i & i
               dt.Rows.Add(drow)    '將資料加進 Row 裡面
           Next
           XxxGV.DataSource = dt  '將 dt 資料丟進 GridView 裡 (XxxGV 是 GV 的名稱)
           XxxGV.DataBind()

螢幕擷取畫面 2023-07-12 193249 <br/><br/> 執行後的畫面長這樣:<br/> 螢幕擷取畫面 2023-07-12 193258<br/><br/> 提供另一種寫法,一行一行新增資料:

螢幕擷取畫面 2023-07-12 193911<br/> 螢幕擷取畫面 2023-07-12 194029

補充用法

RowCommand 事件

STEP 1:在「編輯資料行」中加入 ButtonField –> ButtonType:按鈕的形式 / HeaderText:欄位名稱(可不填) / Text:按鈕顯示名稱/CommandName:後端判斷事件的名稱。<br/> 螢幕擷取畫面 2023-07-12 200649<br/><br/> STEP 2:在後端寫一個 RowCommand 事件的 Function。

Protected Sub XxxGV_RowCommand(Sender As Object, e As GridViewCommandEventArgs) Handles XxxGV.RowCommand
        Dim index As Integer = Convert.ToInt32(e.CommandArgument)
        Dim row As GridViewRow = GridView.Rows(index)
        '按下XXX
        If e.CommandName = "事件名稱" Then

        End If
End Sub

也可以在前端左下角點「設計」–> 點一下GV –> 選擇「事件」–> RowCommand 右邊的欄位點兩下。<br/> 螢幕擷取畫面 2023-07-13 174631 螢幕擷取畫面 2023-07-13 174654


DataKeyNames 屬性

在 GridView 中,若有隱藏的欄位,則需要透過 DataKeyNames 屬性來識別資料。

輸入一個隱藏的欄位(DataField要有資料) –> 設定屬性:DataKeyNames (與 DataField 相同名稱)。<br/> 螢幕擷取畫面 2023-07-13 100000 螢幕擷取畫面 2023-07-13 100044<br/>

1.取用該列的隱藏欄位(隱藏欄位的順序,從0開始):XxxGV.DataKeys(e.CommandArgument)(0).ToString() <br/> 2.取用該列的顯示欄位(全部欄位的順序,從0開始):row.Cells(0).Text <br/>

螢幕擷取畫面 2023-07-13 102725


Row Data Bound 事件

可以在資料綁定過程中對 GridView 的每一行自訂外觀和行為,或者執行相關的資料操作。<br/>

        Protected Sub GridView_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView.RowDataBound
        Dim oRow As Data.DataRowView  '宣告變數判斷 GV 的列
        Dim oFontColor As System.Drawing.Color = Drawing.Color.Empty '宣告顏色的變數

        If e.Row.RowType = DataControlRowType.DataRow Then '判斷讀取的資料列
            oRow = CType(e.Row.DataItem, Data.DataRowView)
            If oRow("欄位名稱") = "xxx" Then
                oFontColor = Drawing.Color.Red
            Else
                oFontColor = Drawing.Color.Black
            End If
            e.Row.Cells(0).ForeColor = oFontColor '將顏色指定到資料列
        End If
    End Sub

螢幕擷取畫面 2023-07-13 110452<br/> 螢幕擷取畫面 2023-07-13 110440

參考影片:https://www.youtube.com/watch?v=vgbW4EGIWM8