Beginning ASP.NET 4.5 in CSharp and VB Opsylum

534 x CHAPTER 14 LINQ AND THE ADO.NET ENTITY FRAMEWORK
When the ListView control needs to display its data, it creates an item based on the
for each data item in the data source. In this example, each data item is a strongly typed Picture
object, which provides access to properties such as ToolTip and Description:
...
ToolTip:
...
With this code in place, each item in the data source is presented as a series of labels that display relevant
properties of the picture. Eval(PropertyName) is used to retrieve the requested value from the
object, which is then displayed as the Label control’s text. Note that at this stage, the
only displays data about the picture. You see how to upload and display real pictures later.
Note the CommandName of the Button control in the ItemTemplate. It’s set to Delete, which turns this button
into a true Delete button. When you click it, the ListView figures out what picture you clicked the button
for and then instructs the EntityDataSource control to delete the associated picture from the database.
The code you added to the theme’s CSS files displays the items in an organized way. By setting the
class attribute of the control to ItemContainer, the following CSS is applied to that list:
.ItemContainer
{
width: 600px;
list-style-type: none;
clear: both;
}
The first property sets the entire width of the list to 600 pixels and the second declaration removes the
bullet from the items in the list. Each item in the list is then displayed within a element, to which
the following CSS is applied:
.ItemContainer li
{
height: 300px;
width: 200px;
float: left;
}
Each item gets a forced width of 200 pixels. The float property tells the elements to float next
to each other. Within the parent area of 600 pixels you can fit three elements of 200 pixels each,
causing the fourth and further elements to be placed on their own line. This is a great alternative to presenting
data with HTML tables, which generally needs a lot more markup to achieve the same effect.
Finally, each image within the element gets a forced width of 180 pixels and 10 pixels of margin at the
top and bottom, 20 pixels on the right (to create some room between the images), and none at the left side:
.ItemContainer li img
{