如何在 ASP.NET Webforms 中动态设置 HtmlTableCell 的值？

Posted 2023-03-25

【中文标题】如何在 ASP.NET Webforms 中动态设置 HtmlTableCell 的值？

【英文标题】：How to set value of HtmlTableCell dynamically in ASP.NET Webforms?

【发布时间】：2021-12-18 21:25:03

【问题描述】：

我有一个 aspx 文件，它的一小部分代码是

<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
   <tr><th>Header1</th></tr>
   <tr><td id="name1"></td></tr>
</table>

<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
   <tr><th>Header2</th></tr>
   <tr><td id="name2"></td></tr>
</table>

<%-- Similary there are manly table lets say upto 20 --%>

<table class="table table-responsive-sm table-bordered table-hover" runat="server" style="align-content:center;">
   <tr><th>Header20</th></tr>
   <tr><td id="name20"></td></tr>
</table>

它后面的代码就像设置值是每个 td ：

public void Page_Load()

   name1.InnerText = "1"
   name2.InnerTex = "2"
   //similary all td is assigned like this
   name20.InnerText = "20"

这很好用，但将来可能会有很多表，比如说 100。那么我是否需要像上面的代码一样设置所有值。还有其他方法吗？

我尝试使用以下代码：

for(int i=1; i<21; i++)

   tableId = (htmlTableCell)this.Page.Master.FindControl("name" + i.ToString());
   tableId = (HtmlTableCell)this.Page.FindControl("name" + i.ToString());
   tableId = (HtmlTableCell)this.FindControl("name" + i.ToString());

   tableId.InnerText = i.toString();

但 tableId 的值始终为空。

我该如何解决这个问题？

【问题讨论】：

你可以使用中继器

@Aristos 任何代码示例。我尝试使用上面的 for 循环，但 tableId 值始终为空。

如果我明天有时间我会做一个样品

【参考方案1】：

好的，这是我们想要考虑不同方法的情况之一。

现在，我认为这里有 10 甚至 20 张桌子是没有意义的。

让我们思考这个问题：

我需要 20 个整数变量。

做，我做这个：

int x1;
int x2;
int x3;
... and so on for 20 variables?

不，我们不这样做。我们会这样做：

int[20] x;

现在，我可以使用 for 循环，甚至是 foreach 之类的。

同样的问题也适用于您的探针。

你有一个需要“很多”的群体或事物。

正如 cmets 中的其他人所建议的，中继器（或列表视图、数据列表、网格视图）是控件或“系统”，可让您轻松“重复”某些内容。

所以，我喜欢这个“数组”可能需要 2 或 50 个这些“东西”。

尝试编写一个 html 编写器或一些循环来创建这个重复的东西是没有意义的。我们可以在代码中做到这一点。

所以，让我们使用中继器。

这样说：

     <asp:Repeater ID="Repeater1" runat="server" 
            OnItemDataBound="Repeater1_ItemDataBound">
            <ItemTemplate>

               <asp:Label id="MyHeader" runat="server" 
                 Text='<%# Eval("TableGroup") %>'
                 Font-Size="X-Large" >
            </asp:Label>

            </ItemTemplate>
        </asp:Repeater>

非常简单。现在，我们想要 2 个表组，还是 60 个？

我们加载上述内容的代码如下所示：

我们将简单地创建一个我们想要重复的“什么”列表。

所以，让我们创建具有类似表结构的东西。事实上，让我们创建一个 .net 表！！！

假设我们在上面放了一个按钮，然后这段代码：

    protected void Button1_Click(object sender, EventArgs e)
    

        DataTable TblList = new DataTable();
        TblList.Columns.Add("TableGroup");

        for (int i = 1;i<=3;i++)
        
            DataRow OneRow = TblList.NewRow();
            OneRow["TableGroup"] = "Table " + i;
            TblList.Rows.Add(OneRow);
        

        Repeater1.DataSource = TblList;
        Repeater1.DataBind();
    

请注意，我们多么干净、多么简单，以及我们如何不必“尝试”并编写代码来吐出标记。虽然 for/loop 是 3，但我们可以将其设为 30。

现在我们的输出是这样的：

所以，请注意我们“制作”的内容是如何重复 3 次的。但它也可以重复 20 或 100 次。

