Двойной Ajax ListBox

Question

Ребята, знаете ли вы какие-либо элементы управления .net с двумя списками, которые могут перемещать элементы слева направо и наоборот ?!
Как двойные списки типа вещи.
Я уже посмотрел на http://ajaxlistbox.codeplex.com/, это выглядит довольно мило.
просто хочу узнать какие-либо предложения.

Answer 1

Вот способ:

Создайте два ListBox, первый показывает все доступные элементы, второй показывает, что выбирает пользователь.Вам также нужен TextBox для хранения копии выбранных элементов, так как невозможно получить элементы ListBox в C #, если они были добавлены через javascript.Сделайте TextBox скрытым, чтобы пользователь не мог случайно испортить элементы.

Щелкните элемент в первом списке, и он появится во втором «выбранном» списке.Нажмите на выбранный элемент во втором списке, и он исчезнет.Вы можете изменить это, чтобы элементы были удалены из первого списка после выбора.

Я вызываю AddJavascript из моего метода Page_Load.

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()" ); 
    }