Contribute
ASP.NET

Creating Multiselect DropDownList Control in ASP.NET 4.0 Using Bootstrap

While working on a project there was a requirement for creating a Multiselect DropDownList that will have the following features:

  • Auto complete filter.
  • Control may be single select or Multiselect based on user demands.
  • Select All option should be there in case of Multiselect DropDownList.
  • Selected options list should be displayed below the DropDownList in list mode.

The following snapshot gives you an idea about the same.

multiselect dropdownlist

By default ASP.NET do not have such type of control. But anyways ASP.NET has provided us with a way that you can create your own custom web user control by combining multiple other controls such as web server, html controls, etc. Well for implementing this control I’d made use of bootstrap multiselect control because looking at the requirement bootstrap multiselect fits the best.

Bootstrap multiselect control comes with a lot of configuration option through which user can customize its default behavior and look & feel. For configuring these options inside our user control we’ve made use of properties which returns or sets values stored inside the hidden fields.

Let’s get into the code now.

I’m using VS2013 for creating ASP.NET web application. I’m naming my project as DummyWebApp. Inside my solution I’m creating a new folder with the name User Control and within this folder I’m adding a new component named “Web User Control”. I’ve named my web user control as “AutoCompleteDdl”.

The following is the AutoCompleteDdl.aspx code.

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="AutoCompleteDdl.ascx.cs" Inherits="UserControl_AutoCompleteDdl" %>  
  2. <div style="width: 380px;" id="divAutoComplete" runat="server">  
  3.     <asp:HiddenField ID="hdnButtonWidth" runat="server" Value="320px" />  
  4.     <asp:HiddenField ID="hdnNonSelectedText" runat="server" Value="--Select--" />  
  5.     <asp:HiddenField ID="hdnIncludeSelectAllOption" runat="server" Value="false" />  
  6.     <asp:HiddenField ID="hdnSelectAllText" runat="server" Value="All" />  
  7.     <asp:HiddenField ID="hdnEnableFiltering" runat="server" Value="False" />  
  8.     <asp:HiddenField ID="hdnEnableFilteringIgnoreCase" runat="server" Value="False" />  
  9.     <asp:HiddenField ID="hdnDisableIfEmpty" runat="server" Value="False" />  
  10.     <asp:HiddenField ID="hdnMaxHeight" runat="server" Value="200" />  
  11.     <asp:HiddenField ID="hdnFilterPlaceholder" runat="server" Value="Search for something..." />  
  12.     <asp:HiddenField ID="hdnAllSelectedText" runat="server" Value="No option left..." />  
  13.     <asp:HiddenField ID="hdnText" runat="server" />  
  14.     <asp:HiddenField ID="hdnValue" runat="server" />  
  15.     <asp:ListBox ID="ddlAutoCompleteSelect" runat="server" Style="width: 350px;"   
  16.         SelectionMode="Multiple">  
  17.     </asp:ListBox>  
  18.     <p>  
  19.         <asp:Label ID="lblSelectedItems" runat="server" Style="word-wrap: break-word; height: 120px;  
  20.             float: left; overflow-y: auto;"></asp:Label>  
  21.     </p>  
  22. </div>  
As you can see that I’m making use of some hidden fields for maintaining data between server and client and there is a ListBox for allowing user with multiselect option or single select option. Hidden fields will basically maintain values used for configuring our bootstrap multiselect control. I’ve provided user with properties against each hidden field with which user (who will be using the control on their page) just need to set to get the multiselect user control in action. These hidden fields are basically going to set / configure our bootstrap multiselect control.

