In this article I will explain with an example, how to implement Bootstrap style DropDownList in ASP.Net using the jQuery Bootstrap Multi-Select Plugin.
The Bootstrap style DropDownList will have Multiple Select (MultiSelect) options i.e. user can select multiple items (options) with the help of CheckBoxes and hence instead of DropDownList, ListBox control will be used.
Download Bootstrap and jQuery Bootstrap Multi-Select Plugin
The download locations are as follows.
Bootstrap
jQuery BootStrap Multi-Select Plugin
You will need to download the plugin files from the following location.
The complete documentation can be read on the following page.
HTML Markup
The HTML Markup consists of an ASP.Net ListBox and a Button control.
Note: It is very important to set the SelectionMode to Multiple otherwise instead of CheckBoxes you will see RadioButtons after the plugin is applied.
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
Applying the jQuery Bootstrap Multi-Select Plugin to the ListBox control
The very first thing you will need to do is to inherit the following JavaScript and CSS files.
1. jQuery JS file
2. Bootstrap JavaScript and CSS files.
3. jQuery BootStrap Multi-Select Plugin JavaScript and CSS files.
Once all the files are inherited then we need to simply apply the plugin to the ListBox inside the jQuery document ready event handler.
The plugin supports various options, here I am making use of includeSelectAllOption which adds a Select all CheckBox when specified and set to True.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
</script>
![Bootstrap style DropDownList example in ASP.Net]()
Fetching the Text and Value of Selected Items on Server Side on Button Click
Following is the Button click event handler, inside which a loop is executed over the ListBox Items and its Selected property is checked. If it returns True then the Item was selected and if False then the Item was not selected.
C#
protected void Submit(object sender, EventArgs e)
{
string message = "";
foreach (ListItem item in lstFruits.Items)
{
if (item.Selected)
{
message += item.Text + " " + item.Value + "\\n";
}
}
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
Dim message As String = ""
For Each item As ListItem In lstFruits.Items
If item.Selected Then
message += item.Text + " " + item.Value + "\n"
End If
Next
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
![Bootstrap style DropDownList example in ASP.Net]()
Demo
Downloads
