asp.net ajax删除动态控件不更新页面

Question

I have a page where users can add multiple email address to the form. Clicking add with add another dynamic textbox via ajax Clicking save will save the values in the textboxes but if there is a blank textbox then I want to remove it on save.

I have code to remvoe it and see that the control is no longer in the placeholder but the page does not seem to update to show this.

Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If(Not Page.IsPostBack)
        AddEmailAddressBoxesLoad()
    Else
         Dim button As Control = GetPostBackControl(Me.Page)

        If (button IsNot Nothing) Then
            If (button.ID = "btnAdd") Then
                AddEmailAddressBoxes()              
            ElseIf (button.ID.Contains("btnSave"))
                AddEmailAddressBoxesSave()
                RemoveTextBox()
            End If
        End If

    End If
End Sub



Public Function RemoveTextBox() As List(Of String)
    Dim emptyTextBoxList = New List(Of TextBox
                                    )
    For Each control As Control In phMultiEmailAddressBoxes.Controls
        If(TypeOf(control) Is TextBox)
            Dim textBox = CType(control, TextBox)
            If(String.IsNullOrEmpty(textBox.Text))                  
                emptyTextBoxList.Add(textBox)
            End If
        End If
    Next

    For Each textBox As TextBox In emptyTextBoxList
        phMultiEmailAddressBoxes.Controls.Remove(textBox)
    Next
End Sub

Add TextBox Method

Private Sub AddEmailAddressBoxes()
    Dim count As Integer

    If (ViewState("EmailAddressboxCount") IsNot Nothing)
        count = CType(ViewState("EmailAddressboxCount"), Integer)
    End If

    count = count + 1

    ViewState("EmailAddressboxCount") = count

    For i As Integer = 1 To count
        AddTextBox(i)
    Next
End Sub

Private Sub AddEmailAddressBoxesLoad()
    Dim count As Integer = 1

    If(TrustSettings.HREmailAddressList.Any())
        count = TrustSettings.HREmailAddressList.Count()
    End If

    ViewState("EmailAddressboxCount") = count

    For i As Integer = 1 To count
        AddTextBox(i)
    Next
End Sub

Private Sub AddTextBox(i As Integer)
    Dim divStart = new Literal()
    divStart.Text = "<div>"
    phMultiEmailAddressBoxes.Controls.Add(divStart)

    Dim textBox = New TextBox()
    textBox.ID = "txtEmailBox" + i.ToString()
    textBox.MaxLength = 200
    textBox.CssClass = "email"
    If(TrustSettings.HREmailAddressList.Any() And TrustSettings.HREmailAddressList.Count() >= i)
        textBox.Text = TrustSettings.HREmailAddressList(i-1)
    End If

    phMultiEmailAddressBoxes.Controls.Add(textBox)

    Dim divEnd = new Literal()
    divEnd.Text = "</div>"
    phMultiEmailAddressBoxes.Controls.Add(divEnd)
End Sub

Update Panel markup

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
       <asp:PlaceHolder ID="phMultiEmailAddressBoxes" runat="server"></asp:PlaceHolder>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnAdd" />
        <asp:AsyncPostBackTrigger ControlID="btnSave" />
    </Triggers>
</asp:UpdatePanel>

<asp:Button runat="server" ID="btnAdd" Text="Add new email address" CssClass="but_small_png" UseSubmitBehavior="False" />
<asp:Button runat="server" ID="btnSave" Text="Save" CssClass="but_small_png" UseSubmitBehavior="False" />

EDIT: @Yuriy Rozhovetskiy's Code ported to VB

 protected sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

        if (IsPostBack)
            for each value As String in DynamicTextBoxes
                Dim tb = new TextBox() with { .ID = value, .CssClass = "email" }
                phMultiEmailAddressBoxes.Controls.Add(tb)
            Next
        End If
    End Sub

private Property  DynamicTextBoxes() As List(Of string)
    Get
        Dim list = ViewState("DynamicTextBoxes")
            if (list Is Nothing)

                list = New List(Of string)()
                ViewState("DynamicTextBoxes") = list
            End If
            return list
    End Get
    Set

    End Set
End Property

protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
    AddHandler btnSave.Click, AddressOf btnSave_Click
    AddHandler btnAdd.Click, AddressOf btnAdd_Click