The following is the code for AutoCompleteDdl.aspx.cs file.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class UserControl_AutoCompleteDdl : System.Web.UI.UserControl  
  9. {  
  10.     #region Variable Declaration  
  11.   
  12.     private string _text;  
  13.     private string _value;  
  14.     private List<SelectModel> _dataSource;  
  15.     private ListSelectionMode _selectionMode;  
  16.     private const string _dataTextField = "Text";  
  17.     private const string _dataValueField = "Value";  
  18.  
  19.     #endregion  
  20.  
  21.     #region Properties  
  22.   
  23.     /// <summary>  
  24.     /// Set the placeholder for the DropDownlist.  
  25.     /// </summary>  
  26.     public string NonSelectedText  
  27.     {  
  28.         get { return hdnNonSelectedText.Value; }  
  29.         set { hdnNonSelectedText.Value = value; }  
  30.     }  
  31.   
  32.     /// <summary>  
  33.     /// Get Or Set the value whether select all option should be there or not.  
  34.     /// </summary>  
  35.     public bool IncludeSelectAllOption  
  36.     {  
  37.         get { return Convert.ToBoolean(hdnIncludeSelectAllOption.Value); }  
  38.         set { hdnIncludeSelectAllOption.Value = Convert.ToString(value); }  
  39.     }  
  40.   
  41.     public bool EnableFiltering  
  42.     {  
  43.         get { return Convert.ToBoolean(hdnEnableFiltering.Value); }  
  44.         set { hdnEnableFiltering.Value = Convert.ToString(value); }  
  45.     }  
  46.   
  47.     /// <summary>  
  48.     /// Configure the Type of DropDownlist it is. For e.g. whether single select or multi select.  
  49.     /// </summary>  
  50.     public ListSelectionMode SelectionMode  
  51.     {  
  52.         get { return _selectionMode; }  
  53.         set  
  54.         {  
  55.             _selectionMode = value;  
  56.             if (value == ListSelectionMode.Single)  
  57.             {  
  58.                 ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Single;  
  59.             }  
  60.             else  
  61.             {  
  62.                 ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Multiple;  
  63.             }  
  64.         }  
  65.     }  
  66.   
  67.     /// <summary>  
  68.     /// Set the Width of the Combo  
  69.     /// </summary>  
  70.     public string ButtonWidth  
  71.     {  
  72.         get { return hdnButtonWidth.Value; }  
  73.         set  
  74.         {  
  75.             hdnButtonWidth.Value = value;  
  76.             lblSelectedItems.Style.Add("width", hdnButtonWidth.Value);  
  77.         }  
  78.     }  
  79.   
  80.     /// <summary>  
  81.     /// To set text search enabled  
  82.     /// </summary>   
  83.     public bool Enabled  
  84.     {  
  85.         get { return ddlAutoCompleteSelect.Enabled; }  
  86.         set { ddlAutoCompleteSelect.Enabled = value; }  
  87.     }  
  88.   
  89.     /// <summary>  
  90.     /// To set Data Source for Control  
  91.     /// </summary>  
  92.     public List<SelectModel> DataSource  
  93.     {  
  94.         set  
  95.         {  
  96.             _dataSource = value;  
  97.             ddlAutoCompleteSelect.DataSource = value;  
  98.             ddlAutoCompleteSelect.DataBind();  
  99.         }  
  100.     }  
  101.   
  102.     /// <summary>  
  103.     /// To set Text field  
  104.     /// </summary>  
  105.     public string DataTextField  
  106.     {  
  107.         get { return ddlAutoCompleteSelect.DataTextField; }  
  108.         set { ddlAutoCompleteSelect.DataTextField = _dataTextField; }  
  109.     }  
  110.   
  111.     /// <summary>  
  112.     /// To set Value field  
  113.     /// </summary>  
  114.     public string DataValueField  
  115.     {  
  116.         get { return ddlAutoCompleteSelect.DataValueField; }  
  117.         set { ddlAutoCompleteSelect.DataValueField = _dataValueField; }  
  118.     }  
  119.   
  120.     /// <summary>  
  121.     /// Get the value of the Selected Items from the dropdownlist.  
  122.     /// </summary>  
  123.     public string Value  
  124.     {  
  125.         get  
  126.         {  
  127.             string strValue = string.Empty;  
  128.             return hdnValue.Value;  
  129.         }  
  130.     }  
  131.   
  132.     /// <summary>  
  133.     /// Get the text of the Selected Items from the dropdownlist.  
  134.     /// </summary>  
  135.     public string Text  
  136.     {  
  137.         get  
  138.         {  
  139.             string strText = string.Empty;  
  140.             return hdnText.Value;  
  141.         }  
  142.     }  
  143.   
  144.     public bool DisableIfEmpty  
  145.     {  
  146.         get { return Convert.ToBoolean(hdnDisableIfEmpty.Value); }  
  147.         set { hdnDisableIfEmpty.Value = Convert.ToString(value); }  
  148.     }  
  149.   
  150.     public int MaxHeight  
  151.     {  
  152.         get { return Convert.ToInt32(hdnMaxHeight.Value); }  
  153.         set { hdnMaxHeight.Value = Convert.ToString(value); }  
  154.     }  
  155.   
  156.     public string SelectAllText  
  157.     {  
  158.         get { return hdnSelectAllText.Value; }  
  159.         set { hdnSelectAllText.Value = value; }  
  160.     }  
  161.   
  162.     public bool EnableFilteringIgnoreCase  
  163.     {  
  164.         get { return Convert.ToBoolean(hdnEnableFilteringIgnoreCase.Value); }  
  165.         set { hdnEnableFilteringIgnoreCase.Value = Convert.ToString(value); }  
  166.     }  
  167.   
  168.     public string FilterPlaceholder  
  169.     {  
  170.         get { return hdnFilterPlaceholder.Value; }  
  171.         set { hdnFilterPlaceholder.Value = value; }  
  172.     }  
  173.  
  174.  
  175.     #endregion  
  176.   
  177.     protected void Page_Load(object sender, EventArgs e)  
  178.     {  
  179.   
  180.         try  
  181.         {  
  182.             if (!(string.IsNullOrEmpty(hdnText.Value) && string.IsNullOrEmpty(hdnValue.Value)))  
  183.             {  
  184.                 var selectedItemsText = hdnText.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);  
  185.                 var selectedItemsValue = hdnValue.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);  
  186.   
  187.                 foreach (ListItem item in ddlAutoCompleteSelect.Items)  
  188.                 {  
  189.                     if ((selectedItemsText.Contains(item.Text) && selectedItemsValue.Contains(item.Value)))  
  190.                     {  
  191.                         //selecting the item at server side.  
  192.                         item.Selected = true;  
  193.                     }  
  194.                 }  
  195.             }  
  196.         }  
  197.         catch (Exception ex)  
  198.         {  
  199.             throw ex;  
  200.         }  
  201.   
  202.     }  
  203.   
  204.   
  205.     protected void Page_PreRender(object sender, System.EventArgs e)  
  206.     {  
  207.         try  
  208.         {  
  209.             //Registering the scripts file used by the user control. Alternatively you can also set these files inside your master page or the web page on which you are going to use it.  
  210.             ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapJs", ResolveUrl("~/Scripts/bootstrap.min.js"));  
  211.             ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapMultiSelectJs", ResolveUrl("~/Scripts/bootstrap-multiselect.js"));  
  212.             ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "autoCompleteDdlJs", ResolveUrl("~/Scripts/app/AutoCompleteDdl.js"));  
  213.         }  
  214.         catch (Exception ex)  
  215.         {  
  216.             throw ex;  
  217.         }  
  218.     }  
  219. }  
