In this article I will explain how to implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net using jQuery Bootstrap Multi-Select Plugin.
In order to implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net we will need to make use of ListBox control and apply the jQuery Bootstrap Multi-Select Plugin to it.
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>
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);
}
Nguồn từ: http://www.aspsnippets.com/
Download: http://www.aspsnippets.com/DownloadFile.aspx?File=a3989c92-6dd1-4e0f-b05e-2bd088ae5962.zip#center