ASP.NET MVC Controls & CSS

Question

Hi everyone,

I am trying to apply css on my html.dropdownlist with a regular html select list css. Can anyway one show me how to go about doing this & where am I going wrong with this

this is what i have right now..

<div id="container">
   Months &nbsp; <%=Html.DropDownList("dllMonths", new SelectList(new List<string>() { "January", 
    "Feburary", "March", "April", "June", "July", "August", "September", "October", "November", "December"}, ViewData["Month"]), new { onchange = "this.form.submit();" })%>

    Events &nbsp;<%=Html.DropDownList("dllEvents", new SelectList(new List<string>() { "Camp Events", 
    "Weekly Events", "All Events"}, ViewData["Event"]), new { onchange = "this.form.submit();" })%>

</div>

and this is the css that i am trying to apply http://www.emblematiq.com/projects/niceforms/demo/

Anyway help would be great.

Owais

Answer 1

The part of your code where you use an anonymous object to set html properties, change it to this:

new { onchange = "this.form.submit();", @class="selectlist" }

The @ symbol allows you to use a property name that is a reserved word. You can also add style="" if you want inline styling (but you probably don't).

Also, you don't need to new up SelectList, there's an overload on Html.DropDownList() that lets you pass those same values.

Answer 2

Seems to me all you need is to include in the head of your site master. These two entries:-

<script language="javascript" type="text/javascript" src="../../Scripts/niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../Content/niceforms-default.css" />

Then on the form element in which your code resides place the attribute class="niceform".

Of course this assumes you are using the standard content folder for css and Scripts folder for JS files.

I can't really see a specific MVC issue here except if you are using a Html.BeginForm.
In which case you need:-

Html.BeginForm("action", "controller", FormMethod.Post, new {@class="niceform"})

Answer 3

hey if anyone needs to know for future reference .. this is how i did it..

%using (Html.BeginForm("Calendar", "Calendar", FormMethod.Post, new { @class = "niceform" }))
  { %>
<div id="container">
   Months &nbsp; <%=Html.DropDownList("dllMonths", new SelectList(new List<string>() { "January", 
    "Feburary", "March", "April", "June", "July", "August", "September", "October", "November", "December"}, ViewData["Month"]), new { onchange = "this.form.submit();", @class = "width_320" })%>

    Events &nbsp;<%=Html.DropDownList("dllEvents", new SelectList(new List<string>() { "Camp Events", 
    "Weekly Events", "All Events"}, ViewData["Event"]), new { onchange = "this.form.submit();", @class = "width_320" })%>
    &nbsp;<%=Html.SubmitImage("SearchAll", "~/imagens/imgsearch.jpg")%>
</div>

Answer 4

Please refer to this article, how to apply css class to MVC dropdownlist:

http://www.altafkhatri.com/Technical/Assign_css_class_to_MVC_dropdownlist