ASP.NET AdRotator Control Using LINQ
In Asp.Net the AdRotator control is used to display a sequence of images . We can display the images by using XML file or by using Database.
First we will have a look at a sample XML advertisement file that is used by the adrotator control in ASP.Net.
This AdRotator control uses an XML file to store the advertisement information. The important thing in XML file is that it must begin with <Advertisements> and ends with </Advertisements>.The predefined elements inside the tag are listed below:
<ImageUrl>This is used for the path of the image file
<NavigateUrl>This is used if the user clicks the ad it navigates to the respective page.
<AlternateText>This can be used as an alternate text for the image
<Impressions>This can be used to display the ads in percent of the hits
<Keyword>This is optional and used for to categorise.
A sample XML File will look like
<Advertisements>
<Ad>
<ImageUrl>Imgage1.gif</ImageUrl>
<NavigateUrl>http://www.abc.com</NavigateUrl>
<AlternateText>Map1</AlternateText>
<Impressions>20</Impressions>
<Keyword>Service1
</Ad>
<Ad>
<ImageUrl>Imgage2.gif</ImageUrl>
<NavigateUrl>http://www.def.com</NavigateUrl>
<AlternateText>Map2</AlternateText>
<Impressions>40</Impressions>
<Keyword>Service2</Keyword>
</Ad>
</Advertisements>
In the above XML file the element<ImageUrl> specifies the path of the image that being displayed by using the AdRotator control. So when the image is displayed if the user clicks on the corresponding image then the user will be taken to the url that is specified in <NavigateUrl> element. <AlternateText> element is ured to display the text when the image is not loaded from the XML file or from the database. <Impressions> element is used indicate how often the image should be displayed corresponding with the other images, it depends on the element value. <Keyword> element is used to describe to which category the advertisement belongs to.
The code required for the adrotator control for aspx pages is given below.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication2._Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//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”><table><tr><td>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<asp:AdRotator ID=”AdRotator1″ runat=”server” Target=”_self” AdvertisementFile=”Advertisement.xml” />
</ContentTemplate>
</asp:UpdatePanel></td></tr></table></form></body></html>
From the above aspx file code you can see for the Adrotator control just specify the XML file and set the target as _self. The rest of the thing the Adrotator will take care of how to display the images based on the given XML file. This is one way of doing; even we can do with the database also.
The advantages of using Database are:
1. Easy maintenance.
2. No code change.
3. You can even specify the date ranges for the images to be displayed.
The table you need to create is as follows:
CREATE TABLE Advertisement(ID int NOT NULL,ImageUrl nvarchar(max) NULL,NavigateUrl nvarchar(max) NULL,AlternateText nvarchar(max) NULL,Impressions nvarchar(max) NULL,Date_From datetime NULL,Date_Valid datetime NULL)
The column name should be the same as like XML elements. If you are using LINQ then you can give the naming convections as you like because when you querying with the help of LINQ using anonymous types you can change. You can see from the below example. First look at the aspx page code below
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication2._Default”%>
<!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”><table><tr><td>
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<asp:AdRotator ID=”AdRotator1″ runat=”server” />
<asp:Timer ID=”Timer1″ runat=”server” OnTick=”Timer1_Tick” Interval=”1000″></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel></td></tr></table></form></body></html>
In the above aspx file just drag and drop the update panel and inside the update panel just drag and drop the adrotator control on to the aspx page and then drag and drop the timer control which comes with the ajax. Then in the code behind file write the below code
The code for aspx.cs will look like this
using System;
using System.Collections.Generic;
using System.LINQ;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebApplication2;
namespace WebApplication2
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
AdRotator1.DataSource = FetchAdsFromDb();
AdRotator1.DataBind();
}
}
private IQueryable FetchAdsFromDb()
{
DatabaseDataContext db = new DatabaseDataContext();
var result = from a in db.Advertisementswhere System.DateTime.Now >= a.Date_From && System.DateTime.Now <= a.Date_Valid select new{ImageUrl = string.Format(“~/images/{0}”, a.ImageUrl),NavigateUrl = string.Format(“~/{0}”, .NavigateUrl),AlternateText = a.AlternateText,Impressions = a.Impressions};
return result;
}
protected void Timer1_Tick(object sender, EventArgs e)
{
AdRotator1.DataSource = FetchAdsFromDb();
AdRotator1.DataBind();
}
}
}
From the above code you can see page load event and timer click event, first write a method
FetchAdsFromDb () which brings all the data from the database using LINQ. Using LINQ it is very easy to write query. You can see the LINQ query written above, first it starts with from keyword followed by alias name followed by table name followed by where clause and followed by select. In order to use the LINQ you have to create a data context and by using data context you can access all the tables in the database. From the above code you can see first I created an object for the database Context after the by using the created object I can access the tables. And rest of the query is similar to SQL but at the end of the select I used NEW key word with {} braces i.e. NEW{ImageUrl = string.Format(“~/images/{0}”, a.ImageUrl) } it means that iam using Anonymous keywords. Iam reading the value from the table a.ImageUrl (i.e. I stored only the image name not the complete image in database) I had done purely for the purpose of better performance only. But in order to display the image exact path should be there that why I used Anonymous types, so that I can use string. Format to append the original path of the image with the image name and assigned to the ImageUrl. I told you before if you want to change the database columns name you can change whatever you like but here you have to assign to the exact element names that are in the XML file. Then only the Adrotator will work, by mistake if you change the anonymous name then I doesn’t work. Once you got the query results then bind the Adrotator with the result query in the pageload.Again in the timer control click event again get the results using the same method FetchAdsFromDb() and bind to the Adrotator control.
In the timer control specify the Interval=”1000″ which will be in milliseconds. Every after this time interval the image will be refreshed and new image will appear. This is how you can use the Adrotator control using LINQ, pretty cool right……………………………………….
No comments
No comments yet. Be the first.
Leave a reply
