如何在asp:GridView中启用就地编辑?

时间:2012-06-18 18:32:53

标签: asp.net gridview inplace-editing

如何使用asp:Repeater

添加编辑框,并在提交期间阅读其值

我有一个asp:GridView,它显示一组只读(即不可编辑的)数据,例如:

enter image description here

如何启用GridView的单元格可编辑,例如(Photoshop Mockup):

enter image description here

  

注意:我没有在Photoshop中模拟每个行和列的编辑框(因为它花了太长时间)。你仍然明白这一点。

  • 我如何说服asp:GridView在每个单元格中显示一个编辑框?
  • 如果我说服asp:GridView显示一个编辑框,我如何“阅读”保存按钮OnClick

Bonus Chatter

我不反对使用asp:Repeater,手动放置<INPUT>控件。我的困惑是如何在保存按钮的OnClick期间阅读每个输入。虽然我非常乐意使用转发器,但GridView可能无法实现我想要的转发器唯一的可能性,这个问题是关于GridView。

  • 如果GridView 可以这样做:很棒;如何?
  • 如果GridView 不能这样做:这也是一个答案。

2 个答案:

答案 0 :(得分:8)

您是否尝试过设置EditIndex的<{1}}属性?

示例:

DataGrid

背后的代码

<asp:GridView runat="server" onrowediting="grdProducts_RowEditing" 
    ID="grdProducts">
    <Columns>
        <asp:CommandField ShowEditButton="True" />
    </Columns>
</asp:GridView>

请注意,您必须重新绑定网格

通常每行保存数据,这意味着每行都有一个编辑链接,进入编辑模式后,会出现一个保存按钮和一个取消按钮,可以保存该特定行的值

使用 protected void grdProducts_RowEditing(object sender, GridViewEditEventArgs e) { this.grdProducts.EditIndex = e.NewEditIndex; This.BindGrid(); }

时,遵循此方法是微不足道的
GridView

在网格标记中添加以下内容:

    protected void grdProducts_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        // old values for the current row
        var oldValues = e.OldValues;

        // new (updated) values for the current row
        var newvalues = e.NewValues;

        // Exit edit mode
        this.grdProducts.EditIndex = -1;

        // Update the grid
        this.BindGrid();
    }

如果您需要在编辑时或以只读模式显示单元格数据时指定自定义控件,请使用网格模板:

    onrowupdating="grdProducts_RowUpdating"

答案 1 :(得分:3)

您可以使用GridView执行此操作,但如果您有许多列,则会产生大量代码。

首先在GridView TemplateFields中创建所有列。在我的示例中,我将只使用一列。像这样:

<asp:GridView ID="test" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Foo" SortExpression="foo">
            <ItemTemplate>
                <asp:TextBox ID="FooText" runat="server" Text='<%# Eval("Foo") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- other cols here -->
    </Columns>
</asp:GridView>
<asp:Button ID="Save" runat="server" Text="Save" OnClick="Save_Click" />

然后在您的代码后面的Save按钮中,您可以迭代GridView中的行:

foreach (GridViewRow gvRow in test.Rows)
{
    string val = ((TextBox)gvRow.FindControl("FooText")).Text;
    <!-- other cols here -->
    //do something with all the values you have parsed from the row
}