For configuring multiselect with custom features, here is the script file for the usercontrol.

AutoCompleteDdl.js
  1. //Controls  
  2. var labelId = '';  
  3. var hdnTextId = '';  
  4. var hdnValueId = '';  
  5.   
  6. var ddlCntrl = '';  
  7.   
  8. //Property Values Controls  
  9. var hdnButtonWidth = '';  
  10. var hdnNonSelectedText = '';  
  11. var hdnIncludeSelectAllOption = '';  
  12. var hdnSelectAllText = '';  
  13. var hdnEnableFiltering = '';  
  14. var hdnEnableFilteringIgnoreCase = '';  
  15. var hdnDisableIfEmpty = '';  
  16. var hdnMaxHeight = '';  
  17. var hdnFilterPlaceholder = '';  
  18. var hdnAllSelectedText = '';  
  19.   
  20. //Helper variables  
  21. var selectedItemsText = '';  
  22. var selectedItemsValue = '';  
  23.   
  24. //This function is used for converting C# boolean values to   
  25. //Javascript boolean Values.  
  26. function convertToBoolean(value) {  
  27.     return (value === "true");  
  28. }  
  29.   
  30. //Writing function inside the pageLoad function is for rebinding the events after partial postback.  
  31. function pageLoad() {  
  32.     $(document).ready(function () {  
  33.     //Iterating over the no of select element whose Id contains value of "ddlAutoCompleteSelect". This iteration is necessary because on a single page the user control might can be used on   
  34.         //single times or multiple times. For e.g. if the user contorl is placed inside a gridview row, or if the user control is used on some kind of registration forms.  
  35.   
  36.         $("select[id*='ddlAutoCompleteSelect']").each(function () {  
  37.             ddlCntrl = $(this);  
  38.             divUCParent = $(ddlCntrl).parent();  
  39.   
  40.             //retrieving the Id's of the controls/elements  
  41.             labelId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "lblSelectedItems");  
  42.             hdnTextId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnText");  
  43.             hdnValueId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnValue");  
  44.   
  45.             //retrieving the values of the hidden fields/ property values  
  46.             hdnButtonWidth = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnButtonWidth")).val();  
  47.             hdnNonSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnNonSelectedText")).val();  
  48.             hdnIncludeSelectAllOption = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnIncludeSelectAllOption")).val().toString().toLowerCase());  
  49.             hdnSelectAllText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnSelectAllText")).val();  
  50.             hdnEnableFiltering = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFiltering")).val().toString().toLowerCase());  
  51.             hdnEnableFilteringIgnoreCase = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFilteringIgnoreCase")).val().toString().toLowerCase());  
  52.             hdnDisableIfEmpty = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnDisableIfEmpty")).val().toString().toLowerCase());  
  53.             hdnMaxHeight = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnMaxHeight")).val();  
  54.             hdnFilterPlaceholder = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnFilterPlaceholder")).val();  
  55.             hdnAllSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnAllSelectedText")).val();  
  56.   
  57.   
  58.             selectedItemsText = $("#" + hdnTextId).val();  
  59.             selectedItemsValue = $("#" + hdnValueId).val();  
  60.           
  61.          //configuring the bootstrap multiselect with the custom specification which user has set through the properties.  
  62.             $(this).multiselect({  
  63.                 buttonWidth: hdnButtonWidth,  
  64.                 includeSelectAllOption: hdnIncludeSelectAllOption,  
  65.                 enableFiltering: hdnEnableFiltering,  
  66.                 enableCaseInsensitiveFiltering: hdnEnableFilteringIgnoreCase,  
  67.                 selectAllText: hdnSelectAllText,  
  68.                 nonSelectedText: hdnNonSelectedText,  
  69.                 disableIfEmpty: hdnDisableIfEmpty,  
  70.                 maxHeight: hdnMaxHeight,  
  71.                 filterPlaceholder: hdnFilterPlaceholder,  
  72.                 allSelectedText: hdnAllSelectedText,  
  73.                 buttonText: function (options, select) {  
  74.                     if (options.length === 0) {  
  75.                         return this.nonSelectedText;  
  76.                     }  
  77.                     else if (this.allSelectedText && options.length == $('option', $(select)).length) {  
  78.                         if (this.selectAllNumber) {  
  79.                             return this.allSelectedText + ' (' + options.length + ')';  
  80.                         }  
  81.                         else {  
  82.                             return this.allSelectedText;  
  83.                         }  
  84.                     }  
  85.                     else {  
  86.                         var selected = '';  
  87.                         options.each(function () {  
  88.                             var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();  
  89.                 //forming a list.  
  90.                             selected += "<li>" + label + "</li>";  
  91.                         });  
  92.                         return selected;  
  93.                     }  
  94.                 },  
  95.                 onChange: function (option, checked, select) {  
  96.   
  97.                     var options = this.getSelected();  
  98.   
  99.                     // resetting the updateButtonText event values  
  100.                     if (this.options.enableHTML) {  
  101.                         $('.multiselect .multiselect-selected-text', this.$container).html(hdnNonSelectedText);  
  102.                     }  
  103.                     else {  
  104.                         $('.multiselect .multiselect-selected-text', this.$container).text(hdnNonSelectedText);  
  105.                     }  
  106.                     $('.multiselect', this.$container).attr('title', hdnNonSelectedText);  
  107.   
  108.                     //setting the Label data by forming a unordered list.  
  109.                     $("#" + labelId).html("<ul>" + this.options.buttonText(options, this.$select) + "</ul>");  
  110.   
  111.                     //resetting the variable values to ''  
  112.                     selectedItemsText = '';  
  113.                     selectedItemsValue = '';  
  114.   
  115.                     //iterating over the selected options and appending it to the variables  
  116.                     $.each(options, function (index, option) {  
  117.                         selectedItemsText += option.text + ",";  
  118.                         selectedItemsValue += option.value + ",";  
  119.                     });  
  120.   
  121. selectedItemsText = selectedItemsText.substring(0, selectedItemsText.lastIndexOf(","));  
  122. selectedItemsValue = selectedItemsValue.substring(0, selectedItemsValue.lastIndexOf(","));  
  123.   
  124.                     //finally storing the value to the respective hidden fields.  
  125.                     $("#" + hdnTextId).val(selectedItemsText);  
  126.                     $("#" + hdnValueId).val(selectedItemsValue);  
  127.                 }  
  128.             });  
  129.         });  
  130.       
  131.      //incase of post back get the data from the hiddenField hdnText and hdnValues for restoring it back to the userControl selected values.  
  132.         if (selectedItemsText != '' && selectedItemsValue != '') {  
  133.   
  134.             var selectedTextsArr = selectedItemsText.split(",");  
  135.             var selectedValuesArr = selectedItemsValue.split(",");  
  136.   
  137.             $("#" + divUCParent.attr("id")).children(".btn-group").find("ul.multiselect-container li").each(function () {  
  138.                 var currentLI = $(this);  
  139.                 var anchorElement = $(this).find("a");  
  140.                 if (anchorElement != undefined && anchorElement.length != 0) {  
  141.                     var checkBox = $(anchorElement).children("label[class='checkbox']").children("input[type='checkbox']");  
  142.                     var checkBoxValue = $(checkBox).val();  
  143.   
  144.                     if ($.inArray(checkBoxValue, selectedValuesArr) > -1) {  
  145.                         $(currentLI).addClass("active");  
  146.                         $(checkBox).trigger("change");  
  147.                     }  
  148.                 }  
  149.             });  
  150.         }  
  151.   
  152.     });  
  153. }  
