I've been onto razor lately, and I must admit I am new to this approach. Using the tutorial working with data set I wanted to populate the data from database to the table with alternating row style applied. The output would be same as below. Doing it manually is quite easy. But, what if our data is coming from the database? How can we achieve this? There are quite a number of ways to achieved it view it here. But I wanted to have a simple approach and that is using CSS. Fortunately we can do it in pure CSS
#customers tr.alt:nth-child(even) td
{
color:#000000;
background-color:#EAF2D3;
}
Modifying the code in tutorial with code below we can attain our objective of having alternating row style in table.
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt:nth-child(even) td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
<body>
<a href="~/InsertProducts">Insert Products</a>
<a href="~/EditProducts">Edit Products</a>
<a href="~/ListProductsForDelete">Delete Products</a>
<h1>Small Bakery Products</h1>
<table id ="customers">
<thead>
<tr>
<th>ID</th>
<th>Product</th>
<th >Description</th>
<th >Product Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach(var row in db.Query(selectQueryString)){
<tr class="alt">
<td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
<td><a href="@Href("~/DeleteProduct", row.Id)">Delete</a></td>
<td>@row.Name</td>
<td>@row.Description</td>
<td>@row.Price</td>
</tr>
}
</tbody>
</table>
<br />
</body>
| ID | Product | Product Description | Prices |
|---|---|---|---|
| 1 | Carrot Cake | A scrumptious mini-carrot cake encrusted with sliced almonds | 8.99 |
| 2 | Lemon Tart | A delicious lemon tart with fresh meringue cooked to perfection | 9.99 |
| 3 | Cupcakes | Delectable vanilla and chocolate cupcakes | 5.99 |
| 4 | Bread | Fresh baked French-style bread | 1.49 |
| 5 | Pear Tart | A glazed pear tart topped with sliced almonds and a dash of cinnamon | 5.99 |
| 6 | Chocolate Cake | Rich chocolate frosting cover this chocolate lover’s dream. | 8.99 |
| 7 | |||
| 8 | |||
| 9 | |||
| 10 |
