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

ここに問題があります 追加ボタンをクリックすると、1行が正常に追加されますが、閉じて再度開くと、以前に追加された行も追加されます。

問題は 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

プレースホルダーコントロールの代わりにリピーター/グリッドビューコントロールを使用できますか?それがあなたの状況に最適な方法だと思います

于 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 の後半で、スタイル - display:none を持つ ID div1 の最初の div を見つけて表示できます。そうすれば、フィールドを含む次の「行」が表示されます。

編集 1

ユーザー コントロールにすべてのフィールドを 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');
    }
于 2013-09-24T08:29:09.700 に答える