ASP.NET：DataGrid控制項的編輯功能

asp.net|datagrid|datagrid控制項 　　在ASP技術作Web編程的時候，因為對資料庫的操作使用的RecordSet對象，如果不使用第三方控制項，想要做到線上編輯資料就很困難。而DataGrid控制項就支援了線上編輯的功能，只要把EditCommandColumn屬性設定適當，稍加編程就可以實現了。 DataGrid控制項的EditItemIndex屬性工作表示編輯按鈕的類別，ASP.NET預設的EditItemIndex=-1，即不支援編輯屬性。下面我們通過執行個體來學習一下。

    在DataCon  Web項目裡添加一個Web Form，命名為DataGrid_Sample5.aspx，並添加一個DataGrid控制項。DataGrid控制項屬性設定如下：

<asp:DataGrid id="DataGrid1"
      runat="server"  AutoGenerateColumns="False"
      Height="282px" AllowPaging="True">
   <AlternatingItemStyle Font-Size="X-Small" BackColor="Gainsboro"></AlternatingItemStyle>
   <ItemStyle Font-Size="X-Small" BackColor="WhiteSmoke"></ItemStyle>
   <HeaderStyle BackColor="#99CCCC"></HeaderStyle>
   <Columns>
    <asp:BoundColumn DataField="id" ReadOnly="True" HeaderText="編號"></asp:BoundColumn>
    <asp:BoundColumn DataField="name" HeaderText="姓名"></asp:BoundColumn>
    <asp:BoundColumn DataField="sex" ReadOnly="True" HeaderText="性別"></asp:BoundColumn>
    <asp:BoundColumn DataField="class" ReadOnly="True" HeaderText="班級"></asp:BoundColumn>
    <asp:BoundColumn DataField="address" ReadOnly="True" HeaderText="住址"></asp:BoundColumn>
    <asp:EditCommandColumn ButtonType="PushButton" UpdateText="更新" HeaderText="編輯" CancelText="取消" EditText="編輯"></asp:EditCommandColumn>
  <asp:ButtonColumn Text="刪除" CommandName="Delete" HeaderText ="刪除"></asp:ButtonColumn>
   </Columns>
  <PagerStyle Position="TopAndBottom" Mode="NumericPages"></PagerStyle>
</asp:DataGrid>

    在這個執行個體中，我們使用了自訂的DataGrid控制項的模板設定，在設定列時使用<Columns><asp:BoundColumn>標記，其中<asp:BoundColumn>的DataField屬性工作表示繫結資料表中的欄位名稱，而HeaderText表示顯示的欄位名稱，這樣可以作出友好的資料表頭。當使用自訂模板時候，記得一定要把AutoGenerateColumns的值設為"False"，否則，在顯示的資料表中將重複顯示兩邊，一個是自訂的模板形式的，一個是系統根據資料表顯示的。系統預設的是綁定的列可以進行編輯的，但是實際應用中，我們往往不需要每列的欄位都可以編輯，只要我們在每個<asp:BoundColumn>裡添加ReadOnly="True"就可以屏蔽掉該列的可編輯屬性。在這個執行個體中，為了便於顯示，我們只要求"name"欄位可以編輯，其他都是ReadOnly="True"。<asp:EditCommandColumn>的ButtonType有兩種，分別是PushButton（按鈕樣式）和LinkButton（超串連樣式），系統預設的是LinkButton，我們在這個執行個體中使用BushButton樣式。<asp:ButtonColumn Text="刪除" CommandName="Delete">的樣式也是上面兩種，我們選擇的是LinkButton樣式 。

我們再來看DataGrid_Sample5.aspx.vb中的邏輯編碼部分：
'----code begin-----
'----省略命名空間的引用
Public Class DataGrid_Sample5
    Inherits System.Web.UI.Page
#Region " Web Form設計器產生的程式碼 "
    '此處省略表單設計器產生的程式碼
#End Region
 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        If Not IsPostBack Then
            getdata()
            '調用資料繫結過程
        End If
