?
Solved

how to get all value from a listbox in asp.net

Posted on 2009-05-03
6
Medium Priority
?
471 Views
Last Modified: 2012-05-06
i have the little code below that has 2 listboxes, listbox1 has items in it and 2 has nothing. then when you hit button1 it will move an item from listbox1 over to listbox2,
button2 moves all items from listbox1 to listbox2,
button3 moves 1 item from listbox2 to listbox1,
 button4 moves all items from listbox2 to listbox1.
so then i hit submit. but when i try to show what items are there in listbox2 it still displaying as empty and listbox1 still has its original values. So my question is how do i keep the value to stay in listbox2 so i can retrieve it in the serverside. thank you guys
<html>
<head>
</head>
<script language="javascript">
function add()
{
   s1 = document.getElementById("ctl00$Body$ListBox1");
   s2 = document.getElementById("ctl00$Body$ListBox2");
   index = s1.options.selectedIndex;
   if ( s1.options.length &&
        index != -1 ) {
        oOption = document.createElement("OPTION");
        oOption.text = s1.options[index].text;
        oOption.value = s1.options[index].value;
        s2.options.add(oOption);
        s1.options.remove(index);
        s1.options.selectedIndex=0;
   }
}
 
function addAll()
{
  s1 = document.getElementById("ctl00$Body$ListBox1");
  s2 = document.getElementById("ctl00$Body$ListBox2");
  for( i=s1.options.length-1; i>=0; i-- ) {
        oOption = document.createElement("OPTION");
        oOption.text = s1.options[i].text;
        oOption.value = s1.options[i].value;
        s2.options.add(oOption);
        s1.options.remove(i);
  }
}
 
function remove()
{
   s1 = document.getElementById("ctl00$Body$ListBox1");
   s2 = document.getElementById("ctl00$Body$ListBox2");
   index = s2.options.selectedIndex;
   if ( s2.options.length &&
        index != -1 ) {
        oOption = document.createElement("OPTION");
        oOption.text = s2.options[index].text;
        oOption.value = s2.options[index].value;
        s1.options.add(oOption);
        s2.options.remove(index);
        s2.options.selectedIndex=0;
   }
}
 
function removeAll()
{
  s1 = document.getElementById("ctl00$Body$ListBox1");
  s2 = document.getElementById("ctl00$Body$ListBox2");
  for( i=s2.options.length-1; i>=0; i-- ) {
        oOption = document.createElement("OPTION");
        oOption.text = s2.options[i].text;
        oOption.value = s2.options[i].value;
        s1.options.add(oOption);
        s2.options.remove(i);
  }
}
</script>
 
<body>
<form name=f1>
<table><tr><td colspan=2>
<asp:listbox id="listbox1" runat="server">
    <asp:ListItem Value="1">hello</asp:ListItem>
    <asp:ListItem Value="2">2 hello</asp:ListItem>
    <asp:ListItem Value="3">3 hello</asp:ListItem>
</asp:listbox>
</td><td colspan=2>
<asp:listbox id="listbox2" runat="server"></asp:listbox>
</td>
</tr>
<tr>
<td><input type=button value="Add" onclick="add()"></td>
<td><input type=button value="AddAll" onclick="addAll()"></td>
<td><input type=button value="Remove" onclick="remove()"></td>
<td><input type=button value="RemoveAll" onclick="removeAll()"></td>
</tr>
</table>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:StewSupport
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 10

Expert Comment

by:Bane83
ID: 24290457
The server does not recognize most changes made via javascript (various reasons but mainly for security).  Generally this information is maintained by writing values to a HiddenField as they're moved back and forth and then use the values in the hidden field on the server.
0
 
LVL 8

Expert Comment

by:mkosbie
ID: 24290462
You're never telling the server what values are in what boxes.  When you submit the form, only one value is sent for each listbox, not the entire contents of the list.  That means you have three choices: 1) Use AJAX to tell the server every time you've made a change, or 2) Make the buttons server-side and only make changes there, or 3) Implement a special client-side tracking system that your server checks at postback.  If you need help with any of those three options, just ask.
0
 

Author Comment

by:StewSupport
ID: 24290506
can you show me option 3?
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:StewSupport
ID: 24290734
i'm trying to do option 1 and everytime i try to an item, it works fine but if i moved multiple selected items it will fail. here's the code
 For i As Integer = 0 To ListBox1.Items.Count - 1 Step 1
            If ListBox1.Items(i).Selected = True Then
                ListBox2.Items.Add(ListBox1.Items(i).Text)      
                ListBox1.Items.RemoveAt(i)        
            End If            
        Next

     
0
 

Author Comment

by:StewSupport
ID: 24290754
well this solve the problem of removing
 For i As Integer = 0 To ListBox1.Items.Count - 1 Step 1
            If ListBox1.Items(i).Selected = True Then
                ListBox2.Items.Add(ListBox1.Items(i).Text)                
            End If            
        Next
        For y As Integer = ListBox1.Items.Count - 1 To 0 Step -1
            If ListBox1.Items.Item(y).Selected Then
                ListBox1.Items.RemoveAt(y)
            End If
        Next y
0
 
LVL 8

Accepted Solution

by:
mkosbie earned 2000 total points
ID: 24291257
Here's some code for option 3 (the custom tracking system) using hidden fields.  You'll have to add two asp:HiddenField's to the page (hdnLB1 and hdnLB2) by the listboxs to use it.
//add this funciton to your js
function updateHdns() {
    var s1 = document.getElementById('ctl00$Body$ListBox1');
    var s2 = document.getElementById('ctl00$Body$ListBox2');
    var hdnLB1 = document.getElementById('ctl00$Body$hdnLB1');
    var hdnLB2 = document.getElementById('ctl00$Body$hdnLB2');
 
    hdnLB1.value = '';
    hdnLB2.value = '';
    if(s1.options.length>0) hdnLB1.value = s1.options[0].text;" & vbCrLf & _
    if(s2.options.length>0) hdnLB2.value = s2.options[0].text;" & vbCrLf & _
 
    for(i=1;i<s1.options.length;i++) hdnLB1.value += ',' + s1.options[i].text"
    for(i=1;i<s2.options.length;i++) hdnLB2.value += ',' + s2.options[i].text"
}
 
//then call it after each of your update functions (ie add, addall, remove, etc)
 
//add this code to your server side in the Page_Load event handler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Page.IsPostBack Then
        Dim arrLB1 As String() = hdnLB1.Value.Split(",")
        Dim arrLB2 As String() = hdnLB2.Value.Split(",")
 
        listbox1.Items.Clear()
        If arrLB1(0) <> "" Then
            For Each i As String In arrLB1
                listbox1.Items.Add(i)
            Next
        End If
 
        listbox2.Items.Clear()
        If arrLB2(0) <> "" Then
            For Each i As String In arrLB2
                listbox2.Items.Add(i)
            Next
        End If
    End If
End Sub

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question