双Ajax ListBox

Question

你们知道任何.net控件有2个列表框，可以从左到右移动项目，反之亦然？！
像双列表框类型的东西。
我已经看过http://ajaxlistbox.codeplex.com/它看起来很可爱。
只是想知道任何建议。

Answer 1

这是一种方式：

制作两个ListBox，第一个显示所有可用项目，第二个显示用户选择的内容。您还需要一个TextBox来保存所选项目的副本，因为如果通过javascript添加它们，则无法在C＃中检索ListBox项目。使TextBox隐藏，这样用户就不会意外搞乱这些项目。

单击第一个列表框中的项目，它将显示在第二个“已选择”列表框中。单击第二个列表中的所选项目，它将消失。您可以对此进行更改，以便在选择后将项目从第一个列表中删除。

我从Page_Load方法调用AddJavascript。

ListBoxFilteredProfiles是我的第一个TextBox，ListBoxSelectedProfiles是第二个。

    private     void    AddJavascript()
    {
        // This javascript function adds the item selected in one listbox to another listbox.
        // Duplicates are not allowed, items are inserted in alphabetical order.

        string  OnChangeProfileListBoxJavascript   = 

@"<script language=JavaScript>
<!--
function OnChangeSelectedProfiles()
{ 
  var Target = document.getElementById('" + ListBoxSelectedProfiles.ID + @"');  
  var Source = document.getElementById('" + ListBoxFilteredProfiles.ID + @"'); 
  var TB = document.getElementById('"     + TextBoxProfiles        .ID + @"'); 
  if ((Source != null)  &&  (Target != null)) {
    var newOption = new Option();  // a new ListItem
    newOption.text  = Source.options[ Source.options.selectedIndex ].text;
    newOption.value = Source.options[ Source.options.selectedIndex ].value;

    var jj = 0;

    for( jj = 0;  jj < Target.options.length;  ++jj )  { 
      if ( newOption.text == Target.options[ jj ].text )  { return true; } // don't add if already in the list
      if ( newOption.text  < Target.options[ jj ].text )  { break; }       // add the new item at this position
    }

    for( var kk = Target.options.length;  kk > jj;  --kk )  {  // bump the remaining list items up one position
      var bumpItem = new Option();
      bumpItem.text  = Target.options[ kk-1 ].text;  // copy the preceding item
      bumpItem.value = Target.options[ kk-1 ].value;
      Target.options[ kk ] = bumpItem;
    }

    Target.options[ jj ] = newOption;  // Append the item in Target
    if (TB != null) {
      // Copy all the selected profiles into the hidden textbox.  The C# codebehind gets the selections from the textbox because listbox values added via javascript are not accessible.
      TB.value = '';
      for( var jj= 0;  jj < Target.options.length;  ++jj )  { TB.value = TB.value + Target.options[ jj ].value + '\n'; }
    }
  }
}
// -->
</script> ";


        // This javascript function removes an item from a listbox.
        string  OnChangeRemoveListBoxItemJavascript   = 
@"<script language=JavaScript>
<!--
function OnChangeRemoveProfile()
{ 
  var Target = document.getElementById('" + ListBoxSelectedProfiles.ID + @"');  
  var TB = document.getElementById('"     + TextBoxProfiles.ID         + @"'); 
  Target.remove( Target.options.selectedIndex );
  TB.value = '';
  // Copy all the selected profiles into the hidden textbox.  The C# codebehind gets the selections from the textbox because listbox values added via javascript are not accessible.
  for( var jj= 0;  jj < Target.options.length;  ++jj )  { TB.value = TB.value + Target.options[ jj ].value + '\n'; }
}
// -->
</script> ";


        ClientScript.RegisterStartupScript( typeof(Page),  "OnChangeSelectedProfiles",  OnChangeProfileListBoxJavascript ); 
        ClientScript.RegisterStartupScript( typeof(Page),  "OnChangeRemoveProfile",     OnChangeRemoveListBoxItemJavascript ); 

        ListBoxFilteredProfiles.Attributes.Add("onchange", "OnChangeSelectedProfiles()" ); 
        ListBoxSelectedProfiles.Attributes.Add("onchange", "OnChangeRemoveProfile()" ); 
    }