使用按钮单击动态添加控件[关闭]

Question

我正在尝试创建：

1. 一个加载了两个文本框（“item”和“amount”）和一个“add”按钮的表单。

2. 每次单击“添加”按钮时，都会添加另一组与第一组相同的文本框。

3. 单击“添加”按钮时，文本框需要保留输入的内容。

最好的方法是什么？我一直在尝试很多不同的东西，但没有一个是完全正确的。

Answer 1

我不得不在获胜表格和网页上多次这样做。不幸的是，在网页上它不像在 win 表单上那么容易。我确定那里有 JQuery 实现，但我过去的做法是使用中继器。

item 命令事件的处理有点棘手，但我会尽量减少它。关于这个特定项目的一点背景是，我想出了一个界面，人们可以在其中编辑网页上的链接。原版在中继器中包含更多控件，但我对其进行了精简，因此不会占用太多空间。

首先，声明中继器很简单：

<asp:Repeater ID="rptLinks" runat="server">
    <HeaderTemplate>
        <table style="width:99%; text-align:center; margin-left:auto; margin-right:auto"><tr>
                <td style="width:15%;"><asp:Label ID="lblDisplayName" runat="server" Text="Display Name:"></asp:Label></td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%" Text='<%#Bind("Name") %>'></asp:TextBox></td>
            <td style="width:5%;"><asp:Button ID="btnLinkSave" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Save_16.png')" ToolTip="Update Link" CommandName="Update" CommandArgument='<%#Eval("Customer_Link_ID") %>' /></td>
            <td style="width:5%;"><asp:Button ID="btnLinkClear" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Cancel_16.png')" ToolTip="Delete Link" CommandName="Delete" CommandArgument='<%#Eval("Customer_Link_ID") %>'/></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
            <tr>
                <td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%"></asp:TextBox></td>
                <td style="width:5%;"><asp:Button ID="btnLinkNew" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Add_16.png')" ToolTip="Save New Link" CommandName="New" /></td>
                <td style="width:5%;"><asp:Button ID="btnLinkCancel" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/close_16.png')" ToolTip="Clear" CommandName="Clear" /></td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

基本上所有这些都是为转发器创建一个模板。标题部分开始表格并包含一个标签。项目模板用于显示绑定到转发器的数据。这种情况下的文本是使用服务器端包含绑定的，并且“绑定”函数中的值需要与绑定到转发器的表中的列完全匹配。在这种情况下，页脚是您输入新条目并关闭表格标签的地方。模板和页脚都包含 2 个按钮。请务必注意，CommandName 值已相应设置，因为稍后将在服务器端使用该值。

因此，一旦客户端设置完毕，我们将需要在服务器上处理项目命令事件。我这样设置我的功能：

    Private Sub rptLinks_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptLinks.ItemCommand
    Try
        'This clears the datasource because if I didn't do this I was getting weird behavior.
        rptLinks.DataSource = Nothing
        rptLinks.DataBind()
        Select Case e.CommandName
            Case "New"
                 'Do whatever you need to for a new record
            Case "Update"
                 'Do whatever you need to to update the record
            Case "Clear"
                 'Clear the controls
            Case "Delete"
                 'Delete the link that is in this row
            Case Else
        End Select
        'rebind the repeater to the updated data.
        rptLinks.DataSource = LinksDatatable
        rptLinks.DataBind()
    Catch ex As Exception
    End Try
End Sub

这是我找到的确定单击哪个按钮的最简单方法，但我确信还有其他方法可以完成它。

现在，一旦您遇到需要处理的情况，您最终将需要从控件中获取值，而您这样做的方式是：e.Item.FindControl("txtLinkDisplayName")。就我而言，我在 directcast() 调用中使用了该代码，并根据需要强制转换控件以使其更易于使用。

所以一旦一切就绪，数据绑定并处理好每个案例，那么你应该准备好了。