asp.net ajax刪除動態控件不更新頁面

Question

我有一個頁面，用戶可以在表單中添加多個電子郵件地址。 單擊添加，通過ajax添加另一個動態文本框單擊保存將保存文本框中的值，但如果有空文本框，則我想在保存時將其刪除。

我有代碼重新發送它，並看到控件不再在占位符中，但頁面似乎沒有更新以顯示這一點。

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

添加TextBox方法

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

更新面板標記

<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" />

編輯：@Yuriy Rozhovetskiy的代碼移植到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

不確定您的代碼有什么問題，但下面的代碼對我來說效果很好：

<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);
        }
    }
}

特別是對於被迫使用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

一個澄清為什么我使用字符串列表而不僅僅是添加文本框的數量：使用這種方法，您可以添加三個動態文本框，填充第一個和第三個但跳過第二個，所有都將按要求工作。