Question

我想动态添加控件

代码：

的.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

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

我认为问题是静态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>"));
        }
    }

这就是我得到的

enter image description here

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

enter image description here

有什么想法吗？提前致谢

Answer 1

你可以在占位符控制的地方使用转发器/ gridview控件，我认为这是你的情境的最佳方法

Answer 2

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

<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>中添加用户控件中的所有字段，则不需要使用style = 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');
    }

如何在.net中动态添加控件？

2 个答案: