DropDownlist Bootstrap Style in ASP.NET C#

In this article, I will show you, how to add checkBoxList in DropDownList as item. I mean to say when you drop it then display item in the form of CheckBox list. You can select multiple items from CheckBox list. Selected Items show in the DropDownList header. If you want to design this types of DropDownList then add these files into your head section of page. By using these files, we can convert our ListBox into DropDownList with CheckBox Item. I will Give you complete example of Bootstrap Dropdown Menu.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
        $(function () {
            $('[id*=list1]').multiselect({

                includeSelectAllOption:true

            });
        })


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ListBox ID="list1" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="Apple" Value="1" />
         <asp:ListItem Text="mango" Value="2" />
         <asp:ListItem Text="Grapes" Value="3" />
         <asp:ListItem Text="Orange" Value="4" />
         <asp:ListItem Text="Pea" Value="5" />





    </asp:ListBox>
        <br />
    </div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="GetItem" />
    </form>
</body>
</html>

Code Behind File

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default10 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string msg = string.Empty;
        foreach (ListItem item in list1.Items)
        {
            if (item.Selected)
            {
                msg += item.Text + " " + item.Value + "\\n";
            }
        }
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + msg + "');", true);
    }
}

DropDownlist Bootstrap Style in ASP.NET C# DropDownlist Bootstrap Style in ASP.NET C# Reviewed by Jacob Lefore on January 03, 2016 Rating: 5

No comments