Dropdownlist Using BootStrap in ASP.Net


In this blog, I’m explaining how to make dropdownlist using bootstrap in asp.net.

Step 1.

             Create a empty website and add new item then choose web form click Add button

Step 2.

            Open toolbox drag a dropdownlist drop in default.aspx page

Step 3.

<script src="JS/jquery.min.js"></script>

<script src="JS/bootstrap-select.js"></script>

 

<script src="JS/bootstrap.min.js"></script>

<link href="Bootstrap/bootstrap.css" rel="stylesheet" />

<link href="Bootstrap/bootstrap-select.css" rel="stylesheet" />

 

<link href="Bootstrap/bootstrap.min.css" rel="stylesheet" />

 

              Download and add the above three javascript file and three .css file into your projects

             because it’s mandatory for using the bootstrap libraries and methods.

              Before using bootstrap file dropdownlist look like this :


Use this method :

<script type="text/javascript">

    $(document).ready(function () {

        $(".selectpicker").selectpicker();

    });

</script>

Code :

<asp:DropDownList ID="DropDownList1" CssClass="selectpicker" runat="server">

     <asp:ListItem>Allahabad</asp:ListItem>

      <asp:ListItem>Kanpur</asp:ListItem>

      <asp:ListItem>Rewa</asp:ListItem>

      <asp:ListItem>Bhopal</asp:ListItem>

      <asp:ListItem>Indore</asp:ListItem>

      <asp:ListItem>Jabalpur</asp:ListItem>

   </asp:DropDownList>

After using bootstrap file and method dropdownlist look like this :



 

1.      Dropdownlist with option group like this:

Code :

                 <select class="selectpicker">

                      <option>---Select---</option>

                      <optgroup label="Uttar Pradesh">

                          <option>Allahabad</option>

                          <option>Kanpur</option>

                          <option>Lucknow</option>

                      </optgroup>

                      <optgroup label="Madhya Pradesh">

                          <option>Rewa</option>

                          <option>Indore</option>

                          <option>Jabalpur</option>

                          <option>Bhopal</option>

                      </optgroup>

                      <optgroup label="Other">

                          <option>Delhi</option>

                          <option>Mumbai</option>

                      </optgroup>

                  </select>

1.      Dropdownlist with multi select :

 

Code :

    <asp:DropDownList ID="DropDownList2" CssClass="selectpicker" runat="server" multiple>

           <asp:ListItem>Allahabad</asp:ListItem>

           <asp:ListItem>Kanpur</asp:ListItem>

           <asp:ListItem>Rewa</asp:ListItem>

           <asp:ListItem>Bhopal</asp:ListItem>

           <asp:ListItem>Indore</asp:ListItem>

           <asp:ListItem>Jabalpur</asp:ListItem>

     </asp:DropDownList>

1.      Dropdownlist with different  style like this :

Code :

1.       data-style="btn-primary"

2.       data-style="btn-info"

3.       data-style="btn-success"

4.       data-style="btn-warning"

5.       data-style="btn-danger"

6.       data-style="btn-inverse"

<asp:DropDownList ID="DropDownList3" CssClass="selectpicker" data-style="btn-primary" runat="server">

         <asp:ListItem>Allahabad</asp:ListItem>

         <asp:ListItem>Kanpur</asp:ListItem>

         <asp:ListItem>Rewa</asp:ListItem>

         <asp:ListItem>Bhopal</asp:ListItem>

         <asp:ListItem>Indore</asp:ListItem>

         <asp:ListItem>Jabalpur</asp:ListItem>

</asp:DropDownList>

1.      DropDownlist : To Show number of selected items from total number of items


 

Code :

<asp:DropDownList ID="DropDownList9" CssClass="selectpicker" multiple data-selected-text-format="count" runat="server">

        <asp:ListItem>Allahabad</asp:ListItem>

        <asp:ListItem>Kanpur</asp:ListItem>

        <asp:ListItem>Rewa</asp:ListItem>

        <asp:ListItem>Bhopal</asp:ListItem>

        <asp:ListItem>Indore</asp:ListItem>

        <asp:ListItem>Jabalpur</asp:ListItem>

   </asp:DropDownList>


in my next post i'll explain about Download, Install and Setup environment for nodejs in Windows OS 64 bit

  1. Hi Kamalakar,

     

      Thanks for the great post. I am able to see the dropdownlist with selectPicker, but the issue I am facing is "I am not able to get multiple selected values of dropdownlist in C# code behind". Can you please let me know how can we achieve this?

    Thanks in Advance.

    Regards,

    Shashishekar B S

  1. Bostrab css not working properly. how to download it css and js scripts

Leave Comment