ASP.NET - 在表中动态添加/删除 TableRow答案

【问题标题】：ASP.NET - Add/Remove TableRow dynamically in TableASP.NET - 在表中动态添加/删除 TableRow
【发布时间】：2016-08-14 20:28:09
【问题描述】：

我有一个 System.Web.UI.WebControls.Table，其中一行包含五个单元格和五个服务器控件。我想在单击“添加新行”时创建一个新行和如何在第一行单元格上设置名称？

如何做到这一点？请给我类似的教程。

这是我的用户界面：

这是我的代码：

public class HelloWorldWeb : WebPart
{
    protected override void CreateChildControls()
    {
        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;
        Button btnAdd = new Button();
        btnAdd.Text = "Create New Row";
        btnAdd.Click += new EventHandler(btnAdd_Click);


        //Declaration one Row and Five Cells(with controls)
        Table myTbl = new Table();
        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        myTbl.Rows.Add(tRow);

        this.Controls.Add(new LiteralControl("<table class='ms-formbody' vAlign='top' >"));

        this.Controls.Add(new LiteralControl("<tr>"));
        this.Controls.Add(new LiteralControl("<td width='100' class='ms-formlabel' noWrap='nowrap' vAlign='top'>"));
        this.Controls.Add(myTbl);
        this.Controls.Add(btnAdd);
        this.Controls.Add(new LiteralControl("</td>"));
        this.Controls.Add(new LiteralControl("</tr>"));

        this.Controls.Add(new LiteralControl("</table>"));

        base.CreateChildControls();
    }

    void btnAdd_Click(object sender, EventArgs e)
    {
        throw new NotImplementedException();
    }

结果必须是：

【问题讨论】：

制作一个静态计数器（这是 ViewState 可以使用的地方），并让您的控件创建代码循环按照该计数器指示的频率进行。 “添加”按钮会增加计数器。
据我所知，您的按钮单击没有任何作用。您在 CreateChildControls 中添加了一个“EventHandler”，但这是不必要的。页面上只有一个按钮。使用“btnAdd_Click”事件并调用“CreateChildControls”函数。
我猜你可以将行存储在List<> 中，在每次点击时向列表中添加一个新项目，然后只渲染该列表中的行。
请在我的代码中告诉我你的解决方案......带有答案......

标签： c# asp.net .net webforms

【解决方案1】：

我不确定您正在从事什么类型的项目，但使用一个简单的 Web 表单我可以做到这一点：

Test.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Stackoverflow.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <table class="ms-formbody" valign="top">
                <tbody>
                    <asp:Literal ID="litTest" runat="server"></asp:Literal>
                </tbody>
            </table>

            <asp:Button ID="btnAdd" runat="server" Text="Create New Row" OnClick="btnAdd_Click" />
        </div>
    </form>
</body>
</html>

Test.aspx.cs：

using System;
using System.Web.UI;

namespace Stackoverflow
{
    public partial class Test : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                AddRow();
        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            AddRow();
        }

        private void AddRow()
        {
            litTest.Text += "<tr><td><input type=\"text\" style=\"height: 19px;\"></td><td><input type=\"text\" style=\"height: 19px;\"></td><td><input type=\"text\" style=\"height: 19px;\"></td></tr>";
        }
    }
}

【讨论】：

我的解决方案是 ClassLibrary.. 代码必须只在“.cs”上。

【解决方案2】：

我喜欢 ryantpayton 的方法，但这里是你的代码修改：

public class HelloWorldWeb : WebPart
{
    public HelloWorldWeb()
    {
        CreateTable();
    }
    private void CreateTable()
    {
        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;
        Button btnAdd = new Button();
        btnAdd.Text = "Create New Row";
        btnAdd.Click += new EventHandler(btnAdd_Click);


        //Declaration one Row and Five Cells(with controls)
        Table myTbl = new Table();
        myTbl.ID = "tblUsers";
        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        myTbl.Rows.Add(tRow);

        this.Controls.Add(myTbl);
        this.Controls.Add(btnAdd);

    }

    private void AddNewRow()
    {
        Table tbl = (Table)this.FindControl("tblUsers");

        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;

        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        tbl.Rows.Add(tRow);
    }

    void btnAdd_Click(object sender, EventArgs e)
    {
        AddNewRow();
    }
}

【讨论】：

您遗漏了添加按钮，所以我重新添加了。也可以通过在 btnAdd.Click 上调用 CreateChildControls() 来进一步简化吗？
我会将表中的数据保存到另一个，用这个解决方案可以吗？以及如何删除行？
这不起作用 CreateChildControls();在 btnAdd_Click 事件方法中.. :{
老实说——我对这样的类库做的不多。我会将行的创建转移到一个单独的函数，然后调用该函数，无论您需要多少次，并且在单击按钮时。您的代码本质上是在单击按钮时重新创建表，因此不会添加新行 - 它只是重新创建初始表。我会更新我的答案。
我添加了一些代码，包括添加行的新函数。我不知道它是否会起作用，但希望它能指导您找到解决方案。