Development Experience

Tuesday, March 10, 2015

Bootstrap Html.DropDownListFor in MVC 5 (razor)

It was not easy apply bootstrap to Asp.Net Mvc DropDownList.
I found this bootstrap-select project on git hub which is a life saver. (Thank you guys :) )


Implementation
Add Js and Css codes from CDN
 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>  
 <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />  
JQuery Part
 <script type="text/javascript">  
   $(document).ready(function () {  
     console.log("ready!");  
     Implement_Dropdownlist();  
     $('.selectpicker').selectpicker({  
       style: 'btn-info',  
       size: 4  
     });  
   });  
   </script>  
Razor Part
  @Html.DropDownListFor(m =>; m.Country, new SelectList(Model.myList), new { @class = "selectpicker" })  

3 comments: