devforall
devforall

Reputation: 7335

ASP.NET MVC Controls & CSS

I am trying to apply css on my html.dropdownlist with a regular html select list css. Can anyone 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/

Upvotes: 2

Views: 5372

Answers (4)

sarsnake
sarsnake

Reputation: 27733

 @Html.DropDownList("ddl-id", Model.SomeListForDDl, new {@class="className"})

Upvotes: 0

devforall
devforall

Reputation: 7335

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>

Upvotes: 1

AnthonyWJones
AnthonyWJones

Reputation: 189555

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"})

Upvotes: 1

John Sheehan
John Sheehan

Reputation: 78152

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.

Upvotes: 2

Related Questions