我正在尝试创建:
一个加载了两个文本框(“item”和“amount”)和一个“add”按钮的表单。
每次单击“添加”按钮时,都会添加另一组与第一组相同的文本框。
单击“添加”按钮时,文本框需要保留在其中输入的任何内容。
做这个的最好方式是什么?我一直在尝试很多不同的东西,但没有一个是完全正确的。
我不得不在获胜表格和网页上做几次这样的事情。不幸的是,在网页上它不像在 win 表单上那么容易。我确定那里有 JQuery 实现,但我过去的做法是使用中继器。
项目命令事件的处理有点棘手,但我会尽量减少它。关于这个特定项目的一点背景是,我想出了一个界面,人们可以在其中编辑网页上的链接。原版在中继器中包含更多控件,但我对其进行了精简,因此不会占用太多空间。
首先,声明中继器很简单:
<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() 调用中使用了该代码,并根据需要转换控件以使其更易于使用。
因此,一旦一切就绪,数据绑定并处理每个案例,那么您应该准备好开始了。