Note:

 

  1. Here in my user control script I’m overriding the method buttonText of bootstrap multiselect to behave in the way my user control requires i.e. form a list of selected Items and display it as an unordered list.

  2. And in the onChange event I’m resetting the default behavior of bootstrap multiselect dropdown. Bootstrap multiselect dropdown has the default behavior of setting the selected items text on the button title. In this event I’m resetting this behavior and displaying the selected items inside Label control below my user control in an unordered list.

  3. If you look at user control .aspx file, for the hidden field I’ve provided some default values. If in case the user while implementing the user control on his page doesn’t pass value for any of the property then the default value for that property from the hidden field would be used or else the new value set by the user would be used to configure the bootstrap multiselect control.

  4. Well here I just took those properties which I’m using to configure my bootstrap control. But apart from these properties there are lot of other properties which you may require to configure your application.

  5. You implementing other properties you need to do the same which we did. By creating a property in the .apsx.cs file and by adding a new hidden field in the .aspx file.

  6. Writing code in your user control script file for reading the value of that hidden field.

Now our user control is ready and we need to take it on our page to make it working. For this I’ve added a new webpage in my application and I’ve registered the user control on my page. The following is my .aspx code for the web page.

Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Src="UserControl/AutoCompleteDdl.ascx" TagName="AutoCompleteDdl" TagPrefix="uc1" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title>Bootstrap Multiselect</title>  
  10.     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />  
  11.     <link rel="stylesheet" type="text/css" href="Style/bootstrap-multiselect.css" />  
  12.     <script src="Scripts/jquery-1.9.1.min.js"></script>  
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
  17.         <div class="container">  
  18.             <div class="row">  
  19.                 <div class="col-md-12">  
  20.                     <h3>Bootstrap MultiSelect Dropdownlist</h3>  
  21.                     <asp:UpdatePanel ID="udpMain" runat="server">  
  22.                         <ContentTemplate>  
  23.   
  24.                             <uc1:AutoCompleteDdl ID="ddlAutoComplete" runat="server" IncludeSelectAllOption="false"  
  25.                                 ButtonWidth="320px" SelectAllText="All" NonSelectedText="--Select Option--" MaxHeight="400"  
  26.                                 EnableFiltering="true" FilterPlaceholder="Search For Something..." SelectForm="Multiple"  
  27.                                 PlaceHolder="Select a Value" />  
  28.                             <p>  
  29.                                 <asp:Button ID="btnGet" runat="server" Text="Get Data" OnClick="btnGet_Click" />  
  30.                             </p>  
  31.                             <p>  
  32.                                 <asp:Label ID="lblData" runat="server" />  
  33.                             </p>  
  34.                         </ContentTemplate>  
  35.                     </asp:UpdatePanel>  
  36.                 </div>  
  37.             </div>  
  38.         </div>  
  39.     </form>  
  40. </body>  
  41. </html>  
