ASP.net Image Slideshow

Project: Ad Rotator

Amazon.com

New Project● Select Installed Template > Visual Basic >

Web > ASP .NET Empty Web Application

● Name of application: Project_AdRotator

Site1.Master● Menu: Project > Add New Item > MasterPage● Name: Site1.Master● Design view: Click on purple

ContentPlaceHolder1, press Left (←) Arrow key to move outside of Content Placeholder.

● Insert Table with 3 rows 3 cols.● In 1st Row 2nd Col: Type “Ad Rotator”,

change its format to “H1” and “Justify Centre”.

XMLFile1.xml● Menu: Project > Add New Item > XML File● Name: XMLFile1.xml

Content in XMLFile1.xml

● Add the advertisement related content (Copy and paste from the next page):

Content

<Advertisements> <Ad>

<ImageUrl>./ad/travel1.jpg</ImageUrl> <NavigateUrl>travel1.aspx</NavigateUrl><AlternateText>Travel 1</AlternateText><Impressions>20</Impressions><Keyword>travel</Keyword>

</Ad></Advertisements>

Explanation

The image to be displayed URL to access

when the image is clicked

Alt text for accessibility

How often to stream this ad

To group the ad for filtering

Add more advertisements

Site1.Master

● In Row 2 Col 2: add the following controls:○ AJAX Extensions: ScriptManager○ AJAX Extensions: Timer○ AJAX Extensions: UpdatePanel

Site1.Master

● Inside UpdatePanel, add the following control:○ Standard: AdRotator

Site1.Master

● For AdRotator: ○ Choose Data Source: XML File

Site1.Master

● Select the XML file:

Site1.Master

● Change the Interval property of Timer1 to 3000 (note that its unit is milliseconds).

Webform1.aspx● Menu: Project > Add New Item

> Web Form using Master Page (Select Site1.master)

● Name: WebForm1.aspx● Add a new folder “ad” and add

three images to the folder:● Save all and Run to test.● Notice that there is a flickering

effect when the page is reloaded.

AJAX reload

In layman terms: the browser will retrieve new information in the background and update part of the web page! Example: google map, facebook news update, etc.

Site1.Master

● Click on UpdatePanel● For Triggers property: click on [...]

Site1.Master● Add a trigger by timer’s tick event. That

means with the timer ticking every 3 second, it will trigger AJAX reload of the update panel only.

WebForm1.aspx

● Select WebForm1.aspx.● Save all and Run.

Outstanding

● Need to create travel1.aspx, travel2.aspx and travel3.aspx, so that when the advert images are clicked, these pages are available.