<< European ASP.NET Core Hosting :: Session Wrapper Design Pattern For ASP.NET Core | ASP.NET 4.8 Hosting HostForLIFE.eu :: Fix Error on System.Web.UI.ViewStateException >>

European ASP.NET Core Hosting :: Rotate Ads Without Refreshing the Page Using AdRotator in ASP.NET

August 20, 2019 12:18 by author

Peter

This article explains the concept of the AdRotator control without the user refreshing the page and rotates the ads on a certain time interval. This article also gives a tip to fetch ad information from an XML file. The AdRotator Control presents ad images each time a user enters or refreshes a webpage. When the ads are clicked, it will navigate to a new web location. However the ads are rotated only when the user refreshes the page. In this article, we will explore how you can easily rotate ads at regular intervals, without the user refreshing the page. First of all start Visual Studio .NET And make a new ASP.NET web site using Visual Studio 2010.

Now you have to create a web site.
Go to Visual Studio 2010
New-> Select a website application
Click OK

Now add a new page to the website.

    Go to the Solution Explorer
    Right-click on the Project name
    Select add new item
    Add new web page and give it a name
    Click OK

We create an images folder in the application which contains some images to rotate in the AdRotator control. Now add a XML file. To do so, right-click the App_Data folder > Add New Item > 'XML File' > Rename it to adXMLFile.xml and click Add. Put this code in the .XML File.

    <?xml version="1.0" encoding="utf-8" ?>
    <Advertisements>
    <Ad>
    <ImageUrl>~/Images/image1.gif</ImageUrl>
    <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>
    <AlternateText>C-sharpcorner Home Page</AlternateText>
    <Impressions>3</Impressions>
    <Keyword>small</Keyword>
    </Ad>
    <Ad>
    <ImageUrl>~/images/forest_wood.JPG</ImageUrl>
    <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>
    <AlternateText>C-sharpcorner Home Page</AlternateText>
    <Impressions>2</Impressions>
    <Keyword>small</Keyword>
    </Ad>
    <Ad>
    <ImageUrl>~/images/image2.gif</ImageUrl>
    <Width>300</Width>
    <Height>50</Height>
    <NavigateUrl>http://www.c-sharpcorner.com/</NavigateUrl>
    <AlternateText>C-sharpcorner Home Page</AlternateText>
    <Impressions>3</Impressions>
    <Keyword>small</Keyword>
    </Ad>
    </Advertisements>

XML file elements

Here is a list and a description of the <Ad> tag items.
ImageUrl - The URL of the image to display.
NavigateUrl - The URL where the page will go after AdRotator image is clicked.
AlternateText - Text to display if the image is unavailable.
Keyword - Category of the ad, which can be used to filter for specific ads.
Impressions - Frequency of ad to be displayed. This number is used when you want some ads to be displayed more frequently than others.
Height - Height of the ad in pixels.
Width - Width of the ad in pixel.

Now drag and drop an AdRotator control from the toolbox to the .aspx and bind it to the advertisement file. To bind the AdRotator to our XML file, we will make use of the "AdvertisementFile" property of the AdRotator control as shown below:
    <asp:AdRotator
    id="AdRotator1"
    AdvertisementFile="~/adXMLFile.xml"
    KeywordFilter="small"
    Runat="server" />

To rotate the ads without refreshing the page, we will add some AJAX code to the page.
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>

The .aspx code will be as shown below.

Now drag and drop an UpdatePanel and add an AdRotator control into it. The DataList code looks like this:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="adrotator.aspx.cs" Inherits="adrotator" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Timer ID="Timer1" Interval="1000" runat="server" />
    <asp:UpdatePanel ID="up1" runat="server">
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
    <asp:AdRotator ID="AdRotator1" AdvertisementFile="~/adXMLFile.xml" KeywordFilter="small"
    runat="server" />
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
    </body>
    </html>

Now run the application and test it. The AdRotator control rotates the ads without the user refreshing the page and rotates the ads on a certain time interval