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 

添加文本框方法

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 

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