动态添加和移除用户控件

在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

现在已经创建了需要显示的控件,接下来将用户控件动态添加到另一个页面。

页面加载时,有三件重要的事情需要做:

  • 确定触发回发事件的控件。
  • 如果“添加”按钮被点击,增加用户控件的计数,以便知道要显示多少控件。
  • 为用户控件上的“删除”按钮附加事件处理程序,以便在点击时从Panel中移除该控件,并减少页面上的控件数量。

最后,一旦所有设置完成,可以将所有请求的用户控件动态加载到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
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485