双 Ajax 列表框

Question

你们知道任何带有 2 个列表框的 .net 控件可以从左到右移动项目，反之亦然？！
就像双列表框类型的东西。
我已经看过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()" ); 
    }