0

我想动态添加控件

代码：

.aspx

<body>
<form id="form1" runat="server">
<asp:Label ID="lbl1" Text="Personal Information" Font-Size="Large" ForeColor="White"   runat="server" Width="854px" BackColor="SteelBlue" style="margin-top: 0px" Height="60px"> </asp:Label>
<div id="div1" runat="server">
<asp:Panel ID="panelPersonal" runat="server">
<div id="divreg" runat="server">
<table id="tbl" runat="server">
<tr>
<td class="style8">&nbsp; Visa Number:</td>
<td class="style20">&nbsp;<asp:TextBox ID="txtUser" Width="160px" runat="server"/></td>
<td class="style22">&nbsp; Country Name:</td>
<td class="style23">&nbsp;<asp:DropDownList ID="dropCountry" Width="165px"  runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td class="style22">&nbsp; Type of Visa:</td>
<td class="style23">&nbsp;<asp:DropDownList ID="dropVisa" Width="165px" runat="server">  </asp:DropDownList></td>
<td class="style22">&nbsp; Type of Entry:</td>
<td class="style23">&nbsp;<asp:DropDownList ID="dropEntry" Width="165px" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td class="style8">&nbsp; Expiry Date</td>
<td class="style20">
&nbsp;<%--<BDP:BasicDatePicker ID="BasicDatePicker4" runat="server" onselectionchanged="BasicDatePicker2_SelectionChanged" AutoPostBack="True" />--%>
</td>
</tr>
</table>
</div>
</asp:Panel>
<asp:Button ID="addnewtext" runat="server" Text="Add" onclick="addnewtext_Click" width="76px" />

</div>
</form>

在这里我使用用户控制

.ascx

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddVisaControl.ascx.cs" EnableViewState="false" Inherits="Pyramid.AddVisaControl" %>
<div id="divreg" runat="server">
<table id="tbl" runat="server">
<tr>
<td> Visa Number:</td>
<td><asp:TextBox ID="txtUser" Width="160px" runat="server"/></td>
<td> Country Name:</td>
<td><asp:DropDownList ID="dropCountry" Width="165px" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td> Type of Visa:</td>
<td><asp:DropDownList ID="dropVisa" Width="165px" runat="server"></asp:DropDownList></td>
<td> Type of Entry:</td>
<td><asp:DropDownList ID="dropEntry" Width="165px" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td> Expiry Date</td>
<td>

</td>
</tr>
</table>
</div>

.aspx.cs

这是问题如果我单击添加按钮成功添加了一行，但是当我关闭并再次打开之前添加的行时也会出现。

我认为问题是 static int i = 0;

还有其他方法吗？

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

        }
    }

    static int i = 0;
    protected void addnewtext_Click(object sender, EventArgs e)
    {
        i++;
        for (int j = 0; j <= i; j++)
        {
            AddVisaControl ac = (AddVisaControl)Page.LoadControl("AddVisaControl.ascx");
            PlaceHolder1.Controls.Add(ac);
            PlaceHolder1.Controls.Add(new LiteralControl("<BR>"));
        }
    }

这就是我得到的

在此处输入图像描述

这就是我想要的，就像我想要做的下图

在此处输入图像描述

有任何想法吗？提前致谢

4

2 回答 2

0

您可以使用中继器/gridview 控件代替占位符控件吗，我认为这是您的最佳方法

于 2013-09-24T08:28:47.957 回答
0

我推荐这个解决方案。它与您使用的代码不同，但仍然非常简单。您可以使用中继器控件

<asp:Repeater ID="rpt1" runat="server">
<ItemTemplate>
 user control code goes here but first put it in a div(example id - div1) with `style="display:none"`
</ItemTemplate>
</asp:Repeater>

在服务器端你这样做

rpt1.DataSource = Utils.GetRptTable(4); // will add the code 4 times but it will not be   visible
rpt1.DataBind();

稍后在页面上的 javascript 中，您可以找到第一个 id 为 div1 且具有样式的 div - display:none 并显示它。这样，您将显示下一个带有字段的“行”。

编辑 1

如果您可以在单个用户控件中添加所有字段，则<tr>不需要样式= display:none 的 div。您只需将这个 class="GridBody" 添加到您的<tbody>- 例如：<tbody class="GridBody">

然后对行执行此操作：

<tr class="GridRow" id="row1" style="display: none">
...
</tr>

显示该行的javascript是：

 function addRow() {
        var body = $(".GridBody");
        var indexOfNextRow = $('tr[class="GridRow"][hidden="false"]').length;
        var tr = $(".GridBody tr")[indexOfNextRow];
        tr.style.display = 'table-row';
        tr.setAttribute('hidden', 'false');
    }
于 2013-09-24T08:29:09.700 回答