如何在 Gridview 中编辑数据表行

Question

感谢您查看我的帖子。我目前有一个由视图状态中的数据表填充的网格视图。我的问题是我无法编辑行。我将向您展示下面的代码，但是当我单击编辑时会发生什么，单元格 2 中的文本框变为空，但单元格 1 中的文本没有。这是我到目前为止从创建数据表开始的代码：

GridView 标记：

<asp:GridView ID="GridView2" runat="server" Visible="False" 
                    AutoGenerateColumns="false" ShowFooter="True" 
                    AutoGenerateDeleteButton="True" AutoGenerateEditButton="True">
                <Columns>

    <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
    <asp:TemplateField HeaderText="Action Item">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" Width="500px" TextMode="MultiLine" runat="server"></asp:TextBox>

        </ItemTemplate>

        <FooterTemplate>
         <asp:Button ID="ButtonAdd" OnClick="ButtonAdd_Click" runat="server" Text="Add New Row" />
        </FooterTemplate>
        </asp:TemplateField>

    </Columns>
                </asp:GridView>

'set initial dt :
Private Sub SetInitialRow()
        Dim dt As New DataTable()
        Dim dr As DataRow = Nothing
        dt.Columns.Add(New DataColumn("RowNumber", GetType(String)))
        dt.Columns.Add(New DataColumn("Action Item", GetType(String)))
        dr = dt.NewRow()
        dr("RowNumber") = 1
        dr("Action Item") = String.Empty
        dt.Rows.Add(dr)
        'dr = dt.NewRow();

        'Store the DataTable in ViewState
        ViewState("CurrentTable") = dt

        GridView2.DataSource = dt
        GridView2.DataBind()

'然后我在gridview页脚中添加一行按钮点击：

Private Sub AddNewRowToGrid()
        Dim rowIndex As Integer = 0

        If ViewState("CurrentTable") IsNot Nothing Then
            Dim dtCurrentTable As DataTable = DirectCast(ViewState("CurrentTable"), DataTable)
            Dim drCurrentRow As DataRow = Nothing
            If dtCurrentTable.Rows.Count > 0 Then
                For i As Integer = 1 To dtCurrentTable.Rows.Count
                    'extract the TextBox values
                    Dim box1 As TextBox = DirectCast(GridView2.Rows(rowIndex).Cells(1).FindControl("TextBox1"), TextBox)

                    drCurrentRow = dtCurrentTable.NewRow()
                    drCurrentRow("RowNumber") = i + 1
                    drCurrentRow("Action Item") = box1.Text

                    rowIndex += 1
                Next
                'add new row to DataTable
                dtCurrentTable.Rows.Add(drCurrentRow)
                'Store the current data to ViewState
                ViewState("CurrentTable") = dtCurrentTable

                'Rebind the Grid with the current data
                GridView2.DataSource = dtCurrentTable
                GridView2.DataBind()
            End If
        Else
            Response.Write("ViewState is null")
        End If

        'Set Previous Data on Postbacks
        SetPreviousData()
    End Sub

现在我遇到了麻烦。此代码更新行号（第一列），但对第二列没有任何作用。它实际上删除了内容。

Protected Sub GridView2_RowEditing(sender As Object, e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles GridView2.RowEditing
        'Set the edit index.
        Dim dt As DataTable = CType(ViewState("CurrentTable"), DataTable)
        GridView2.EditIndex = e.NewEditIndex
        GridView2.DataSource = ViewState("CurrentTable")
        GridView2.DataBind()
    End Sub

Protected Sub GridView2_RowUpdating(sender As Object, e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles GridView2.RowUpdating

'Retrieve the table from the session object.
Dim dt As DataTable = CType(ViewState("CurrentTable"), DataTable)

'Update the values.
Dim row = GridView2.Rows(e.RowIndex)
dt.Rows(row.DataItemIndex)("RowNumber") = (CType((row.Cells(1).Controls(0)), TextBox)).Text
 dt.Rows(row.DataItemIndex)("Action Item") = (CType((row.Cells(2).FindControl("TextBox1")), TextBox).Text)

'Reset the edit index.
GridView2.EditIndex = -1

'Bind data to the GridView control.
GridView2.DataSource = ViewState("CurrentTable")
GridView2.DataBind()
End Sub

你能帮我弄清楚我哪里出错了吗？谢谢！

乔什

Answer 1

这是您在TemplateField 中创建EditItemTemplate 所需的标记：

<asp:GridView ID="GridView2" runat="server" Visible="False" AutoGenerateColumns="false"
              ShowFooter="True" 
              AutoGenerateDeleteButton="True" AutoGenerateEditButton="True">
    <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:TemplateField HeaderText="Action Item">
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" Width="500px" TextMode="MultiLine" runat="server"></asp:TextBox>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox id="EditActionItemTextBox" runat="server" Width="500px" TextMode="MultiLine"></asp:TextBox>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:Button ID="ButtonAdd" OnClick="ButtonAdd_Click" runat="server" Text="Add New Row" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

现在在您更新数据表的代码隐藏中，执行以下操作：

'Update the values.
Dim row = GridView2.Rows(e.RowIndex)
dt.Rows(row.DataItemIndex)("RowNumber") = (CType((row.Cells(1).Controls(0)), TextBox)).Text
dt.Rows(row.DataItemIndex)("Action Item") = (CType((row.FindControl("EditActionItemTextBox")), TextBox).Text)

注意：在您的<ItemTemplate> 中，您可能需要考虑将控件设置为只读，以便您的用户知道他们无法更改值，通常当用户看到他们认为可以编辑内容的文本框时，但它在网格视图的编辑模式下拥有一个可编辑的文本框是完全有意义的。要将<ItemTemplate> 文本框更改为只读，只需添加ReadOnly="True"，如下所示：

<ItemTemplate>
    <asp:TextBox ID="TextBox1" Width="500px" TextMode="MultiLine" 
                 runat="server" ReadOnly="True"></asp:TextBox>
</ItemTemplate>

根据浏览器的不同，控件会有轻微的灰色调。用户将能够点击文本，但无法更改文本。