65.9K
CodeProject 正在变化。 阅读更多。
Home

从 ASP.NET GridView 动态添加和删除行

AshishChaudha
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (81投票s)

2016 年 7 月 9 日

CPOL

3分钟阅读

viewsIcon

750918

downloadIcon

26417

GridView，方便在运行时动态添加和删除行

介绍 

本文讲述了一个小项目，该项目展示了如何使用 GridView 在运行时动态地添加和删除行。

背景

很多时候，我们需要用户输入一些数据，但我们不确定数据的数量。例如，我们需要一个应用程序从教职员工那里获取学生详细信息（可能在入学时）。我们可以通过两种方式设计此页面：要么一次获取一个学生的数据，要么允许用户一次输入多个用户的数据。此外，我们可以让用户选择他想输入的记录数量。

现在为了完成这个任务，我们设计这个页面，以便用户可以动态添加新行，然后输入数据。这篇文章的其余部分将重点介绍我们如何做到这一点。

Using the Code

让我们首先设计布局以从用户那里获取单个记录。

这种设计是通过以以下方式在 Gridview 中使用模板字段来实现的

<asp:GridView ID="grvStudentDetails" runat="server" 
                ShowFooter="True" AutoGenerateColumns="False"
                CellPadding="4" ForeColor="#333333" 
                GridLines="None" OnRowDeleting="grvStudentDetails_RowDeleting">
    <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="SNo" />
        <asp:TemplateField HeaderText="Student Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Student Age">
            <ItemTemplate>
                <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Student Address">
            <ItemTemplate>
                <asp:TextBox ID="txtAddress" runat="server" 
                   Height="55px" TextMode="MultiLine"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Gender">
            <ItemTemplate>
                <asp:RadioButtonList ID="RBLGender" 
                           runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Value="M">Male</asp:ListItem>
                    <asp:ListItem Value="F">Female</asp:ListItem>
                </asp:RadioButtonList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Qualification">
            <ItemTemplate>
                <asp:DropDownList ID="drpQualification" runat="server">
                    <asp:ListItem Value="G">Graduate</asp:ListItem>
                    <asp:ListItem Value="P">Post Graduate</asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
                <asp:Button ID="ButtonAdd" runat="server" 
                        Text="Add New Row" OnClick="ButtonAdd_Click" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowDeleteButton="True" />
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

这里的基本思想是，如果我们从代码隐藏动态更改此 GridView 的 DataSource，则 GridView 将相应地更改。因此，我们将公开一行作为默认行，然后在用户请求添加新行时继续在 GridView 中添加行。为此，我们只需继续向 GridView 数据源添加空数据项，从而导致 GridView 动态更改。

让我们看看代码以获得默认的单行

private void FirstGridViewRow()
{
    DataTable dt = new DataTable();
    DataRow dr = null;
    dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
    dt.Columns.Add(new DataColumn("Col1", typeof(string)));
    dt.Columns.Add(new DataColumn("Col2", typeof(string)));
    dt.Columns.Add(new DataColumn("Col3", typeof(string)));
    dt.Columns.Add(new DataColumn("Col4", typeof(string)));
    dt.Columns.Add(new DataColumn("Col5", typeof(string)));
    dr = dt.NewRow();
    dr["RowNumber"] = 1;
    dr["Col1"] = string.Empty;
    dr["Col2"] = string.Empty;
    dr["Col3"] = string.Empty;
    dr["Col4"] = string.Empty;
    dr["Col5"] = string.Empty;
    dt.Rows.Add(dr);

    ViewState["CurrentTable"] = dt;

    grvStudentDetails.DataSource = dt;
    grvStudentDetails.DataBind();
}

在上述代码中，需要注意的重要一点是 viewstate 的使用。保留 ViewState 以方便动态添加和删除行的功能。由于我们需要保留除正在添加或删除的行之外的行的数据，我们需要一些地方来保存此数据。我们为此选择了 ViewState。

现在，每当用户选择添加新行时，我们需要做两件事：首先，我们需要在网格中添加新行，其次，我们需要设置已添加行中输入的数据。

因此，要向 GridView 添加新行

private void AddNewRow()
{
    int rowIndex = 0;

    if (ViewState["CurrentTable"] != null)
    {
        DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
        DataRow drCurrentRow = null;
        if (dtCurrentTable.Rows.Count > 0)
        {
            for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
            {
                TextBox TextBoxName = 
                  (TextBox)grvStudentDetails.Rows[rowIndex].Cells[1].FindControl("txtName");
                TextBox TextBoxAge = 
                  (TextBox)grvStudentDetails.Rows[rowIndex].Cells[2].FindControl("txtAge");
                TextBox TextBoxAddress = 
                  (TextBox)grvStudentDetails.Rows[rowIndex].Cells[3].FindControl("txtAddress");
                RadioButtonList RBLGender = 
                  (RadioButtonList)grvStudentDetails.Rows[rowIndex].Cells[4].FindControl
                  ("RBLGender");
                DropDownList DrpQualification = 
                  (DropDownList)grvStudentDetails.Rows[rowIndex].Cells[5].FindControl
                  ("drpQualification");
                drCurrentRow = dtCurrentTable.NewRow();
                drCurrentRow["RowNumber"] = i + 1;

                dtCurrentTable.Rows[i - 1]["Col1"] = TextBoxName.Text;
                dtCurrentTable.Rows[i - 1]["Col2"] = TextBoxAge.Text;
                dtCurrentTable.Rows[i - 1]["Col3"] = TextBoxAddress.Text;
                dtCurrentTable.Rows[i - 1]["Col4"] = RBLGender.SelectedValue;
                dtCurrentTable.Rows[i - 1]["Col5"] = DrpQualification.SelectedValue;
                rowIndex++;
            }
            dtCurrentTable.Rows.Add(drCurrentRow);
            ViewState["CurrentTable"] = dtCurrentTable;

            grvStudentDetails.DataSource = dtCurrentTable;
            grvStudentDetails.DataBind();
        }
    }
    else
    {
        Response.Write("ViewState is null");
    }
    SetPreviousData();
}

