I just ran through your problem and discovered that I could not add items to a .NET ListBox control and submit them to the server. As I suspected, an exception is thrown because ASP.NET could not validate the ListBox since it was modified.
Really you shouldn't be using a ListBox control for what you are trying to do. If you want to list all of the items checked consider using a TextBox, or a Label....
Despite this fact, I went on to solve the problem.
I created the following simple JavaScript functions. One adds the items to the ListBox and the other selects all the items in the ListBox (because as you discovered only selected items are submitted to the server). Please note that there's no code to remove the item from the list.
-
<script type="text/javascript">
-
function AddElementToListBox(elementID,listboxID)
-
{ var element = document.getElementById(elementID);
-
var listBox = document.getElementById(listboxID);
-
-
var opt = document.createElement("option");
-
opt.text = elementID;
-
opt.value = elementID;
-
opt.selected = false;
-
-
listBox.options.add(opt);
-
}
-
function selectAll(listboxID)
-
{ var listBox = document.getElementById(listboxID);
-
-
for(var i=0; i< listBox.options.length;i++)
-
{
-
listBox.options(i).selected = true;
-
}
-
}
-
</script>
-
Since ListBoxes are rendered as <select> HTML elements in the browser I added a <select> item to my ASP code and gave it the id of "ListBox1". I also added a bunch of .NET check boxes to the page whose IDs are added to ListBox1 when checked, a button to submit the page, and a label to display the items that were in the ListBox when the button is clicked:
-
<div style="float:left">
-
<asp:CheckBox ID="CheckBox1" runat="server" Text="Add Me 1" /><br />
-
<asp:CheckBox ID="CheckBox2" runat="server" Text="Add Me 2"/><br />
-
<asp:CheckBox ID="CheckBox3" runat="server" Text="Add Me 3"/><br />
-
</div>
-
<div style="float:left">
-
<select size="4" name="ListBox1" id="ListBox1" multiple="multiple"> </select>
-
</div>
-
<asp:Button ID="doStuff" runat="server" style="clear:both" text="Do Stuff!" /><br />
-
<asp:Label ID="message" runat="server"></asp:Label>
-
<div style="clear:both"></div>
-
In my server side code (VB.NET) declared a .NET ListBox object which I filled with the selected items in ListBox1. I named this ListBox "ListBox1". I then filled it with the items I retrieved from the Request object in my Page PreInit event.
-
Private Listbox1 As ListBox
-
-
Private Sub ThePagePreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
-
Listbox1 = New ListBox
-
Dim values As String = Request.Params("ListBox1")
-
If String.IsNullOrEmpty(values) = False Then
-
Dim listboxItems() As String = values.Split(","c)
-
For Each i As String In listboxItems
-
Listbox1.Items.Add(i)
-
Next
-
End If
-
End Sub
-
I added code that displays what items were in the ListBox when the button was clicked:
-
Private Sub doStuff_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles doStuff.Click
-
Dim str As New StringBuilder
-
If Listbox1.Items.Count > 0 Then
-
For Each i As ListItem In Listbox1.Items
-
str.Append(" " + i.Text)
-
Next
-
End If
-
message.Text = "Items Were: " + str.ToString
-
End Sub
-
And I added the JavaScript to the CheckBoxes so that they are added to the ListBox1 using JavaScript in my PreRender event:
-
Private Sub JSTest_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
-
CheckBox1.Attributes.Add("onClick", "AddElementToListBox('" + CheckBox1.ClientID + "','ListBox1');")
-
CheckBox2.Attributes.Add("onClick", "AddElementToListBox('" + CheckBox2.ClientID + "','ListBox1');")
-
CheckBox3.Attributes.Add("onClick", "AddElementToListBox('" + CheckBox3.ClientID + "','ListBox1');")
-
doStuff.Attributes.Add("onClick", "selectAll('ListBox1');")
-
End Sub
-
Cheers!
-Frinny
6
