时间戳

首页 > 解决方案 > 如何在 ASP.NET Webforms 中动态设置 HtmlTableCell 的值？

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

问题描述

我有一个 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 的值始终为空。

我该如何解决这个问题？

标签： asp.netdynamicwebformsuser-controlsaspx-user-control

解决方案

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

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

让我们想想这个问题：

我需要 20 个整数变量。

做，我这样做：

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

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

int[20] x;

现在，我可以使用 for 循环，甚至是 foreach 或其他任何东西。

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

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

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

所以，我喜欢那个“数组”可能需要 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，而是利用内置工具。

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

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

所以我们为桌子写了一件东西。

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

推荐阅读