ASP.NET 4 Unleased - p 72 ppsx

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 b

Trang 1

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”>

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>

<title>DataPager Template</title>

</head>

<body>

<div>

<asp:ListView

ID=”lstMovies”

DataSourceId=”srcMovies”

runat=”server”>

<ul id=”itemContainer”

Trang 2

runat=”server”>

</ul>

<asp:DataPager id=”pg”

PageSize=”2”

Runat=”server”>

<asp:TemplatePagerField OnPagerCommand=”pg_PagerCommand”>

<asp:LinkButton id=”lnkPrevious”

Text=”Previous”

CommandName=”Previous”

Runat=”server” />

<asp:LinkButton id=”lnkNext”

Text=”Next”

CommandName=”Next”

</PagerTemplate>

</asp:TemplatePagerField>

</Fields>

</asp:DataPager>

</LayoutTemplate>

<li>

<%# Eval(“Title”) %>

</li>

</ItemTemplate>

</asp:ListView>

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Id, Title, Director FROM Movie”

ConnectionString=’<%$ ConnectionStrings:con %>’

</div>

</form>

</body>

</html>

Trang 3

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”>

FIGURE 14.9 Creating a custom paging user interface

Trang 4

</head>

<body>

<div>

<asp:ListView

ID=”lstMovies”

DataSourceId=”srcMovies”

runat=”server”>

<ol

id=”itemContainer”

runat=”server”>

</ol>

<asp:DataPager

id=”pg”

PageSize=”2”

Runat=”server”>

<asp:NumericPagerField />

</Fields>

</asp:DataPager>

</LayoutTemplate>

<li>

<%# Eval(“Title”) %>

</li>

</ItemTemplate>

</asp:ListView>

<asp:LinqDataSource

id=”srcMovies”

ContextTypeName=”MyDatabaseDataContext”

TableName=”Movies”

AutoPage=”true”

</div>

</form>

</body>

</html>

Trang 5

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

Trang 6

Using the Chart Control .. Chart Control FundamentalsCustomizing 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

Trang 7

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)

Trang 8

LISTING 15.1 ShowChart.aspx

<%@ 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”>

<title>Show Chart</title>

</head>

<body>

<div>

<asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies”>

<asp:Series Name=”MovieCategorySeries”

XValueMember=”Category” YValueMembers=”Count” >

</asp:Series>

</Series>

<asp:ChartArea Name=”MovieChartArea”>

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”CountMoviesInCategory”

SelectCommandType=”StoredProcedure”

</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

Trang 9

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:

<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 about how the Chart renders to the browser later in this 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):

Trang 10

LISTING 15.2 ShowLineChart.aspx

<%@ 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”>

<title>Show Line Chart</title>

</head>

<body>

<div>

<asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies”>

<asp:Series Name=”MovieCategorySeries” ChartType=”Line”

XValueMember=”Category” YValueMembers=”Count” >

</asp:Series>

</Series>

<asp:ChartArea Name=”MovieChartArea”>

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”CountMoviesInCategory”

SelectCommandType=”StoredProcedure”

</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:

Tiêu đề	Using The ListView And DataPager Controls
Trường học	University of Wow!
Chuyên ngành	Computer Science
Thể loại	Thesis
Năm xuất bản	2025
Thành phố	wow city

Định dạng
Số trang	10
Dung lượng	0,96 MB