Creating the Home Page for a Simple Storefront with LINQ - A New Style
(Page 3 of 4 )
As mentioned earlier, though, the layout of the items is a bit ugly, and the items don't come with any sort of a description beyond a picture. So, let's give the list of items a new style, and let's add more information.
One of the things we'll want to display is the product's category, but to get the name of the category, we need access to the ProductCategory table. Open up AdventureWorks.dbml and drag the ProductCategory table on to the Designer:
Visual Studio associates the tables, and we now have access to the name of the product's category.
Let's add a few classes to our stylesheet:
div.itemBoxSmall
{
background-color: #F0FFFF; /* Azure */
border: solid 1px Orange;
margin: 5px auto 0px auto;
padding: 5px;
text-align: left;
width: 40%;
}
img.productImage
{
border: solid 1px Black;
float: left;
margin-right: 10px;
}
a.productLink
{
color: Black;
font-weight: bold;
}
And now let's complete the style by recreating the ItemTemplate to show the new style, as well as a few extra fields:
<ItemTemplate>
<div class="itemBoxSmall">
<img src="ProductPicture.aspx?id=<%#Eval("ProductID") %>"
class="productImage" alt="Image of <%#Eval("Name") %>" />
<a href="Product.aspx?id=<%#Eval("ProductID") %>" class="productLink">
<%#Eval("Name") %>
</a>
<br />
Category: <%#Eval("ProductCategory.Name") %><br />
Color: <%#Eval("Color") %><br />
List Price: <%#Eval("ListPrice", "{0:C}") %><br />
</div>
</ItemTemplate>
There, now the list of latest items looks a bit more presentable, and the product's category, color and list price are all displayed, as well as the name of the product. Of course, feel free to add more to it if that suits you.
Next: Preparing to Build the Product Page >>
More .NET Articles
More By Peyton McCullough
/ 4 