End Sub
    '下面是資料繫結過程
    Sub getdata()
        Dim mycon As OleDb.OleDbConnection
        Try
            mycon = New OleDb.OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb")
            Dim mycmd As OleDb.OleDbDataAdapter = New OleDb.OleDbDataAdapter("select id ,name,sex,class,address from student", mycon)
            Dim dt As Data.DataSet = New Data.DataSet
            mycmd.Fill(dt)
            DataGrid1.DataSource = dt.Tables(0).DefaultView
            DataGrid1.DataBind()
        Catch ex As Exception
            Response.Write("程式出現錯誤，資訊描述如下：<br>" & ex.Message.ToString)
        Finally
            mycon.Close()
        End Try
End Sub
    '翻頁事件程序
 Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles DataGrid1.PageIndexChanged
        DataGrid1.CurrentPageIndex = e.NewPageIndex
        getdata()
End Sub
    '請求排列順序事件程序
 Private Sub DataGrid1_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles DataGrid1.SortCommand
        viewstate("sort") = e.SortExpression.ToString
        getdata()
End Sub
    '切換到更新狀態 
 Private Sub DataGrid1_EditCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.EditCommand
        DataGrid1.EditItemIndex = e.Item.ItemIndex
        getdata()
        '重新整理資料
End Sub
    '取消編輯狀態
 Private Sub DataGrid1_CancelCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.CancelCommand
        DataGrid1.EditItemIndex = -1
        '切換到正常狀態
        getdata()
        '重新整理資料
End Sub
    'DataGrid1_UpdateCommand事件程序是.NET架構運行時託管的，當按下更新按鈕時，就執行更新資料過程
 Private Sub DataGrid1_UpdateCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.UpdateCommand
        Dim id As String = e.Item.Cells(0).Text.ToString
        '這裡是擷取當前更改的記錄ID值，
        'e.Item.Cells(0).Text返回的是DataGrid表格中第一列的值()
        Dim name As String = CType(e.Item.Cells(1).Controls(0), TextBox).Text
        '這裡是擷取當前更改的後的值， CType(e.Item.Cells(1).Controls(0),
        'TextBox).Text是先將e.Item.Cells(1).Controls(0)轉轉成TextBox控制項類型，
        '然後擷取它的Text值()
        Dim sql As String
        sql = "update  student set name='" + name + "'  where  id=" + id
        ' Response.Write(sql)
        '  Exit Sub
        Dim constr As String = "provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb"
        Dim mycon As OleDb.OleDbConnection = New OleDb.OleDbConnection(constr)
        mycon.Open()
        Dim mycmd As OleDb.OleDbCommand = New OleDb.OleDbCommand(sql, mycon)
        mycmd.ExecuteNonQuery()
        mycon.Close()
        Response.Write("<script>alert('恭喜您！您已經成功更新了了" & name & "的記錄！');</script>")
        DataGrid1.EditItemIndex = -1
        '改變編輯按鈕狀態
        getdata()
        '重新整理資料
End Sub
    ' 刪除記錄事件程序
 Private Sub DataGrid1_DeleteCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.DeleteCommand
        Dim mycon As OleDb.OleDbConnection = New OleDb.OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb")
        Dim mysql As String
        mysql = "delete from student where id=" & e.Item.Cells(0).Text
        mycon.Open()
        Dim mycmd As OleDb.OleDbCommand = New OleDb.OleDbCommand(mysql, mycon)
        mycmd.ExecuteNonQuery()
        Response.Write("<script>alert('恭喜您！您已經成功刪除了" & e.Item.Cells(1).Text & "的記錄！');</script>")
        mycon.Close()
        getdata()
End Sub
End Class
'---cdoe end----------

    在上面的幾個Sub過程中， DataGrid1_UpdateCommand過程是個痛點 ，其中，我們為了擷取編輯記錄的ID編號，使用e.Item.Cells(0).Text.ToString來擷取，e表示傳入的對象，Item表示資料行，Cell表示儲存格，Text表示值。為了擷取編輯後的新值，我們使用CType(e.Item.Cells(1).Controls(0), TextBox).Text語句，其中e.Item.Cells(1).Controls(0)表示儲存格的控制項，使用CType轉化為TextBox，然後我們就可以擷取其Text值，這就是更新的值。在擷取了記錄的ID編號和更新後的值，我們就可以編寫SQL的UPDATE語句進行更新資料。

    將DataGrid_Sample5.aspx儲存編譯後，運行效果如圖9.10所示。

圖9.10 DataGrid_Sample5.aspx運行結果