并且要设置先前输入的数据

private void SetPreviousData()
{
    int rowIndex = 0;
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                TextBox TextBoxName = 
                (TextBox)grvStudentDetails.Rows[rowIndex].Cells[1].FindControl("txtName");
                TextBox TextBoxAge = 
                (TextBox)grvStudentDetails.Rows[rowIndex].Cells[2].FindControl("txtAge");
                TextBox TextBoxAddress = 
                  (TextBox)grvStudentDetails.Rows[rowIndex].Cells[3].FindControl("txtAddress");
                RadioButtonList RBLGender = 
                  (RadioButtonList)grvStudentDetails.Rows[rowIndex].Cells[4].FindControl
                  ("RBLGender");
                DropDownList DrpQualification = 
                  (DropDownList)grvStudentDetails.Rows[rowIndex].Cells[5].FindControl
                  ("drpQualification");

                TextBoxName.Text = dt.Rows[i]["Col1"].ToString();
                TextBoxAge.Text = dt.Rows[i]["Col2"].ToString();
                TextBoxAddress.Text = dt.Rows[i]["Col3"].ToString();
                RBLGender.SelectedValue = dt.Rows[i]["Col4"].ToString();
                DrpQualification.SelectedValue = dt.Rows[i]["Col5"].ToString();
                rowIndex++;
            }
        }
    }
}

当用户选择删除行时，需要做类似的事情。我们需要删除用户选择的行，然后我们需要设置先前行的数据。

删除选定的行

protected void grvStudentDetails_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    SetRowData();
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        DataRow drCurrentRow = null;
        int rowIndex = Convert.ToInt32(e.RowIndex);
        if (dt.Rows.Count > 1)
        {   
            dt.Rows.Remove(dt.Rows[rowIndex]);
            drCurrentRow = dt.NewRow();
            ViewState["CurrentTable"] = dt;
            grvStudentDetails.DataSource = dt;
            grvStudentDetails.DataBind();

            for (int i = 0; i < grvStudentDetails.Rows.Count - 1; i++)
            {
                grvStudentDetails.Rows[i].Cells[0].Text = Convert.ToString(i + 1);
            }
            SetPreviousData();
        }
    }
}

然后重置其他行中的数据

private void SetRowData()
{
    int rowIndex = 0;

    if (ViewState["CurrentTable"] != null)
    {
        DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
        DataRow drCurrentRow = null;
        if (dtCurrentTable.Rows.Count > 0)
        {
            for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
            {
                TextBox TextBoxName = 
                (TextBox)grvStudentDetails.Rows[rowIndex].Cells[1].FindControl("txtName");
                TextBox TextBoxAge = 
                (TextBox)grvStudentDetails.Rows[rowIndex].Cells[2].FindControl("txtAge");
                TextBox TextBoxAddress = 
                (TextBox)grvStudentDetails.Rows[rowIndex].Cells[3].FindControl("txtAddress");
                RadioButtonList RBLGender = 
                  (RadioButtonList)grvStudentDetails.Rows[rowIndex].Cells[4].FindControl
                  ("RBLGender");
                DropDownList DrpQualification = 
                  (DropDownList)grvStudentDetails.Rows[rowIndex].Cells[5].FindControl
                  ("drpQualification");
                drCurrentRow = dtCurrentTable.NewRow();
                drCurrentRow["RowNumber"] = i + 1;
                dtCurrentTable.Rows[i - 1]["Col1"] = TextBoxName.Text;
                dtCurrentTable.Rows[i - 1]["Col2"] = TextBoxAge.Text;
                dtCurrentTable.Rows[i - 1]["Col3"] = TextBoxAddress.Text;
                dtCurrentTable.Rows[i - 1]["Col4"] = RBLGender.SelectedValue;
                dtCurrentTable.Rows[i - 1]["Col5"] = DrpQualification.SelectedValue;
                rowIndex++;
            }
            
            ViewState["CurrentTable"] = dtCurrentTable;
            //grvStudentDetails.DataSource = dtCurrentTable;
            //grvStudentDetails.DataBind();
        }
    }
    else
    {
        Response.Write("ViewState is null");
    }
    //SetPreviousData();
}

现在，当我们运行应用程序时，我们可以看到我们可以安全地动态地向此 GridView 添加和删除行。

注意：示例应用程序处于完全工作状态。强烈建议运行应用程序并进行调试（逐步执行它以充分理解逻辑并获得内部发生情况的要点）。

我从这篇文章中汲取了想法和一些代码。

看点

这项小练习始于对 ViewState 和 GridView 的好奇心，但最终变成了一个有用的组件/逻辑，可以在一些实际场景中使用。我希望你会觉得这很有用（尽管大多数有经验的程序员可能已经知道了这些东西，但它仍然可以被新程序员使用）。

历史

  • 2012 年 9 月 29 日 
    • 第一版
  • 2012 年 10 月 3 日
    • 已实现以下内容
    • 添加了必填字段的验证
    • Enter 键现在将“添加新行”，新添加的行已设置为接受数据
    • 已实现将数据保存到数据库的功能
  • 2012 年 10 月 16 日
    • 已实现以下内容
      • 解决了删除行后序号出现的问题
© . All rights reserved.