blog

Home / DeveloperSection / Blogs / Dropdownlist Using BootStrap in ASP.Net

Dropdownlist Using BootStrap in ASP.Net

Anonymous User119149 25-Jan-2014

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.

<scriptsrc="JS/jquery.min.js"></script>
<scriptsrc="JS/bootstrap-select.js"></script>
 
<scriptsrc="JS/bootstrap.min.js"></script>
<linkhref="Bootstrap/bootstrap.css"rel="stylesheet"/>
<linkhref="Bootstrap/bootstrap-select.css"rel="stylesheet"/>
 
<linkhref="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 :


Dropdownlist Using BootStrap in ASP.Net

Use this method :

<scripttype="text/javascript">
    $(document).ready(function () {
        $(".selectpicker").selectpicker();
    });
</script>

Code :

<asp:DropDownListID="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 :


Dropdownlist Using BootStrap in ASP.Net 

1.      Dropdownlist with option group like this:

Dropdownlist Using BootStrap in ASP.Net

Code :

 <selectclass="selectpicker">
    <option>---Select---</option>
    <optgrouplabel="Uttar Pradesh">
  <option>Allahabad</option>
   <option>Kanpur</option>
     <option>Lucknow</option>
  </optgroup>
    <optgrouplabel="Madhya Pradesh">
       <option>Rewa</option>
       <option>Indore</option>
  <option>Jabalpur</option>
        <option>Bhopal</option>
          </optgroup>
       <optgrouplabel="Other">
      <option>Delhi</option>
        <option>Mumbai</option>
      </optgroup>
     </select>

1.      Dropdownlist with multi select :

Dropdownlist Using BootStrap in ASP.Net

 

Code :

    <asp:DropDownListID="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 :

Dropdownlist Using BootStrap in ASP.Net

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:DropDownListID="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

 Dropdownlist Using BootStrap in ASP.Net

Code :

<asp:DropDownListID="DropDownList9"CssClass="selectpicker"multipledata-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 aboutDownload, Install and Setup environment for nodejs in Windows OS 64 bit


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By