How to add Class to SelectListItem in ASP.NET MVC5 Razor Syntax?

Question

I created a select input field using the Razor. Given below is the code:

@Html.DropDownList("selectOption", new[] {
                        new SelectListItem()
                        {
                            Text ="Option 1" , Value = "1"
                        },
                        new SelectListItem()
                        {
                            Text = "Option 2" , Value = "2"
                        },
                        new SelectListItem()
                        {
                            Text = "Option 3" , Value = "3"
                        }
                    }, 
                    "Choose an Option...", 
                    new {@class = "form-control" })

I am aware of adding custom class to select input field but how do I add custom class to each of the select options? Is it even possible using razor syntax?

I can get the results by using jQuery but I want to know whether there exists method using only razor.

No it is not possible using `@Html.DropDownList()` or `@Html.DropDownListFor()` or any other inbuilt method (you would need to create your own extension method) — , Jul 09 '18 at 07:42
You can inspect the [source code](https://github.com/aspnet/AspNetWebStack/blob/master/src/System.Web.Mvc/Html/SelectExtensions.cs) to see how its done. But what is the point of adding a class to a ` — , Jul 09 '18 at 07:45
@user3559349 Options can indeed be styled. If I give a class to an option that sets `color:yellow`, that option's text is yellow. What you can't do is put markup in the text. — Auspex, Apr 27 '23 at 10:28

musefan · Answer 1 · 2018-07-09T07:53:42.417

0

You can't do it with the built in methods. You could create your own extension method or helper, however it would be much easier to just create the control yourself using HTML:

<select class="form-control" id="selectOption" name="selectOption">
    <option value="">Choose an Option...</option>
    <option class="some-class-1" value="1">Option 1</option>
    <option class="some-class-2" value="2">Option 2</option>
    <option class="some-class-3" value="3">Option 3</option>
</select>

It even makes it more readable (in my opinion). You shouldn't feel like you have to use the helpers for everything.

edited Jul 09 '18 at 07:53

answered Jul 09 '18 at 07:46

musefan

47,875
21
135
185

Except that does not give 2-way model binding, or include the `data-val-*` attributes for client side validation – Jul 09 '18 at 07:58
@StephenMuecke: What model? Also, I am pretty sure it will bind during form submission, and you can easily add any data attribute you need – musefan Jul 09 '18 at 08:00
What ever model OP wants to use :) – Jul 09 '18 at 08:02
@StephenMuecke: If the OP would like to provide a model then I will happily update my answer to make use of it – musefan Jul 09 '18 at 08:12
The actual model is irrelevant to my comment :) – Jul 09 '18 at 08:24
@StephenMuecke: Well obviously a model can be defined however you want, but if the OP is using one then it would be pretty important for me to know how they intend to use it in order to give an accurate answer. However, as it stands there is no model, so I can't give a model based answer – musefan Jul 09 '18 at 08:30
How do you know there is no model? And in order to generate property 2-way model binding and client side validation, you would need to 50 or so lines of code in the view – Jul 09 '18 at 08:33
@StephenMuecke: I know there is no model because when I scroll up and read the question I can clearly see that the OP is not using one in their example. I can only work with what the OP provides. As you said yourself, the model can be anything, so there are too many possibilities for me to just *guess* how the OP would want to use a model (if at all). And there is no need to write 50 lines of code for anything – musefan Jul 09 '18 at 08:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174637/discussion-between-stephen-muecke-and-musefan). – Jul 09 '18 at 08:38
@StephenMuecke: I don't want a discussion about it. If you have a better answer then feel free to post one. If the OP needs me to provide any additional information then they can comment and ask for it – musefan Jul 09 '18 at 08:40
The point is that using the tag helpers automatically gives you field validation and `name` attributes that will work with .Net's model binding. What the model _is_, is irrelevant. If you need those, you need to create your own tag helper, based on the original. – Auspex Apr 27 '23 at 10:32

How to add Class to SelectListItem in ASP.NET MVC5 Razor Syntax?

1 Answers1