ASP.NET 4 Unleased - p 69 potx

Formatting the DataList Control The DataList control includes a rich set of properties that you can use to format the HTML rendered by the control.. Summary In this chapter, you learned

Trang 1

.edit

{

background-color:yellow;

}

a

{

color:blue;

}

</style>

<title>Edit DataList</title>

</head>

<body>

<div>

<asp:DataList

id=”dlstMovies”

DataSourceID=”srcMovies”

DataKeyField=”Id”

GridLines=”None”

OnEditCommand=”dlstMovies_EditCommand”

OnCancelCommand=”dlstMovies_CancelCommand”

OnUpdateCommand=”dlstMovies_UpdateCommand”

OnDeleteCommand=”dlstMovies_DeleteCommand”

CssClass=”movies”

EditItemStyle-CssClass=”edit”

Runat=”server”>

Directed by:

<%#Eval(“Director”) %>

<br />

In Theaters:

<%#Eval(“InTheaters”) %>

<asp:LinkButton

id=”lnkEdit”

CommandName=”Edit”

Text=”Edit”

Runat=”server” />

 | 

<asp:LinkButton

id=”lnkDelete”

CommandName=”Delete”

Text=”Delete”

OnClientClick=”return confirm(‘Are you sure?’);”

Trang 2

</ItemTemplate>

<asp:Label

id=”lblTitle”

Text=”Title:”

AssociatedControlID=”txtTitle”

<br />

<asp:TextBox

id=”txtTitle”

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

<asp:Label

id=”lblDirector”

Text=”Director:”

AssociatedControlID=”txtDirector”

<br />

<asp:TextBox

id=”txtDirector”

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

<asp:CheckBox

id=”chkInTheaters”

Text=”In Theaters”

Checked=’<%#Eval(“InTheaters”)%>’

<asp:LinkButton

id=”lnkUpdate”

CommandName=”Update”

Text=”Update”

 | 

<asp:LinkButton

id=”lnkCancel”

CommandName=”Cancel”

Text=”Cancel”

</EditItemTemplate>

</asp:DataList>

<asp:SqlDataSource

Trang 3

id=”srcMovies”

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

SelectCommand=”SELECT Id,Title,Director,InTheaters

FROM Movies”

UpdateCommand=”UPDATE Movies SET Title=@Title,

Director=@Director,InTheaters=@InTheaters

WHERE Id=@Id”

DeleteCommand=”DELETE Movies WHERE Id=@Id”

Runat=”server”>

<asp:Parameter Name=”Id” />

<asp:Parameter Name=”Title” />

<asp:Parameter Name=”Director” />

<asp:Parameter Name=”InTheaters” />

</UpdateParameters>

<asp:Parameter Name=”Id” />

</DeleteParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

The ItemTemplate contained in the DataList in Listing 13.11 includes an Edit LinkButton

and a Delete LinkButton When you click the Edit LinkButton, the DataList raises its

EditCommand event and the dlstMovies_Edit() method is executed Clicking the Delete

LinkButton raises the DeleteCommand event and the dlstMovies_Delete() method is

executed

The dlstMovies_Edit() method sets the EditItemIndex property of the DataList control

The EditItemTemplate is displayed for the item in the DataList that matches the

EditItemIndex

The EditItemTemplate includes form fields for editing a movie record and an Update and

Cancel LinkButton These LinkButtons raise the UpdateCommand and CancelCommand

events, and execute the corresponding event handlers

NOTE

The <%@ Page %> directive includes a MaintainScrollPositionOnPostback attribute

This attribute causes a page to scroll to the same position whenever you post the page

back to the server For example, when you click the Edit link next to a row in the

DataList, the page scrolls to the Edit link that you clicked

Trang 4

Formatting the DataList Control

The DataList control includes a rich set of properties that you can use to format the

HTML rendered by the control If you want to associate Cascading Style Sheet (CSS) rules

with different elements of the DataList, you can take advantage of any of the following

properties:

CssClass—Enables you to associate a CSS class with the DataList

AlternatingItemStyle—Enables you to format every other row of DataList

EditItemStyle—Enables you to format the DataList row selected for editing

FooterStyle—Enables you to format the footer row of DataList

HeaderStyle—Enables you to format the header row of DataList

ItemStyle—Enables you to format each row displayed by DataList

SelectedItemStyle—Enables you to format the selected row in DataList

SeparatorStyle—Enables you to format the row separator displayed by DataList

When formatting the DataList, you also need to work with the following properties:

GridLines—Enables you to add rules around the cells in the DataList Possible values

are None, Horizontal, Vertical, and Both

ShowFooter—Enables you to show or hide the footer row

ShowHeader—Enables you to show or hide the header row

UseAccessibleHeader—Enables you to render HTML <th> tags instead of <td> tags

for the cells in the header row

WEB STANDARDS NOTE

To make a page that contains a DataList more accessible to persons with

disabilities, you should always include a HeaderTemplate and enable the

UserAccessibleHeader property

The page in Listing 13.12 illustrates how you can take advantage of several of these

formatting properties (see Figure 13.10)

Trang 5

