ASP.NET Добавление элемента в повторитель портит макет моей страницы с вкладками - PullRequest
Новая
       20

ASP.NET Добавление элемента в повторитель портит макет моей страницы с вкладками

0 голосов
/ 20 ноября 2018

Я пытаюсь создать веб-форму с несколькими динамическими вкладками вверху.На второй вкладке есть кнопка «Добавить новый», которая может добавлять элементы в список с помощью повторителя 

   <%@ 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».Часть в красном круге должна отображаться на вкладке «Меню3». Ссылка на скриншот

Если я перезагружу страницу и не нажимаю кнопку добавления новой вкладки под вкладкой «Меню2».(Это означает, что на вкладке «Menu2» нет элемента.) Все будет работать так, как ожидается.Содержимое круга чтения на предыдущем изображении теперь находится на вкладке «Меню3».(что и должно быть) Ссылка на скриншот

Спасибо!

1 Ответ

0 голосов
/ 20 ноября 2018

Ниже <ItemTemplate> необходимо добавить <FooterTemplate> и включить закрывающие теги tbody, table и контейнера div, например: 

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