Repeaters

Create a database table (either in a new database, or in an existing one), with the following fields

Ensure the Id field is a primary key, and that it is an identity (e.g. each new item will be assigned a unique, incrementing value)

Add some sample data to the database, using football, rugby or other sporting clubs as the basis. The data does not need to be accurate.

Create a new ASP.NET empty web forms project in Visual Studio
Create a new web form called default.aspx (this will be the home page and provide a list of all clubs)
Add an appropriate title and h1 to the page (e.g. UK Premier league clubs)
Add a repeater to the page, and set its ID to rptrClubs
Create a datasource for the repeater, with an appropriate name, which retrieves all the clubs from the database.
Within code view, locate the repeater and add a header template, an item template and a footer template. Your repeater should look something like this:
```
<asp:Repeater ID="rptrClubs" runat="server">
<HeaderTemplate></HeaderTemplate>
   <ItemTemplate></ItemTemplate>
   <FooterTemplate></FooterTemplate>
</asp:Repeater> 
```
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 tags:

<li>
   <a href="<%# Eval("Id", "ViewClub.aspx?Id={0}") %>">
      <%#Eval("ClubName") %>
   </a>
</li>

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.

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
You do not have to use the png file type, but ensure all logos are of the same type.
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