As I told you before, I'm working on a ASP.Net program. Because of the minimal use, I decided to use plain javascript and no AJAX. Also for deployment issues. I have a simple scenario, 2 listboxes. When I add a value to one, it should disappear in the other. Here is the setup:

I add the javascript via the code behind to the asp:images. The code is called in the page load event. This is the code that does the trick:

StringBuilder script = new StringBuilder();        

script.Append("javascript:");        

script.AppendFormat("var ind = {0}.selectedIndex;", lstOut.ClientID);        

script.Append("if (ind>-1){");        

script.AppendFormat("var sel = {0}.value;", lstOut.ClientID);        

script.AppendFormat("var len = {0}.length;",lstIn.ClientID); 

script.AppendFormat("{0}.options[len] = new Option({1}.options[ind].text,sel);" 

, lstIn.ClientID, lstOut.ClientID);        

script.AppendFormat("{0}.options[ind] = null;", lstOut.ClientID);        

script.Append("}");        

btnRight.Attributes.Add("onclick", script.ToString());         

script = new StringBuilder();        

script.Append("javascript:");        

script.AppendFormat("var ind = {0}.selectedIndex;", lstIn.ClientID);        

script.Append("if (ind>-1){");        

script.AppendFormat("var sel = {0}.value;", lstIn.ClientID);        

script.AppendFormat("var len = {0}.length;",lstOut.ClientID); 

script.AppendFormat("{0}.options[len] = new Option({1}.options[ind].text,sel);" 

, lstOut.ClientID, lstIn.ClientID);        

script.AppendFormat("{0}.options[ind] = null;", lstIn.ClientID);        

script.Append("}");        

btnLeft.Attributes.Add("onclick", script.ToString()); 

This is the Javascript that is generated for the right arrow image:

var ind = ctl00_CPHMiddle_lstOut.selectedIndex;

if (ind>-1){var sel = ctl00_CPHMiddle_lstOut.value;

var len = ctl00_CPHMiddle_lstIn.length;

ctl00_CPHMiddle_lstIn.options[len] = new Option(ctl00_CPHMiddle_lstOut.options[ind].text,sel);

ctl00_CPHMiddle_lstOut.options[ind] = null;}

When the user is finished with the listboxes he presses a save button that gets all items out of the right listbox and writes them to the database. This is the second challenge, because you will notice that the Listbox loses the state after a postback. This problem can be solved with a hidden field and more javascript!

This code is placed on the page load, behind the code of the listboxes. This is executed before the postback occurs and it doesn't interfear with the asp event. 

script = new StringBuilder();

script.Append("javascript:");

script.AppendFormat("var len = {0}.length;var values='';", lstIn.ClientID);

script.Append("for (i = 0; i < len; i++){");

script.AppendFormat("values = values + {0}.options[i].text 

+'*'+{0}.options[i].value+'/';", lstIn.ClientID);

script.Append("}");

script.AppendFormat("{0}.value = values;",unitsIn.ClientID);

btnSave.Attributes.Add("onclick", script.ToString());

As you can see we place the text and the value in the values array, split up the text and value by a '*' and split up the items with '/'. When we want to extract the values in the event handler of the button, we use the string.split method. The code looks like this:

//Write all untis to the selected department.

List<CCUnit> units = new List<CCUnit>();

string [] strArrunitsIn = unitsIn.Value.Split('/');

foreach (string str in strArrunitsIn)

{

	if (!String.IsNullOrEmpty(str))

        {

        	string[] item = str.Split('*');

                CCUnit unit = new CCUnit();

                unit.Guid = item[1];

                unit.Description = item[0];

                units.Add(unit);

        }

}

//Update

You can ask questions or request the complete code be commenting or email.