How can i get a dropdownbox working with a css class?

Question

I have a SelectList in the controller that its value passed to the view by ViewData to the view as below:

List<string> available = new List<string>();
            available.AddRange(product.AvailableSizes.Split(',').ToList());
            ViewData["availablesize"] = new SelectList(available);

in the view i have a drop down box which display the values of the variable availablesize as below:

@Html.DropDownList("availablesize")

for some reasons i need to display this drop down box in the following format but unable to handle this issue any suggestion?

<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
<select class="form-control input-sm">
 <option>L</option>
 <option>M</option>
 <option>XL</option>
</select>
</div>
</div>

Wanna pass the dropdown box into those divs having different css classes for styling the dropdownbox @Reddy — Coding Freak, Apr 14 '16 at 09:30
Are you trying to clone the dropdown and create multiple instances of the same element? — Rajshekar Reddy, Apr 14 '16 at 09:34
Unable to understand your issue. Can you give an example or elaborate more? — Sometimes Code, Apr 14 '16 at 09:38
Not clear what you are asking: do you want to style each option differently in the dropdownlist? For example, each option has its own color? — chiapa, Apr 14 '16 at 10:02
You can't do that just by using @Html.DropDownList. Your best bet is creating a Custom helper method in the View where you can pass the dropdownlist and it renders the resulted html. `@helper renderDropDown(SelectList items) {Your html with your dropdown}` — Sometimes Code, Apr 14 '16 at 10:04

Rajshekar Reddy · Accepted Answer · 2016-04-14T10:16:23.547

1

This code must work, you can give css attributes as well in the razor syntax.

Also Make sure your ViewData["availablesize"] has IEnumerable<SelectListItem>

Change your controller code to below

ViewData["availablesize"] = new SelectList((IEnumerable)available);

in Views syntax must be like below

<div class="product-page-options">
 <div class="pull-left">
 <label class="control-label">Size:</label>      
    @Html.DropDownList("availablesize", ViewData["availablesize"], new {@class = "form-control input-sm "})
 </div>
</div>

This is the syntax that you require

edited Apr 14 '16 at 10:16

answered Apr 14 '16 at 10:04

Rajshekar Reddy

18,647
3
40
59

doesn't work, gives an error has some invalid arguments. – Coding Freak Apr 14 '16 at 10:12
that means you are not providing `IEnumerable` in your `ViewData["availablesize"]` .. you must change your controller logic to fill the ViewData with this datatype – Rajshekar Reddy Apr 14 '16 at 10:14
@NaserDostdar updated my answer, also look here http://stackoverflow.com/a/12091082/2592042 this might be helpful – Rajshekar Reddy Apr 14 '16 at 10:16
I Still get this error CS1928: 'System.Web.Mvc.HtmlHelper' does not contain a definition for 'DropDownList' and the best extension method overload 'System.Web.Mvc.Html.SelectExtensions.DropDownList(System.Web.Mvc.HtmlHelper, string, System.Collections.Generic.IEnumerable, object)' has some invalid arguments – Coding Freak Apr 14 '16 at 11:11

score 0 · Answer 2 · answered Apr 14 '16 at 10:12

If you want to style each option differently, depending on the values passed, you can use some JQuery for that:

$(document).ready(function() {
  $("#availablesize option").each(function() {
    if ($(this).val() != '') {
      switch ($(this).val()) {
       case 'S':
         $(this).css('background-color', 'lightgreen');
          break;
        case 'M':
         $(this).css('background-color', 'green');
          break;
        case 'L':
         $(this).css('background-color', 'orange');
          break;
        case 'XL':
         $(this).css('background-color', 'red');
          break;
        default:
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="availablesize">
  <option value="">- select size -</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

Fiddle

don't wanna style each option i just want to pass drop down box values into a specific format that is in my question — Coding Freak, Apr 14 '16 at 10:14
You mean the specific HTML format? With those exact divs and other elements? — chiapa, Apr 14 '16 at 10:17

How can i get a dropdownbox working with a css class?

2 Answers2