MVC Scaffolding: change table to other view - html

Question

I am creating an MVC application. When you use scaffolding templates with your Controllers the Index page is constructed using a table and a foreach which creates a row and the appropriate cells for each instance of the Model in the collection you provide like so:
#model IEnumerable<PoliticiOnline.DTO.Question>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.GeneralQuestion)
</th>
<th>
#Html.DisplayNameFor(model => model.Explanation)
</th>
<th>
#Html.DisplayNameFor(model => model.IsTemplate)
</th>
<th>
#Html.DisplayNameFor(model => model.DateSubmitted)
</th>
<th>
#Html.DisplayNameFor(model => model.JudgementDate)
</th>
<th>
#Html.DisplayNameFor(model => model.FbShares)
</th>
<th>
#Html.DisplayNameFor(model => model.FbLikes)
</th>
<th>
#Html.DisplayNameFor(model => model.TwitterShares)
</th>
<th>
#Html.DisplayNameFor(model => model.SiteVotes)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.GeneralQuestion)
</td>
<td>
#Html.DisplayFor(modelItem => item.Explanation)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsTemplate)
</td>
<td>
#Html.DisplayFor(modelItem => item.DateSubmitted)
</td>
<td>
#Html.DisplayFor(modelItem => item.JudgementDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.FbShares)
</td>
<td>
#Html.DisplayFor(modelItem => item.FbLikes)
</td>
<td>
#Html.DisplayFor(modelItem => item.TwitterShares)
</td>
<td>
#Html.DisplayFor(modelItem => item.SiteVotes)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.QuestionId }) |
#Html.ActionLink("Details", "Details", new { id=item.QuestionId }) |
#Html.ActionLink("Delete", "Delete", new { id=item.QuestionId })
</td>
</tr>
}
</table>
I would like to change this view to something like a listview which contains like a quick look-card for each instance. How would I go about creating this using html and CSS? Basically I would like to create my own structure and present the user with a list with a brief view of each model instance (they can of course see the detail on the detail page).
I hope my explanation was clear, it's very difficult to explain what I mean. You could compare it to defining custom controls, like creating an alternate design for each item in a listview. Hope someone can help me!
EDIT
I actually mean something like the homepage of Stackoverflow. I want to achieve the same sort of structure. I'd like a list with short information of each question. I took a look at the source of Stackoverflow and the CSS but can't really find how to do it. How could you define number of votes goes in the left, title in the middle and author info in bottom right?

Answer 1

I think this is a pretty broad html question and you will probably need to look at some html and css tutorial to really get you going. Your code COULD be as simple as this
#model IEnumerable<PoliticiOnline.DTO.Question>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#foreach (var item in Model) {
<div style="border: 1px solid black;">
#Html.DisplayFor(modelItem => item.GeneralQuestion ) <br />
#Html.DisplayFor(modelItem => item.Explanation )
</div>
}
Which will produce a bunch of ugly boxes with some text in it. You will really need to understand css to make it look nicer than that. I recommend reading the "Learn Html" and "Learn CSS" sections of http://www.w3schools.com/ .