FIGURE 13.10 Formatting a DataList

LISTING 13.12 FormatDataList.aspx

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

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

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

html

{

background-color:#Silver;

}

.movies

{

font:14px Arial,Sans-Serif;

}

.header

{

font-size:18px;

letter-spacing:15px;

}

.item

{

Trang 6

padding:5px;

background-color:#eeeeee;

border-bottom:Solid 1px blue;

}

.alternating

{

padding:5px;

background-color:LightBlue;

border-bottom:Solid 1px blue;

}

</style>

<title>Format DataList</title>

</head>

<body>

<div>

<asp:DataList

id=”dlstMovies”

DataSourceID=”srcMovies”

UseAccessibleHeader=”true”

CssClass=”movies”

HeaderStyle-CssClass=”header”

ItemStyle-CssClass=”item”

AlternatingItemStyle-CssClass=”alternating”

Runat=”server”>

Movies

</HeaderTemplate>

<%#Eval(“Title”)%>

</ItemTemplate>

</asp:DataList>

<asp:SqlDataSource

id=”srcMovies”

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

SelectCommand=”SELECT Title FROM Movies”

</div>

</form>

</body>

</html>

Trang 7

Summary

In this chapter, you learned how to use the Repeater control and the DataList control to

display a set of database records First, you learned how to use the Repeater control to

display and edit database records For example, you learned how to use the Repeater

control to enable users to edit, delete, and insert database records

In the second half of this chapter, you learned how to work with the DataList control

You learned how to render both single and multicolumn tables with the DataList control

You also learned how to select rows with the DataList control Finally, you learned how

to edit records using the DataList control

Trang 8

Using the ListView and

DataPager Controls

Using the ListView Control Using the DataPager Control Summary

In this chapter, we examine the two databound controls

that were introduced in version 3.5 of NET Framework: the

ListView and the DataPager controls The ListView control

is extremely flexible You can use it in many of the same

situations in which you would have used the GridView,

DataList, FormView, or Repeater control in the past

The DataPager control works with the ListView control It

enables you to add support for paging to a ListView control

Using the ListView Control

You can think of the ListView control as a super-flexible

GridView control Like a GridView control, the ListView

control can be used to display, edit, delete, select, page

through, and sort database data However, unlike the

GridView, the ListView control is entirely template-driven

Furthermore, unlike the GridView control, you can use the

ListView control to insert new data into a database

You also can think of the ListView control as a replacement

for the DataList control Like a DataList control, the

ListView control can be used to display database records in

multiple columns For example, you can use the ListView

control to render a photo gallery

Finally, you can think of the ListView control as a

super-fancy Repeater control Like a Repeater control, the

ListView control is entirely template driven However,

unlike a Repeater control, the ListView control can be used

to edit, page through, and sort database data

Trang 9

The ListView control supports the following templates:

LayoutTemplate —Specifies the containing element for the contents of the ListView

ItemTemplate —Formats each item rendered by the ListView

ItemSeparatorTemplate —Displays content between each item rendered by the

ListView

GroupTemplate —Specifies the containing element for a group of items rendered by

the ListView

GroupSeparatorTemplate —Displays content between each group of items rendered

by the ListView

EmptyItemTemplate —Renders content for the remaining items in a GroupTemplate

EmptyDataTemplate —Specifies content that displays when no items are returned

from the ListView control’s data source

SelectedItemTemplate —Specifies the content displayed for the selected item in the

ListView

AlternatingItemTemplate —Renders different content for alternating items in a

ListView

EditItemTemplate —Renders content for editing an item in a ListView

InsertItemTemplate —Renders content for inserting a new item in a ListView

You learn how to use these various types of templates in the following sections

Using the LayoutTemplate and ItemTemplate

Let’s start with a ListView control simple scenario in which you might want to use the

ListView control Suppose that you have a set of database records that you want to

display in a set of HTML <div> tags The page in Listing 14.1 illustrates how you can use

the LayoutTemplate and ItemTemplate templates to display the records from the Movie

database table

LISTING 14.1 SimpleListView.aspx

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

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

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

<title>Simple ListView</title>

</head>

<body>

<div>

Trang 10

<asp:ListView

ID=”lstMovies”

DataSourceId=”srcMovies”

runat=”server”>

<div

style=”border:dashed 1px black”>

<asp:Placeholder id=”itemPlaceholder”

runat=”server” />

</div>

</LayoutTemplate>

<%# Eval(“Title”) %>

</div>

</ItemTemplate>

<%# Eval(“Title”) %>

</div>

</AlternatingItemTemplate>

No records found

</EmptyDataTemplate>

</asp:ListView>

<asp:SqlDataSource

id=”srcMovies”

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

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

</div>

</form>

</body>

</html>

The ListView control in Listing 14.1 contains five templates First, the LayoutTemplate

creates a single containing <div> tag for all the items rendered by the ListView The

content contained in the LayoutTemplate is rendered once and only once In the page

in Listing 14.1, the LayoutTemplate displays a <div> tag with a dashed border (see

Figure 14.1)

Định dạng
Số trang	10
Dung lượng	568,42 KB