现在，在每个中继器内部，我们需要一个表。再一次，我们“可以”使用一张桌子。但是如果您考虑一下，表格需要一个标题，然后是行，我们必须为每一行定义一个列。

再一次，这是相当多的工作。所以，让我们使用一个可以一次性显示 + 渲染整个表格的控件！

我建议使用网格视图。所以，现在在上面的中继器中，让我们进入那个网格视图。

我们甚至使用您指定的引导类 - （因为它们看起来非常好 - 你做得很好！！！！）。

好的，现在我们的中继器变成了这样：

        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
            <ItemTemplate>

               <asp:Label id="MyHeader" runat="server" 
                 Text='<%# Eval("TableGroup") %>'
                 Font-Size="X-Large" >
            </asp:Label>

             <asp:GridView ID="GTable" runat="server"
                 class="table table-responsive-sm table-bordered table-hover" Width="20%">
             </asp:GridView>

            </ItemTemplate>
        </asp:Repeater>
        <br />

请注意我们到目前为止的标记很少。 Gridview 确实只是一张不错的表格 - 但工作量和麻烦都更少。

所以，现在我们需要添加代码来填充每个组的表格。

事实证明，为我们创建每个组都会触发 HANDY 事件！！！！

所以，让我们准备一张表格 - 说出用户名和年龄。

所以，我们使用 ItemDataBound 事件。每个组都会触发此事件！！！

所以，3 组或 60 组 - 没关系。

所以，我们可以编写一个表格，然后将其直接填充到我们的 gridview 中。

这段代码：

    protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    

        // each new group/thing, lets fill the grid/table
        GridView gV = (GridView)e.Item.FindControl("GTable");

        DataTable TestTable = new DataTable();

        TestTable.Columns.Add("Name");
        TestTable.Columns.Add("Age");

        int TableGroup = e.Item.ItemIndex + 1;
        // add 3 rows
        for (int i = 1; i <= 3; i++)
        
            DataRow OneRow = TestTable.NewRow();
            OneRow["Name"] = "Group " + TableGroup + " Name " + i;
            OneRow["Age"] = i * 15;
            TestTable.Rows.Add(OneRow);
        

        gV.DataSource = TestTable;
        gV.DataBind();

    

再次注意：

我们只为一件事编写代码。可能会一遍又一遍地重复，但我们不在乎。另请注意，以这种方式思考是多么“容易”。

现在，我确实包含了中继器“索引”，以便至少为每个表添加一些不同的行。

再次注意创建该表的好处。它为我们提供了标题、行、列

都在一个漂亮的简单结构中。

我们的输出现在是这样的：

这不酷吗？

所以，现在有了上面的自动渲染。

你想做什么？抓住一个特定的中继器项目？也许为每个网格行添加一个按钮？我们可以这样做，这样做一次，它会为我们重复。

但是，你可以这样说第二行：

   protected void Button2_Click(object sender, EventArgs e)
    
        // get 2nd repeater (0 based, so get #1)

        int RepeatNum = 1;

        RepeaterItem MyRepItem = Repeater1.Items[RepeatNum];

        // ok, got the item, get <h2> header item
        // 
        Label MyHead = (Label)MyRepItem.FindControl("MyHeader");
        Debug.Print(MyHead.Text);

        // now get our grid
        GridView GV = (GridView)MyRepItem.FindControl("GTable");

        foreach (GridViewRow gRow in GV.Rows)
        
            Debug.Print("Name = " + gRow.Cells[0].Text);
            Debug.Print("Age  = " + gRow.Cells[1].Text);
        

输出窗口：

Table 2
Name = Group 2 Name 1
Age  = 15
Name = Group 2 Name 2
Age  = 30
Name = Group 2 Name 3
Age  = 45

所以要分组思考。我的标记很少。更好的是后面的代码不会尝试吐出 ZILLION "tr" "th" "table" 等。我不编写所有 HTML - 但利用内置工具。

很好的是，我现在可以改变主意，将其渲染为在整个页面上显示“两件事”——有点像“卡片视图”。

所以，我们为小组写了一件事情。

所以我们为表格写了一件事情。

然后我们一遍又一遍地重复。