End Sub

Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnSave.Click
    For Each value As string In DynamicTextBoxes

        Dim tb = CType(phMultiEmailAddressBoxes.FindControl(value), TextBox)
        if (tb IsNot Nothing And string.IsNullOrEmpty(tb.Text))

            phMultiEmailAddressBoxes.Controls.Remove(tb)
            DynamicTextBoxes.Remove(value)
        End If
    Next
    End Sub

Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs)  Handles btnAdd.Click

    Dim value = "tbEmailAddress" + DynamicTextBoxes.Count.ToString()
    Dim tb = new TextBox() with { .ID = value, .CssClass = "email" }
    phMultiEmailAddressBoxes.Controls.Add(tb)
    DynamicTextBoxes.Add(id)
End Sub

Answer 1

Not sure what's wrong with your code, but code below works well for me:

<asp:UpdatePanel runat="server">
     <ContentTemplate>
          <asp:TextBox runat="server" ID="tbDefaultEmailAddress" />
          <asp:Panel runat="server" ID="phMultiEmailAddressBoxes">
          </asp:Panel>
     </ContentTemplate>
     <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnSave" />
          <asp:AsyncPostBackTrigger ControlID="btnAdd" />
     </Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="btnAdd" Text="Add new email address" />
<asp:Button runat="server" ID="btnSave" Text="Save" />

private List<string> DynamicTextBoxes
{
    get
    {
        var list = ViewState["DynamicTextBoxes"] as List<string>;
        if (list == null)
        {
            list = new List<string>();
            ViewState["DynamicTextBoxes"] = list;
        }
        return list;
    }
}

protected void Page_Init(object sender, EventArgs e)
{
    btnAdd.Click += new EventHandler(btnAdd_Click);
    btnSave.Click += new EventHandler(btnSave_Click);
}

void btnSave_Click(object sender, EventArgs e)
{
    foreach (var id in DynamicTextBoxes.ToArray())
    {
        var tb = phMultiEmailAddressBoxes.FindControl(id) as TextBox;
        if (tb != null && string.IsNullOrEmpty(tb.Text))
        {
            phMultiEmailAddressBoxes.Controls.Remove(tb);
            DynamicTextBoxes.Remove(id);
        }
    }
}

void btnAdd_Click(object sender, EventArgs e)
{
    var id = "tbEmailAddress" + DynamicTextBoxes.Count.ToString();
    var tb = new TextBox() { ID = id, CssClass = "email" };
    phMultiEmailAddressBoxes.Controls.Add(tb);
    DynamicTextBoxes.Add(id);
}

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        foreach (var id in DynamicTextBoxes)
        {
            var tb = new TextBox() { ID = id, CssClass = "email" };
            phMultiEmailAddressBoxes.Controls.Add(tb);
        }
    }
}

Especially for brother in arms forced to use VB.NET :)

Private ReadOnly Property DynamicTextBoxes As List(Of String)
    Get
        Dim list As List(Of String) = TryCast(ViewState("DynamicTextBoxes"), List(Of String))
        If list Is Nothing Then
            list = New List(Of String)
            ViewState("DynamicTextBoxes") = list
        End If
        Return list
    End Get
End Property


Protected Sub Page_Load(ByVal sender As Object, ByVal evetArgs As EventArgs) Handles Me.Load
    If IsPostBack Then
        For Each id As String In DynamicTextBoxes
            AddNewTextBox(id)
        Next
    End If
End Sub

Protected Sub AddButton_Click(ByVal sender As Object, ByVal eventAtgs As EventArgs) Handles btnAdd.Click
    Dim id = "tbEmailAddress" & DynamicTextBoxes.Count.ToString()
    AddNewTextBox(id)
    DynamicTextBoxes.Add(id)
End Sub

Private Sub AddNewTextBox(ByVal id As String)
    Dim tb As TextBox = New TextBox
    tb.ID = id
    tb.CssClass = "email"
    phMultiEmailAddressBoxes.Controls.Add(tb)
End Sub

Protected Sub SaveButton_Click(ByVal sender As Object, ByVal evebtArgs As EventArgs) Handles btnSave.Click
    For Each id As String In DynamicTextBoxes.ToArray()
        Dim tb As TextBox = TryCast(phMultiEmailAddressBoxes.FindControl(id), TextBox)
        If Not tb Is Nothing AndAlso String.IsNullOrEmpty(tb.Text) Then
            phMultiEmailAddressBoxes.Controls.Remove(tb)
            DynamicTextBoxes.Remove(id)
        End If
    Next
End Sub

One clarification why I use List of Strings instead of just count of added textboxes: with this approach you can add three dynamic textboxes, fill first and third but skip second and all will work as required.