ptg 214 CHAPTER 4 Using the Rich Controls WARNING If you create an event handler for the AdCreated event and you cache the page, the content rendered by the AdRotator control is also cached. When handling the AdCreated event, use partial page caching to cache only part of a page and not the AdRotator control itself. The page in Listing 4.14 displays a banner advertisement with the AdRotator control. The page includes an event handler for the AdRotator control’s AdCreated event. LISTING 4.14 AdRotatorTrack.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void AdRotator1_AdCreated(object sender, AdCreatedEventArgs e) { // Update Impressions srcAds.InsertParameters[“AdId”].DefaultValue = ➥ e.AdProperties[“Id”].ToString(); srcAds.Insert(); // Change NavigateUrl to redirect page e.NavigateUrl = “~/AdHandler.ashx?id=” + e.AdProperties[“Id”].ToString(); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>AdRotator Track</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:AdRotator id=”AdRotator1” DataSourceID=”srcAds” OnAdCreated=”AdRotator1_AdCreated” Runat=”server” /> <asp:SqlDataSource id=”srcAds” ConnectionString=”Server=.\SQLExpress;Integrated Security=True; From the Library of Wow! eBook ptg 215 Displaying Advertisements 4 AttachDbFileName=|DataDirectory|AdListDB.mdf;User Instance=True” SelectCommand=”SELECT Id, ImageUrl, Width, Height, NavigateUrl, ➥ AlternateText,Keyword, Impressions FROM AdList” InsertCommand=”INSERT AdStats (AdId, EntryDate, Type) VALUES (@AdId, ➥ GetDate(), 0)” Runat=”server”> <InsertParameters> <asp:Parameter Name=”AdId” Type=”int32” /> </InsertParameters> </asp:SqlDataSource> </div> </form> </body> </html> The AdCreated event handler does two things. First, it inserts a new record into a database table named AdStats, which records an advertisement impression. Second, the handler modifies the NavigateUrl so that the user is redirected to a handler named AdHandler.ashx. The AdStats database table looks like this: Column Name Data Type Id Int (IDENTITY) AdId Int EntryDate DateTime Type Int The Type column records the type of entry. The value 0 represents an advertisement impression, and the value 1 represents an advertisement transfer. When you click an advertisement, you link to a file named AdHandler.ashx. This file is contained in Listing 4.15. From the Library of Wow! eBook ptg 216 CHAPTER 4 Using the Rich Controls LISTING 4.15 AdHandler.ashx <%@ WebHandler Language=”C#” Class=”AdHandler” %> using System; using System.Web; using System.Data; using System.Data.SqlClient; public class AdHandler : IHttpHandler { const string conString = @”Server=.\SQLExpress;Integrated Security=True; AttachDbFileName=|DataDirectory|AdListDB.mdf;User Instance=True”; public void ProcessRequest (HttpContext context) { int AdId = Int32.Parse(context.Request[“Id”]); SqlConnection con = new SqlConnection(conString); string navigateUrl = String.Empty; using (con) { con.Open(); UpdateTransferStats(AdId, con); navigateUrl = GetNavigateUrl(AdId, con); } if (!String.IsNullOrEmpty(navigateUrl)) context.Response.Redirect(navigateUrl); } void UpdateTransferStats(int advertisementId, SqlConnection con) { string cmdText = “INSERT AdStats (AdId, EntryDate, Type) VALUES “ + “(@AdId, GetDate(), 1)”; SqlCommand cmd = new SqlCommand(cmdText, con); cmd.Parameters.AddWithValue(“@AdId”, advertisementId); cmd.ExecuteNonQuery(); } string GetNavigateUrl(int advertisementId, SqlConnection con) { string cmdText = “SELECT NavigateUrl FROM AdList WHERE Id=@AdId”; SqlCommand cmd = new SqlCommand(cmdText, con); cmd.Parameters.AddWithValue(“@AdId”, advertisementId); From the Library of Wow! eBook ptg 217 Displaying Advertisements 4 return cmd.ExecuteScalar().ToString(); } public bool IsReusable { get { return false; } } } The handler in Listing 4.15 performs two tasks. First, it inserts a new record into the AdStats database table, recording that a transfer is taking place. Next, it grabs the NavigateUrl from the AdList database table and sends the user to the advertiser’s website. The final page displays advertiser statistics from the AdStats database table (see Figure 4.9). This page is contained in Listing 4.16. FIGURE 4.9 Displaying advertiser statistics. From the Library of Wow! eBook ptg 218 CHAPTER 4 Using the Rich Controls LISTING 4.16 AdRotatorStats.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <style type=”text/css”> .grid td,.grid th { border-bottom:solid 1px black; padding:5px; } </style> <title>AdRotator Statistics</title> </head> <body> <form id=”form1” runat=”server”> <div> <h1>Advertisement Statistics</h1> Impressions represent the number of times an advertisement has been viewed. Transfers represent the number of times an advertisement has been clicked. <h2>Impressions</h2> <asp:GridView id=”grdImpressions” DataSourceID=”srcImpressions” AutoGenerateColumns=”false” GridLines=”None” CssClass=”grid” Runat=”server”> <Columns> <asp:BoundField DataField=”AdId” HeaderText=”Advertisement Id” /> <asp:BoundField DataField=”Impressions” HeaderText=”Impressions” /> </Columns> </asp:GridView> <asp:SqlDataSource id=”srcImpressions” ConnectionString=”Server=.\SQLExpress;Integrated Security=True; From the Library of Wow! eBook ptg 219 Displaying Advertisements 4 AttachDbFileName=|DataDirectory|AdListDB.mdf;User Instance=True” SelectCommand=”SELECT AdId,Count(*) As Impressions FROM AdStats WHERE Type=0 GROUP BY AdId ORDER BY Impressions DESC” Runat=”server” /> <h2>Transfers</h2> <asp:GridView id=”grdTransfers” DataSourceID=”srcTransfers” AutoGenerateColumns=”false” GridLines=”None” CssClass=”grid” Runat=”server”> <Columns> <asp:BoundField DataField=”AdId” HeaderText=”Advertisement Id” /> <asp:BoundField DataField=”Transfers” HeaderText=”Transfers” /> </Columns> </asp:GridView> <asp:SqlDataSource id=”srcTransfers” ConnectionString=”Server=.\SQLExpress;Integrated Security=True; AttachDbFileName=|DataDirectory|AdListDB.mdf;User Instance=True” SelectCommand=”SELECT AdId,Count(*) As Transfers FROM AdStats WHERE Type=1 GROUP BY AdId ORDER BY Transfers DESC” Runat=”server” /> </div> </form> </body> </html> The page in Listing 4.16 contains two GridView controls bound to two SqlDataSource controls. The first GridView displays statistics on impressions, and the second GridView displays statistics on transfers. From the Library of Wow! eBook ptg 220 CHAPTER 4 Using the Rich Controls Displaying Different Page Views The MultiView control enables you to hide and display different areas of a page. This control is useful when you need to create a tabbed page. It is also useful when you need to divide a long form into multiple forms. The MultiView control contains one or more View controls. You use the MultiView control to select a particular View control to render. (The selected View control is the Active View.) The contents of the remaining View controls are hidden. You can render only one View control at a time. The MultiView control supports the following properties (this is not a complete list): . ActiveViewIndex—Enables you to select the View control to render by index. . Views—Enables you to retrieve the collection of View controls contained in the MultiView control. The MultiView control also supports the following methods: . GetActiveView—Enables you to retrieve the selected View control. . SetActiveView—Enables you to select the active view. Finally, the MultiView control supports the following event: . ActiveViewChanged—Raised when a new View control is selected. The View control does not support any special properties or methods. Its primary purpose is to act as a container for other controls. However, the View control does support the following two events: . Activate—Raised when the view becomes the selected view in the MultiView control. . Deactivate—Raised when another view becomes the selected view in the MultiView control. Displaying a Tabbed Page View When you use the MultiView control with the Menu control, you can create a tabbed page view. (To make it look pretty, you need to use some CSS.) For example, the page in Listing 4.17 contains a MultiView control with three View controls. The Menu control switches between the View controls (see Figure 4.10). From the Library of Wow! eBook ptg 221 Displaying Different Page Views 4 LISTING 4.17 MultiViewTabs.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void Menu1_MenuItemClick(object sender, MenuEventArgs e) { int index = Int32.Parse(e.Item.Value); MultiView1.ActiveViewIndex = index; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .tabs { FIGURE 4.10 Displaying a tabbed page with the MultiView control. From the Library of Wow! eBook ptg 222 CHAPTER 4 Using the Rich Controls position:relative; top:1px; left:10px; } .tab { border:solid 1px black; background-color:#eeeeee; padding:2px 10px; } .selectedTab { background-color:white; border-bottom:solid 1px white; } .tabContents { border:solid 1px black; padding:10px; background-color:white; } </style> <title>MultiView Tabs</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” Orientation=”Horizontal” StaticMenuItemStyle-CssClass=”tab” StaticSelectedStyle-CssClass=”selectedTab” CssClass=”tabs” OnMenuItemClick=”Menu1_MenuItemClick” Runat=”server”> <Items> <asp:MenuItem Text=”Tab 1” Value=”0” Selected=”true” /> <asp:MenuItem Text=”Tab 2” Value=”1” /> <asp:MenuItem Text=”Tab 3” Value=”2” /> </Items> </asp:Menu> <div class=”tabContents”> <asp:MultiView id=”MultiView1” ActiveViewIndex=”0” From the Library of Wow! eBook ptg 223 Displaying Different Page Views 4 Runat=”server”> <asp:View ID=”View1” runat=”server”> <br />This is the first view <br />This is the first view <br />This is the first view <br />This is the first view </asp:View> <asp:View ID=”View2” runat=”server”> <br />This is the second view <br />This is the second view <br />This is the second view <br />This is the second view </asp:View> <asp:View ID=”View3” runat=”server”> <br />This is the third view <br />This is the third view <br />This is the third view <br />This is the third view </asp:View> </asp:MultiView> </div> </div> </form> </body> </html> In Listing 4.17, the Menu control is associated with a CSS class named tabs. This class rela- tively positions the Menu control down one pixel to merge the bottom border of the Menu control with the top border of the <div> tag that contains the MultiView. Because the selected tab has a white bottom border, the border between the selected tab and the tab contents disappears. Displaying a Multipart Form You can use the MultiView control to divide a large form into several subforms. You can associate particular commands with button controls contained in a MultiView. When the button is clicked, the MultiView changes the active view. The MultiView control recognizes the following commands: . NextView—Causes the MultiView to activate the next View control. . PrevView—Causes the MultiView to activate the previous View control. . SwitchViewByID—Causes the MultiView to activate the view specified by the button control’s CommandArgument. From the Library of Wow! eBook . Library of Wow! eBook ptg 222 CHAPTER 4 Using the Rich Controls position:relative; top:1px; left:10px; } .tab { border:solid 1px black; background-color:#eeeeee; padding:2px 10px; } .selectedTab. Different Page Views 4 LISTING 4. 17 MultiViewTabs.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>. eBook ptg 218 CHAPTER 4 Using the Rich Controls LISTING 4. 16 AdRotatorStats.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>