ASP.NET在转发器中添加项目会使带有选项卡的页面布局混乱

Question

我正在尝试制作一个在顶部具有几个动态选项卡的Web表单。 在第二个标签下，有一个“添加新”按钮，可以使用转发器将项目添加到列表中

   <%@ 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>

“添加新”按钮后面的代码

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();


}

一切正常，无需在转发器中添加任何项目。 但是，一旦添加了项目，动态标签下的内容就会开始相互重叠。 请查看下面所附的第一张图片。

将项目添加到“菜单2”选项卡下的页面后，将发生这种情况。 红色圆圈中的部分应该显示在“ Menu3”选项卡下。 链接到屏幕截图

如果我重新加载页面并且不单击“ Menu2”选项卡下的添加新按钮。 （这意味着“菜单2”选项卡下没有任何项目。）一切都会按预期进行。 上一张图片的读取圆圈中的内容现在位于“ Menu3”选项卡下。 （应该是这样） 链接到屏幕截图

谢谢！

Answer 1

在<ItemTemplate>您需要添加<FooterTemplate>并包括tbody ， table和container div关闭标签，如下所示：

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