Applying Styles to ASP.Net MVC ViewData objects.

Question

I have the following code in a MVC User Control (the field names have been changed to protect the innocent):

<%=ViewData.Model.foo%>

<%=ViewData.Model.Bar%>

<%=ViewData.Model.Widget%>

<%=ViewData.Model.Thingy%>

<%=ViewData.Model.Address %>

<%=ViewData.Model.AlternateAddress %>

<%=ViewData.Model.CrossStreets %>

<%=ViewData.Model.SchoolName %>

These are to be displayed in a list beneath a header on the page that calls this control.

Given that I blow at CSS, how do I apply tags to the header and these fields so that everything lines up properly?

Many thanks,

KevDog

Update: The goal is to have the fields in the user control underneath and aligned left beneath the labels in the header. My first problem is adding a class to the ViewData items above. Do they go inside of other tags or are the attributes applied inside the tag itself? I've tried the latter and it doesn't seem the correct approach.

Answer 1

You may want to look at the 960 Grid System. It will still require some CSS but it will make your life a lot easier. There are some examples / tutorials on the site.

Answer 2

It appears, from your sample code, but you are just directly outputting string properties into the web page. In this case, you would need to surround the output string with a span or a div in order to assign it a class, like this:

<div class="foo"><%=ViewData.Model.foo %></div>

On the other hand, you might, elsewhere, use HTML helpers, and in this case, you can pass the class to the helper method:

<%= Html.TextBox("foo", ViewData.Model.Foo, new { @class="foo" })%>