03.11.2016 Views

Beginning ASP.NET 4.5 in CSharp and VB Opsylum

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Us<strong>in</strong>g Server Controls with LINQ Queries x 547<br />

<br />

<br />

<br />

<br />

12. Modify the code <strong>in</strong> the ItemTemplate so it ends up like this:<br />

<br />

<br />

<br />

<br />

<br />

<br />

This creates an Image control with its ImageUrl <strong>and</strong> ToolTip properties bound to the correspond<strong>in</strong>g<br />

properties of the Picture object that you’re b<strong>in</strong>d<strong>in</strong>g to. The ToolTip appears when<br />

you hover your mouse over the image <strong>in</strong> the browser. Below the image, a simple Label control<br />

displays the Description of the image. You don’t need the other properties that were <strong>in</strong>itially<br />

def<strong>in</strong>ed <strong>in</strong> the template for this exercise.<br />

13. Next, wrap the entire code <strong>in</strong> the cpMa<strong>in</strong>Content content block <strong>in</strong> an UpdatePanel with a<br />

ContentTemplate element to avoid page flicker when pag<strong>in</strong>g the list of pictures, or when choos<strong>in</strong>g<br />

a new photo album from the list.<br />

<br />

<br />

<br />

<br />

...<br />

<br />

<br />

<br />

14. Open the Web.sitemap file for the site <strong>and</strong> add a ma<strong>in</strong> menu <strong>and</strong> two submenu items for the Gig<br />

Pics section, between the Reviews <strong>and</strong> About sections:<br />

<br />

<br />

<br />

<br />

<br />

<br />

15. Because you added another menu item, you need to change the width of each item <strong>in</strong> the menu<br />

for the Monochrome theme. To do this, open up Monochrome.css <strong>and</strong> change the width for the<br />

.Ma<strong>in</strong>Menu ul li selector from 200 to 160 pixels:<br />

.Ma<strong>in</strong>Menu ul li<br />

{<br />

width: 160px;<br />

}

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!