ptg 684 CHAPTER 14 Using the ListView and DataPager Controls Creating a Custom User Interface for Paging If you need total and complete control over the paging user interface, you can use the TemplatePagerField to customize the appearance of the DataPager. The page in Listing 14.9 illustrates how you can use the TemplatePagerField. LISTING 14.9 DataPagerTemplate.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 pg_PagerCommand(object sender, DataPagerCommandEventArgs e) { e.NewMaximumRows = e.Item.Pager.MaximumRows; switch (e.CommandName) { case “Previous”: if (e.Item.Pager.StartRowIndex > 0) e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2; break; case “Next”: e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2; break; } } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <title>DataPager Template</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <ul id=”itemContainer” From the Library of Wow! eBook ptg 685 Using the DataPager Control 14 runat=”server”> </ul> <asp:DataPager id=”pg” PageSize=”2” Runat=”server”> <Fields> <asp:TemplatePagerField OnPagerCommand=”pg_PagerCommand”> <PagerTemplate> <asp:LinkButton id=”lnkPrevious” Text=”Previous” CommandName=”Previous” Runat=”server” /> <asp:LinkButton id=”lnkNext” Text=”Next” CommandName=”Next” Runat=”server” /> </PagerTemplate> </asp:TemplatePagerField> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <li> <%# Eval(“Title”) %> </li> </ItemTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movie” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 686 CHAPTER 14 Using the ListView and DataPager Controls The TemplatePagerField in Listing 14.9 contains two LinkButton controls (see Figure 14.9). The first LinkButton has a CommandName set to the value Previous, and the second LinkButton control has a CommandName set to the value Next. The page also contains an event handler for the TemplatePagerField’s PagerCommand event. The actual work of paging is done within this event handler. The second argument passed to the event handler is an instance of the DataPagerCommandEventArgs class. You change the current page by assigning new values to this object’s NewStartRowIndex and NewMaximumRows properties. Data Source Paging with the DataPager Control You can take advantage of the DataPager control when performing data source paging. The page in Listing 14.10 contains a ListView control bound to a LinqDataSource control. Because the LinqDataSource control has its AutoPage property set to the value true, it performs paging on the database server. NOTE The LinqDataSource control and LINQ to SQL are discussed in Chapter 20, “Data Access with LINQ to SQL.” LISTING 14.10 DataPagerDataSource.aspx <%@ Page Language=”C#” Trace=”true” %> <!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>DataPager DataSource Paging</title> FIGURE 14.9 Creating a custom paging user interface. From the Library of Wow! eBook ptg 687 Using the DataPager Control 14 </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <ol id=”itemContainer” runat=”server”> </ol> <asp:DataPager id=”pg” PageSize=”2” Runat=”server”> <Fields> <asp:NumericPagerField /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <li> <%# Eval(“Title”) %> </li> </ItemTemplate> </asp:ListView> <asp:LinqDataSource id=”srcMovies” ContextTypeName=”MyDatabaseDataContext” TableName=”Movies” AutoPage=”true” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 688 CHAPTER 14 Using the ListView and DataPager Controls So that you can verify that the paging is happening through the database, I’ve set the DataContext to log to ASP.NET trace. If you look at the Trace Information section at the bottom of the page, you can see the actual SQL commands executed by the LinqDataSource control (see Figure 14.10). FIGURE 14.10 Performing data source paging with the DataPager control. Summary I’m a huge fan of the new ListView and DataPager controls. I’m constantly running into layout limitations when using the GridView control. Because ListView is entirely template-driven, it is not subject to these same limitations. In this chapter, you learned how to use the ListView control to display, sort, edit, and insert data. You also learned how to take advantage of the DataPager control to add paging to the ListView control. You learned how to create a custom pager template and how to perform data source paging. From the Library of Wow! eBook ptg CHAPTER 15 Using the Chart Control IN THIS CHAPTER . Chart Control Fundamentals . Customizing a Chart’s Appearance . Drill-Down Reports . Summary Not too long ago, the only way to add robust charting and graphing capabilities to your application was to buy a third-party control suite. This was mainly due to the complexity involved; the task of writing your own chart control was too time-consuming and error-prone. This has recently changed. In 2008, Microsoft released a free charting control that enabled developers to add rich, browser-based charts to ASP.NET 3.5 web applications. These components are now part of ASP.NET 4 and are included by default with the .NET Framework. This chapter shows you how to use ASP.NET Chart Control to add dynamic, data bound graphics such as bar graphs or pie charts to your web application. We provide an overview of Chart Control and the different types of charts and graphs that it can produce. We cover the different ways you can customize a chart’s appearance by modifying the plot- ting area and adding borders, backgrounds, and legends. Finally, we show you how to extend your charts with Ajax by adding tooltips, drill-down functionality, and other interactive features. To get the most out of this chapter, we recommend that you run the samples in your environment and play around with changes to configurations and options to see how it alters the behavior of the charts. From the Library of Wow! eBook ptg 690 CHAPTER 15 Using the Chart Control FIGURE 15.1 Displaying a chart of movie categories. Chart Control Fundamentals In this section, you learn how to use the Chart control to provide graphical representa- tions of data. You also learn how to group, sort, and filter data to customize the way your chart displays. Displaying Data with the Chart Control The Chart control has three main components: . Series—Developers familiar with charting and graphing terminology recognize this term immediately. A series is a collection of data points. Different types of charts render a series in different ways, but the underlying format for specifying a series of data points remains the same. . Chart area—Define the plot areas for which a series is plotted. For instance, a line graph would be defined as a single plot area. If you want to display a line graph and a bar graph on a single chart, you would define two chart areas. . Data points—A single point of data within a series. As you read through this chap- ter you see more about what data points look like and how they are used. Series, chart areas, and data points can all be specified either declaratively or programmati- cally. The page in Listing 15.1 displays a simple chart showing the number of movies in different categories using declarative data binding (see Figure 15.1). From the Library of Wow! eBook ptg 691 Chart Control Fundamentals LISTING 15.1 ShowChart.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies”> <Series> <asp:Series Name=”MovieCategorySeries” XValueMember=”Category” YValueMembers=”Count” > </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” Runat=”server” /> </div> </form> </body> </html> In Listing 15.1, we reuse the CountMoviesInCategory stored procedure from Chapter 9, “Using the SqlDataSource Control.” The Chart is bound to the SqlDataSource control through the DataSourceID property, and the chart’s x-and y-axes are associated to the dataset’s returned columns through the XValueMember and YValueMembers properties on the Series. 15 From the Library of Wow! eBook ptg 692 CHAPTER 15 Using the Chart Control FIGURE 15.2 Displaying a line chart. Unlike the previous chapter’s code samples, we have an additional Register declaration at the top of the page. Although the Chart control is shipped as part of the .NET 4 Framework, it is still located in a separate assembly and requires an explicit declaration to include it in the page. NOTE In addition to the Register declaration, you need to modify your web.config file to get the Chart functionality to work. The Chart control uses a separate HTTP Handler to render the image, and by default, your application isn’t aware of it. Add the following section to the system.web section of the web.config file, and your charts render the following: <httpHandlers> <add path=“ChartImg.axd” verb=“GET,HEAD” type=“System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” validate=“false” /> </httpHandlers> You can read more ab out how the Char t renders to the browser la ter in th is chapter. The default chart type is Column, which displays each data point as a vertical bar. You can change the way the data points display by setting the ChartType property on the Series. Listing 15.2 shows the same data as a line graph (see Figure 15.2): From the Library of Wow! eBook ptg 693 Chart Control Fundamentals 15 LISTING 15.2 ShowLineChart.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Line Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies”> <Series> <asp:Series Name=”MovieCategorySeries” ChartType=”Line” XValueMember=”Category” YValueMembers=”Count” > </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” Runat=”server” /> </div> </form> </body> </html> Charting is a massive topic and has consumed entire books in the past. You can use more than 30 different chart types to provide visualizations of your data. In the interest of keeping this chapter small and easy to read, the following provides an overview of just a few of the available chart types: From the Library of Wow! eBook . <Fields> < ;asp: TemplatePagerField OnPagerCommand=”pg_PagerCommand”> <PagerTemplate> < ;asp: LinkButton id=”lnkPrevious” Text=”Previous” CommandName=”Previous” Runat=”server” /> < ;asp: LinkButton. TemplatePagerField to customize the appearance of the DataPager. The page in Listing 14. 9 illustrates how you can use the TemplatePagerField. LISTING 14. 9 DataPagerTemplate.aspx <%@ Page. developers to add rich, browser-based charts to ASP. NET 3.5 web applications. These components are now part of ASP. NET 4 and are included by default with the .NET Framework. This chapter shows