ASP.NET 将项目添加到转发器会弄乱我的带有标签的页面布局

Question

我正在尝试制作一个顶部有多个 动态选项卡 的 Web 表单。在第二个选项卡下，有一个 "add new" 按钮，可以使用 repeater

将项目添加到列表中

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxControlToolkit" %>  

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#Menu1">Menu1</a></li>
      <li><a data-toggle="tab" href="#Menu2">Menu2</a></li>
      <li><a data-toggle="tab" href="#Menu3">Menu3</a></li>

    </ul>

    <div class="tab-content">
      <div id="Menu1" class="tab-pane fade in active">
        <h3>Menu1</h3>
        <p>Content of Menu1 </p>

      </div>  

      <div id="Menu2" class="tab-pane fade">
        <h3>Menu2</h3>
        <p>
                 <asp:Button Text="Add New" ID="btnAdd1" OnClick="btnAdd_Click1" runat="server" />
                <asp:Repeater runat="server" ID="Repeater1">
                    <HeaderTemplate>
                        <div class="container">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Parameter One</th>
                                        <th>Parameter Two</th>
                                        <th>Parameter Three</th>

                                    </tr>
                                </thead>
                                <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>

                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterOne" Text='<%# Eval("ParameterOne") %>' />
                            </td>
                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterTwo" Text='<%# Eval("ParameterTwo") %>' />
                            </td>
                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterThree" Text='<%# Eval("ParameterThree") %>' />
                            </td>

                        </tr>

                    </ItemTemplate>
                </asp:Repeater>
        </p>
      </div>

      <div id="Menu3" class="tab-pane fade">
        <h3>Menu3</h3>
        <p>This content is supposed to be under "Menu3" Tab.</p>
      </div>
    </div>

</div>


</asp:Content>

"add new" 按钮背后的代码

public void btnAdd_Click1(object sender, EventArgs e)
{


    List<FirData> dataList = new List<FirData>();
    //-- add all existing values to a list

    foreach (RepeaterItem item in Repeater1.Items)
    {
        dataList.Add(
                        new FirData()
                        {

                            ParameterOne = (item.FindControl("txtParameterOne") as System.Web.UI.WebControls.TextBox).Text,
                            ParameterTwo = (item.FindControl("txtParameterTwo") as System.Web.UI.WebControls.TextBox).Text,
                            ParameterThree = (item.FindControl("txtParameterThree") as System.Web.UI.WebControls.TextBox).Text,

                        });
    }

    //-- add a blank row to list to show a new row added
    dataList.Add(new FirData());
    Repeater1.DataSource = dataList;
    Repeater1.DataBind();


}

在没有向转发器添加任何项目的情况下一切正常。但是一旦添加了项目，动态选项卡下的内容就会开始相互重叠。请查看下面附上的第一张图片。

这是将项目添加到 "Menu2" 选项卡下的页面后会发生的情况。红色圆圈中的部分应该显示在 "Menu3" 选项卡下。 Link to the screenshot

如果我重新加载页面并且没有单击 "Menu2" 选项卡下的添加新按钮。（这意味着 "Menu2" 选项卡下没有项目。）一切都会按预期进行。上图阅读圈的内容现在在"Menu3"标签下。（应该是这样）Link to the Screenshot

谢谢！

Answer 1

您需要在 <ItemTemplate> 下方添加 <FooterTemplate> 并包含 tbody、table 和容器 div 结束标记，如下所示：

</ItemTemplate>
<FooterTemplate>
  </tbody>
  </table>
</div> <!--container div closing -->
</FooterTemplate>

ASP.NET 将项目添加到转发器会弄乱我的带有标签的页面布局

ASP.NET Adding item to repeater is messing up the layout of my page with tabs

c#

asp.net

tabs

repeater