Listbox in dynamic web user controls lost data after postback - vb.net

Question

I create dynamic web user control which has a list box and a textbox. However, data in the list box is lost after postback but the data in the textbox isn't.
I've read a lot of forums and pages about web user controls and I understands that web user controls recreate after such post-back.
Could you please show me the way to get data of list box before post back ?
Thank alot
'--------------------------------------
Note that: my web user control has a list and text boxes, user can add value to the list box by entering values in the text box ( I wrote functions in javascripts to add data from text box to list box) .
However, in the main page, when I click a button to save data of the list, all of my page and my web user control are reloaded, so data in the list box is also disappear :-(
Code VB for adding web user control:
Private Sub WebFormTestValidation_Init(sender As Object, e As EventArgs) Handles Me.Init
Dim ctrList As wucListPerson
ctrList = LoadControl("wucListPerson.ascx")
Me.Panel1.Controls.Add(ctrList)
ctrList.ID = "wucDynamic"
ctrList.wucName = "DYNAMIC TEST"
ctrList.wucInfo = "DYNAMIC TEST"
End Sub
'----------------------
Code VB of web user control
Public Class wucListPerson
Inherits System.Web.UI.UserControl
Public Property lstPersons As List(Of String)
Get
Dim lst As New List(Of String)
If lstFullName.Items.Count > 0 Then
For i = 0 To lstFullName.Items.Count - 1
lst.Add(CStr(lstFullName.Items(i).Value))
Next
End If
Return lst
End Get
Set(ByVal lstValues As List(Of String))
If lstValues.Count > 0 Then
For i = 0 To lstValues.Count - 1
Dim strArr As String() = Split(CStr(lstValues.Item(i)), "*")
Ordre.Text = CStr(strArr(0))
Nom.Text = strArr(1)
Prenom.Text = strArr(2)
hdfIdPersonne.Value = strArr(3)
Dim item As New System.Web.UI.WebControls.ListItem
item.Text = strArr(0) + "." + strArr(1) + " " + strArr(2)
item.Value = CStr(lstValues.Item(i))
lstFullName.Items.Add(item)
Next
End If
End Set
End Property
Public Property wucName As String
Get
Return lblName.Text
End Get
Set(ByVal value As String)
lblName.Text = value
End Set
End Property
Public Property wucInfo As String
Get
Return Info.Text
End Get
Set(ByVal value As String)
Info.Text = value
End Set
End Property
Public Sub addPersonne(ByVal ordre As Integer, ByVal nom As String, ByVal prenom As String, idpersonne As Integer)
'lstName.Items.Add(CStr(ordre) + "." + nom + " " + prenom, CStr(ordre) + "*" + nom + "*" + prenom + "*" + CStr(idpersonne))
Dim item As New System.Web.UI.WebControls.ListItem
item.Text = CStr(ordre) + "." + nom + " " + prenom
item.Value = CStr(ordre) + "*" + nom + "*" + prenom + "*" + CStr(idpersonne)
lstFullName.Items.Add(item)
End Sub
Public Function getList() As List(Of String)
Dim lst As New List(Of String)
If lstFullName.Items.Count > 0 Then
For i = 0 To lstFullName.Items.Count - 1
lst.Add(CStr(lstFullName.Items(i).Value))
Next
End If
Return lst
End Function
Public Sub SetList(ByVal lst As List(Of String))
If lst.Count > 0 Then
For i = 0 To lst.Count - 1
Dim strArr As String() = Split(CStr(lst.Item(i)), "*")
Ordre.Text = CStr(strArr(0))
Nom.Text = strArr(1)
Prenom.Text = strArr(2)
hdfIdPersonne.Value = strArr(3)
Dim item As New ListItem
item.Text = strArr(0) + "." + strArr(1) + " " + strArr(2)
item.Value = CStr(lst.Item(i))
lstFullName.Items.Add(item)
Next
End If
End Sub
Protected uniqueKey As String
Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
'If Not Page.IsPostBack Then
' lblName.Text = wucName
'End If
Me.uniqueKey = Guid.NewGuid.ToString("N")
Me.cmdRight.Attributes("onclick") = ("RemoveItem_" + (uniqueKey + "(); return false;"))
Me.cmdLeft.Attributes("onclick") = ("AddItem_" + (uniqueKey + "(); return false;"))
Me.cmdInfor.Attributes("onclick") = ("showHideInfor_" + (uniqueKey + "(); return false;"))
If Trim(lblName.Text) = "" Then cmdInfor.Visible = False
End Sub
End Class
'----------------------
Code Javascript to get/ remove data from text boxes to the list
//===================
function getMaxOrdre_<%=uniqueKey%>() {
var listName = document.getElementById("<%=lstFullName.ClientID()%>");
var lst = listName.options;
var count = lst.length;
if (lst.length == 0) {
return 0;
}
var max = 0;
for (var i = 0; i < count; i++) {
var item = lst[i].value;
var FName = getFullName_<%=uniqueKey%>(item);
if (parseInt(FName.Ordre) > max) {
max = FName.Ordre;
}
}
return max;
}
//===================
function getFullName_<%=uniqueKey%>(FullName) {
if (FullName.length != "0") {
var temp = new Array();
temp = FullName.split('*');
return { Ordre: temp[0], Nom: temp[1], PreNom: temp[2], IdPersonne: temp[3] };
}
return { Ordre: 0, Nom: '', PreNom: '', IdPersonne: '0' };
}
//===================
function AddItem_<%=uniqueKey %>() {
//lstName.BeginUpdate();
var txtOrdre = document.getElementById("<%=Ordre.ClientID()%>");
var txtNom = document.getElementById("<%=Nom.ClientID()%>");
var txtPrenom = document.getElementById("<%=Prenom.ClientID()%>");
var hdfIdPerson = document.getElementById("<%=hdfIdPersonne.ClientID%>");
var listName = document.getElementById("<%=lstFullName.ClientID()%>");
var index = listName.selectedIndex;
var lst = listName.options;
var ordre = txtOrdre.value;
var nom = txtNom.value;
var prenom = txtPrenom.value;
var idPerson = hdfIdPerson.value;
if ((nom.length > 0) || (prenom.length > 0)) {
var selectBoxOption = document.createElement("option");//create new option
selectBoxOption.value = ordre + '*' + nom + '*' + prenom + '*' + idPerson;//set option value
selectBoxOption.text = ordre + '.' + nom + ' ' + prenom;//set option display text
listName.add(selectBoxOption, null);//add created option to select box.
};
// lstName.EndUpdate();
//get deafault data
var ordreMax = getMaxOrdre_<%=uniqueKey%>();
txtOrdre.value = parseInt(ordreMax) + 1;
txtNom.value = '';
txtPrenom.value = '';
hdfIdPerson.value = '0';
}
//===================
function RemoveItem_<%=uniqueKey %>() {
//lstName.BeginUpdate();
var txtOrdre = document.getElementById("<%=Ordre.ClientID()%>");
var txtNom = document.getElementById("<%=Nom.ClientID()%>");
var txtPrenom = document.getElementById("<%=Prenom.ClientID()%>");
var hdfIdPerson = document.getElementById("<%=hdfIdPersonne.ClientID%>");
var listName = document.getElementById("<%=lstFullName.ClientID()%>");
var index = listName.selectedIndex;
var lst = listName.options;
if (index >= 0) {
var FName = getFullName_<%=uniqueKey %>(lst[index].value);
txtOrdre.value = FName.Ordre;
txtNom.value = FName.Nom;
txtPrenom.value = FName.PreNom;
hdfIdPerson.value = FName.IdPersonne;
listName.remove(index);
}
}

Answer 1

Your problem is that you are adding the new items in the DOM, but these changes will not necessarily be reflected in your ListBox after a page refresh or PostBack. I could suggest two solutions:
1) Add the elements in the ListBox through .net instead of using Javascript.
but if you need a client side solution so that your page won't refresh everytime you add an item:
2) Add a .net HiddenField control. These controls have the advantage of being accessible easily from both Client Side and Server Side. You can add each item in both, the ListItem and the HiddenField (maybe comma separated) and on the server side you will use this HiddenField instead of your ListBox.