ASP.NET 4 Unleased - p 70 pptx

If it is present, every other item displayed by the ListView control is rendered with the AlternatingItemTemplate.. In Listing 14.1, the EmptyDataTemplate is used to display the text No

Trang 1

NOTE

In ASP.NET 3.5, the LayoutTemplate was required and it needed to contain a

server-side control with an ID of itemContainer In ASP.NET 4, LayoutTemplate is no longer

required

The ItemTemplate renders each of the items from the data source (or every other item

when an AlternatingItemTemplate is present) In Listing 14.1, the ItemTemplate renders a

<div> tag with a solid border A data-binding expression is used with the <div> tag to

display the value of the database Title column

The AlternatingItemTemplate is optional If it is present, every other item displayed by

the ListView control is rendered with the AlternatingItemTemplate In Listing 14.1, the

AlternatingItemTemplate is used to give alternating items a silver background color

Finally, the EmptyDataTemplate displays content when no results are retrieved from the

data source In Listing 14.1, the EmptyDataTemplate is used to display the text No Records

Found when no items are returned from the data source

You can use the ListView control to render any HTML elements you can imagine You can

use the ListView control to render bulleted lists, an HTML table, a blog tag cloud, or even

the elements of a JavaScript array For example, the page in Listing 14.2 uses a ListView

control to render an HTML table

LISTING 14.2 TableListView.aspx

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

FIGURE 14.1 Displaying database records with a ListView control

Trang 2

<title>Table ListView</title>

</head>

<body>

<div>

<asp:ListView

ID=”lstMovies”

DataSourceId=”srcMovies”

runat=”server”>

<table>

<thead>

<tr>

<th>Title</th>

<th>Director</th>

</tr>

</thead>

<tbody>

<asp:Placeholder id=”itemPlaceholder”

runat=”server” />

</tbody>

</table>

</LayoutTemplate>

<tr>

</tr>

</ItemTemplate>

No records found

</EmptyDataTemplate>

</asp:ListView>

<asp:SqlDataSource

id=”srcMovies”

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

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

Runat=”server” />

</div>

</form>

</body>

</html>

Trang 3

Notice that the itemContainer in Listing 14.2 is the <tbody> element The <tbody>

element contains each row of the table Each row is rendered by the ItemTemplate (see

Figure 14.2)

You can use the ListView control’s GroupTemplate to group multiple items together

Grouping items is useful when you want to display items in multiple columns For

example, you might want to display a photo gallery in which three pictures are displayed

per row

The page in Listing 14.3 displays a set of photographs within a series of HTML <div> tags

A maximum of three photographs display in each <div> tag (see Figure 14.3)

FIGURE 14.2 Displaying a table with a ListView control

Trang 4

LISTING 14.3 PhotoGallery.aspx

<%@ Import Namespace=”System.Collections.Generic” %>

void Page_Load()

{

List<string> photos = new List<string>();

photos.Add( “~/Images/Ascent.jpg” );

photos.Add( “~/Images/Autumn.jpg” );

photos.Add( “~/Images/Azul.jpg” );

photos.Add( “~/Images/Home.jpg” );

photos.Add( “~/Images/Peace.jpg” );

photos.Add( “~/Images/Stonehenge.jpg” );

photos.Add( “~/Images/Tulips.jpg” );

lstPhotos.DataSource = photos;

lstPhotos.DataBind();

}

</script>

FIGURE 14.3 Displaying a photo gallery with a ListView control

Trang 5

<title>Photo Gallery</title>

</head>

<body>

<div>

<asp:ListView

ID=”lstPhotos”

GroupItemCount=”3”

runat=”server”>

<LayoutTemplate><asp:Placeholder

id=”groupPlaceholder”

runat=”server” /> </LayoutTemplate>

<div>

<asp:Placeholder id=”itemPlaceholder”

runat=”server” />

</div>

</GroupTemplate>

<asp:Image

id=”imgPhoto”

ImageUrl=’<%# Container.DataItem %>’

Width=”200px”

</ItemTemplate>

</asp:ListView>

</div>

</form>

</body>

</html>

In Listing 14.3, the photographs are represented with a List collection The List is bound

to the ListView programmatically in the Page_Load() method