Note:

 

  1. Here I’ve added the user control on my page.

  2. I’m setting the required ButtonWidth, whether the dropdownlist should enable filtration or not and other such bootstrap properties with the help of properties defined inside the user control.

Default.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     List<SelectModel> lstData = new List<SelectModel>();  
  11.   
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!IsPostBack)  
  15.         {  
  16.             for (int i = 0; i < 100; i++)  
  17.             {  
  18.                 lstData.Add(new SelectModel() { Value = "Item " + i, Text = "Item " + i });  
  19.             }  
  20.             ddlAutoComplete.DataValueField = "Value";  
  21.             ddlAutoComplete.DataTextField = "Text";  
  22.             //Setting the data source for the dropdownlist  
  23.             ddlAutoComplete.DataSource = lstData;  
  24.         }  
  25.     }  
  26.     protected void btnGet_Click(object sender, EventArgs e)  
  27.     {  
  28.         string value = ddlAutoComplete.Value;  
  29.         string text = ddlAutoComplete.Text;  
  30.   
  31.         lblData.Text = "<b>Value: </b>" + value + "<br/><b>Text: </b>" + text;  
  32.   
  33.     }  
  34. }  
Now just run the application and you’ll see the following output.

output

Select some items from the dropdownlist and you’ll find those selected items below our dropdownlist in an unordered list.

dropdownlist

You may also try filtering the data by typing something in the “Search For Something” textbox.

Search For Something

While entering the value in the filter textbox make sure you do it in proper case since we’ve set the “EnableFilteringIgnoreCase” property value to its default value by not setting it inside the default.aspx page.

EnableFilteringIgnoreCase

Now the point is of maintaining the data between postback. For testing this we’ve added a button control “Get Data” on the page and a label control which will display the selected items text and value. Just click on the Get Data button and after postback here is the output.

Get Data button

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs