Data Bound Controls in ASP.Net - Part 1 (AdRotator & List Controls)

In this artical, which is a part of series of articals about Data Bound Controls in ASP.Net, we will learn about Data Bound controls. Data-bound Web server controls are controls that can be bound to a data source control to make it easy to display and modify data in your Web application. Almost, all ASP.Net applications rely on data presentation from a back-end data source. Data bound controls have been an important part of intracting with data in dynamic ASP.Net application. In ASP.Net 2.0, significant improvement in data-bound controls were introduced, including a BaseDataBoundControl class and declarative syntax. 

The BaseDataBoundControl acts as the base class for the DataBoundControl class and the HierarchicalDataBoundControl class. In this series of articals, we will learn about the following Data-Bound Controls:

• AdRotator
• List controls
• DataList
• GridView
• FormView
• DetailsView
• ListView
• TreeView
• Menu
• SiteMapPath
• DataGrid

In the end of this series, we will see about Data Source controls which are an essential control to use with data-bound controls.

Data source controls include:

• LingDataSource
• EntityDataSource
• SqlDataSource
• ObjectDataSource
• XMLDataSource
• SiteMapDataSource

In today's artical, we will learn about AdRotator and List controls.

AdRotator:

AdRotator control allows you to display a image banner dynamically on a Web page that is linked to a specific URL. The displayed image is rotated using properties for the control. The frequency of a particular ad/image displaying on a page can be configured using the Impressions property. Ads can be filtered using keyword filtering. 

AdRotator controls use either an XML file or a table in a database for data related to graphics/images. The following attributes are used in XML files to configure the AdRotator control.

A typical XML file might look like the following:

<?xml version="1.0" encoding="utf-8" ?> 

<Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> 

<Ad>

<ImageUrl>~/images/CompanyA.gif</ImageUrl> 

<NavigateUrl>http://www.CompanyA.com</NavigateUrl> 

<AlternateText>Ad for CompanyA, Ltd. Web site</AlternateText> 

<Impressions>100</Impressions> 

</Ad> 

<Ad> 

<ImageUrl>~/images/CompanyB.gif</ImageUrl>

<NavigateUrl>http://www.CompanyB.com</NavigateUrl>

<AlternateText>Ad for CompanyB, Ltd Web site</AlternateText>

<Impressions>50</Impressions>

</Ad>

</Advertisements>

XML file containing above code can be created in app_code folder. Now drag the AdRotator control in design mode to the area where you want to display the ad image. To select the xml file, do one of the following step:

• In the Choose Data Source drop-down box, select the XML file you created.
  
  
  
  
  
  
  
• In the Tag Properties panel, set the AdRotator control's AdvertisementFile property to the path of the XML file that you created.

In APS.net page, we have a code like this:

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

If you choose to use a database table as the data source for your AdRotator control, you will first need to set up a database using the following schema:

To display the data from the database in the AdRotator control, add a data source control to the page, configure the connection string for the data source control to point to your database, and set the AdRotator control'sDataSourceID property to the ID of the data source control.

The following code snippet sets the ImageUrl, NavigateUrl, and AlternateText for an ad programmatically:

protected void AdRotator1_AdCreated(object sender, 

System.Web.UI.WebControls.AdCreatedEventArgs e) 

{ 

e.ImageUrl = "images/CompanyA.gif"; 

e.NavigateUrl = "http://www.CompanyA.com/"; 

e.AlternateText = "Ad for CompanyA, Ltd Web site";

}

List Controls:

List controls include the ListBox, DropDownList, CheckBoxList, RadioButtonList, and BulletedList. Each of these controls can be data bound to a data source. They use one field in the data source as the display text and can optionally use a second field as the value of an item. Items can also be added statically at design-time, and you can mix static items and dynamic items added from a data source.

ListBox:

ASP.Net Page Code:

<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

Server Side Code:

protected void Page_Load(object sender, EventArgs e)

    {

        string[] myDateList = new string[5];

        myDateList[0] = "Val_1";

        myDateList[1] = "Val_2";

        myDateList[2] = "Val_3";

        myDateList[3] = "Val_4";

        myDateList[4] = "Val_5";

        ListBox1.DataSource = myDateList;

        ListBox1.DataBind();

    }

DropdownList:

ASP.Net Page Code:
<asp:DropDownList id="ddlProducts" runat="server" DataTextField="ProductName" DataValueField="ProductID" ApendDataBoundItems="True">
        <asp:ListItem>Default</asp:ListItem>
</asp:DropDownList>

AppendDataBoundItems will force the data items to be appended to the list that is already there. So the default item will stay. As sometime we need a "Default" value to select.


ServerSide Code:

 DataTable dt = new DataTable();

 cmd.CommandText = "Select ProductID, ProductName From Products";
 cmd.Connection = conn;
 conn.Open();

dt.Load(cmd.ExecuteReader());
conn.Close();

ddlProducts.DataSource = dt;
ddlProducts.DataBind();

Remember, in asp.net code we have mentioned these fields DataTextField="ProductName" DataValueField="ProductID". These field could be mentioned during databinding as below:

ddlProducts.DataSource = dt;
ddlProducts.DataTextField = "ProductName";
ddlProducts.DataValueField = "ProductID";
ddlProducts.DataBind();