Notice that the ListView includes a LayoutTemplate, GroupTemplate, and ItemTemplate

In previous listings, the LayoutTemplate included an element with an ID of

itemContainer In this listing, the LayoutTemplate includes an element with an ID of

groupContainer The contents of the GroupTemplate are added to the element in the

LayoutTemplate with an ID of groupContainer

The GroupTemplate includes the itemContainer element The contents of the

ItemTemplate are rendered within the itemContainer element in the GroupTemplate

Trang 6

Notice that the ListView control includes a GroupItemCount attribute This property

determines the number of items displayed in a GroupTemplate before a new

GroupTemplate is created

NOTE

The ListView control also supports an EmptyItemTemplate that can be used to

ren-der content for the leftover items in a GroupTemplate For example, if you set the

GroupItemCount property to 3 and there are four items, the contents of the

EmptyItemTemplate display for the final two items

Selecting a Row

You can set up the ListView control so you can use it to select items This is useful when

you want to create a master/detail form

For example, the page in Listing 14.4 contains two ListView controls The first ListView

works like a tab strip It enables you to select a movie category The second ListView

displays a numbered list of matching movies

LISTING 14.4 MasterDetail.aspx

<title>Master/Detail</title>

.categoryContainer div

{

width: 100px;

font-size:small;

border: 1px solid black;

float:left;

padding:3px;

margin:3px;

}

.categoryContainer a

{

text-decoration:none;

}

.categoryContainer div:hover

{

Trang 7

background-color:#eeeeee;

}

#selected

{

background-color:silver;

}

</style>

</head>

<body>

<div>

<asp:ListView

ID=”lstMovieCategories”

DataSourceId=”srcMovieCategory”

DataKeyNames=”Id”

runat=”server”>

<div id=”itemContainer”

class=”categoryContainer”

runat=”server”>

</div>

</LayoutTemplate>

<div>

<asp:LinkButton id=”lnkSelect”

Text=’<%# Eval(“Name”) %>’

CommandName=”Select”

</div>

</ItemTemplate>

<%# Eval(“Name”) %>

</div>

</SelectedItemTemplate>

</asp:ListView>

<asp:ListView

ID=”lstMovies”

Trang 8

runat=”server”>

<ol id=”itemContainer”

runat=”server”>

</ol>

</LayoutTemplate>

</ItemTemplate>

</asp:ListView>

<asp:SqlDataSource

id=”srcMovieCategory”

SelectCommand=”SELECT Id, Name FROM MovieCategory”

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Title FROM Movie

WHERE CategoryId=@CategoryId”

Runat=”server”>

<asp:ControlParameter Name=”CategoryId”

ControlID=”lstMovieCategories” />

</SelectParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

The first ListView control in Listing 14.4 renders something resembling a tab strip (see

Figure 14.4) Notice that this ListView control has its DataKeyNames property set Setting the

DataKeyNames property causes the ListView control to build a hidden collection of primary

key values when the ListView is bound to its data source Each item in the ListView is

asso-ciated with an ID value

Trang 9

ptg Furthermore, notice that the ListView control includes a SelectedItemTemplate The

contents of this template are rendered for the selected item in the ListView You select an

item by clicking one of the links rendered by the ListView control’s ItemTemplate The

links are rendered with a LinkButton control Notice that the CommandName property of the

LinkButton has the value Select This magic command name causes the ListView to

change the selected item

The second ListView control uses the first ListView control as the source value for a select

parameter When you select a new item in the first ListView control, the second ListView

control displays matching movies

Sorting Database Data

You can sort the items in a ListView control by adding one or more button controls to

ListView that have a CommandName property set to the value Sort and a CommandArgument

property set to the name of a property to sort by For example, the page in Listing 14.5

contains a ListView control that renders an HTML table You can click the column

headers to sort the table by a particular column (see Figure 14.5)

FIGURE 14.4 Displaying a master/detail form with a ListView control

Trang 10

LISTING 14.5 SortListView.aspx

<title>Sort ListView</title>

</head>

<body>

<div>

<asp:ListView

ID=”lstMovies”

runat=”server”>

<table>

<thead>

<tr>

<th>

<asp:LinkButton id=”lnkTitle”

FIGURE 14.5 Sorting data with the ListView control

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