dynamiclistbox.aspx

实现DualList列表的Web自定义控件

<%@ Page Language="C#" %>

<%@ Register TagPrefix="mbdlb" Namespace="MetaBuilders.WebControls" Assembly="MetaBuilders.WebControls.DynamicListBox" %>

<script runat="server">

	protected void Page_Load( Object sender, EventArgs e ) {
		RegisterClientScriptBlock( MyList.ClientID, "<script>\r\nwindow.MyListId='" + MyList.ClientID + "';\r\n</" + "script>");
	}

    protected void MyList_ListChanged( Object sender, EventArgs e ) {
        if( MyList.SelectedIndex == -1 ) {
            Result.Text = "The SelectedIndex changed and now nothing on the list is selected";
        } else {
            Result.Text = "The SelectedIndex changed and is now '" + MyList.SelectedIndex + "'<br>The selected item is: " + MyList.SelectedItem.Value + "/" + MyList.SelectedItem.Text;
        }
    }
    
</script>
<form runat="server">
				<h1>DynamicListBox Control</h1>
				<p>
					<mbdlb:DynamicListBox id="MyList" runat="server" OnSelectedIndexChanged="MyList_ListChanged" SelectionMode="Multiple" >
						<asp:ListItem value="normalItem1" text="normalItem1"></asp:ListItem>
						<asp:ListItem value="normalItem2" text="normalItem2"></asp:ListItem>
					</mbdlb:DynamicListBox>
				    
					<br><br>
					<a href="javascript:remove();" >Remove</a>
					<a href="javascript:add();" >Add</a>
					<script>
						function remove() {
							var list = DynamicListBox_FindControl(window.MyListId);
							var keepLooking = true;
							while ( keepLooking ) {
								list.Remove( list.options.selectedIndex );
								if ( list.options.selectedIndex < 0 ) {
									keepLooking = false;
								}
							}
						}
						
						function add() {
							var list = DynamicListBox_FindControl(window.MyListId);
							var generatedName = "newItem" + ( list.options.length + 1 );
							list.Add(generatedName,generatedName);
						}
					</script>

					<br><br>
					<asp:Label runat="server" id="Result" />
                </p>
                
                					<hr>
					<asp:Button runat="server" text="Smack"/>

</form>