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

來源:互聯網
上載者:User
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運行結果



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。