Within the header template add an opening <ul> tag, and replace the closing <ul> tag in the footer template
The item template part of the repeater 'repeats' according the the number of items in the datasource that the repeater is bound to. We will be binding it to a list of our clubs
We are going to add a list item <li> to our item template, and place a hyperlink inside it. The hyperlink will use two values from each club - the name and the Id. The Id will be used to create a unique link to the page, which will display the club details in full.
Add the following line of code inside the ItemTemplate
Run the page and test that the clubs name is listed, and that the links take you to the correct URL (note that there will be no page for viewing individual club details yet - so you will see a page not found error if you click the link)
Finally create the ViewClub.aspx page and use a form view to display the clubs full information. You will need to use the 'WHERE' clause when you setup the database - as shown in the image:
Check that the links in the repeater now work, and you can view the individual detail of an item, and then return to working on the default.aspx page.
Replace the <ul> with a <div> (remember to set it
in both the header and footer templates) and also replace the
<li> in the item template with a div.
Apply an id to the <div> in the header template, and
apply a class to the one inside the repeater (note we should
never use an id for an HTML element inside a repeater, as ids
should refer to one element only)
Add a stylesheet to the page, and apply CSS styles, so that
the club names are displayed in a grid format. You may want to
use the display:inline-block property for this, and make sure you
set a width and height. You may also need to vertically align the
club divs to the top to prevent layout issues.
Viewing images in a repeater
Working outside of your project for now, locate logo images for the sports clubs that you added to the database
Resize each image so that it is 100px square - you may need to crop or add extra padding to images to meet this requirement. Do not stretch or squash the images as this will result in an unprofessional appearance
Save each image in the PNG format and ensure that the file name matches the Id from the database of the club, e.g. you will end up with files named as follows: 3.png
Create a new folder in the project called images and add each of the resized png format images to the folder
Return to the repeater and using a similar process to the creation of the hyperlink, add an img element so that it loads the appropriate image. Ensure you set the width and height attributes to 100
Set the alternate text for the image to the clubs name (from the database) followed by a space and the word 'logo' (e.g. "Arsenal Logo")
Test the page in a browser and view the source code to make sure the alernate text displays as expected