在Web开发中,经常需要根据用户的需求动态地添加或移除页面上的控件。例如,用户可能需要上传多个图片,但具体数量未知。这时,提供一个“添加”按钮,允许用户根据需要动态添加上传框,是一个不错的选择。
如果需要动态添加的控件数量不多,这很简单。但如果是复杂的布局中包含多个控件,最简单的方法是将需要动态添加的控件包装到一个用户控件中,然后动态地将用户控件添加到页面上。本文将展示如何创建用户控件,如何动态添加和移除用户控件,以及如何访问用户控件中的控件值。
首先,创建一个用户控件,并在其中添加多个控件作为“模板”。用户控件的内容如下:
<asp:Table>
<asp:TableRow>
<asp:TableCell>文本框示例:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="tbx1" runat="server" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>下拉框示例:</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Text="下拉1" />
<asp:ListItem Text="下拉2" />
<asp:ListItem Text="下拉3" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>复选框示例:</asp:TableCell>
<asp:TableCell>
<asp:CheckBoxList ID="cbx1" runat="server">
<asp:ListItem Text="复选框1" />
<asp:ListItem Text="复选框2" />
<asp:ListItem Text="复选框3" />
</asp:CheckBoxList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Button ID="btnRemove" runat="server" Text="移除" />
<hr />
接下来,在用户控件的代码后台添加事件处理程序,以便在点击删除按钮时能够通知父页面:
Partial Class WebUserControl
Inherits System.Web.UI.UserControl
Public Event RemoveUserControl As EventHandler
Protected Friend Sub btnRemove_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRemove.Click
RaiseEvent RemoveUserControl(sender, e)
End Sub
End Class
现在已经创建了需要显示的控件,接下来将用户控件动态添加到另一个页面。
在页面加载时,有三件重要的事情需要做:
最后,一旦所有设置完成,可以将所有请求的用户控件动态加载到PlaceHolder控件中。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
AddAndRemoveDynamicControls()
End Sub
Private Sub AddAndRemoveDynamicControls()
Dim c As Control = GetPostBackControl(Page)
If Not IsNothing(c) Then
If c.ID.ToString = "btnAdd" Then
ltlCount.Text = Convert.ToInt16(ltlCount.Text) + 1
End If
End If
ph1.Controls.Clear()
Dim ControlID As Integer = 0
For i As Integer = 0 To (Convert.ToInt16(ltlCount.Text) - 1)
Dim DynamicUserControl As WebUserControl = LoadControl("WebUserControl.ascx")
While InDeletedList("uc" & ControlID) = True
ControlID += 1
End While
DynamicUserControl.ID = "uc" & ControlID
AddHandler DynamicUserControl.RemoveUserControl, AddressOf Me.HandleRemoveUserControl
ph1.Controls.Add(DynamicUserControl)
ControlID += 1
Next
End Sub
Private Function InDeletedList(ByVal ControlID As String) As Boolean
Dim DeletedList() As String = ltlRemoved.Text.Split("|")
For i As Integer = 0 To DeletedList.GetLength(0) - 1
If ControlID.ToLower = DeletedList(i).ToLower Then
Return True
End If
Next
Return False
End Function
Sub HandleRemoveUserControl(ByVal sender As Object, ByVal e As EventArgs)
Dim DynamicUserControl As WebUserControl = sender.parent
ph1.Controls.Remove(sender.parent)
ltlRemoved.Text &= DynamicUserControl.ID & "|"
ltlCount.Text = Convert.ToInt16(ltlCount.Text) - 1
End Sub
Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAdd.Click
'Handled in page load
End Sub
Protected Sub btnDisplayValues_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnDisplayValues.Click
ltlValues.Text = ""
For Each c As Control In ph1.Controls
If c.GetType.Name.ToLower = "webusercontrol_ascx" Then
Dim uc As UserControl = CType(c, UserControl)
Dim tbx1 As TextBox = uc.FindControl("tbx1")
Dim ddl1 As DropDownList = uc.FindControl("ddl1")
Dim cbx1 As CheckBoxList = uc.FindControl("cbx1")
Dim sb As New System.Text.StringBuilder
sb.Append("Textbox value: " & tbx1.Text & "
")
sb.Append("Dropdown value: " & ddl1.SelectedValue & "
")
sb.AppendLine("Checkbox values:")
For Each li As ListItem In cbx1.Items
If li.Selected = True Then
sb.Append(li.Value & "
")
End If
Next
sb.Append("
")
ltlValues.Text &= sb.ToString
End If
Next
End Sub