ASP.NET 4 Unleased - p 68 ppt

Displaying Data in Multiple Columns You can render the contents of a DataList control into a multicolumn table in which each data item occupies a separate table cell.. Directed by: Box

Trang 1

Displaying Data in Multiple Columns

You can render the contents of a DataList control into a multicolumn table in which

each data item occupies a separate table cell Two properties modify the layout of the

HTML table rendered by the DataList control:

RepeatColumns—The number of columns to display

RepeatDirection—The direction to render the cells Possible values are Horizontal

and Vertical

For example, the page in Listing 13.8 displays the contents of the Movies database table in

a three-column layout (see Figure 13.6)

FIGURE 13.6 Displaying a multicolumn DataList

LISTING 13.8 MultiColumnDataList.aspx

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

<title>MultiColumn DataList</title>

</head>

<body>

<div>

Trang 2

<asp:DataList

id=”dlstMovies”

DataSourceID=”srcMovies”

RepeatColumns=”3”

GridLines=”Both”

Runat=”server”>

Directed by:

<%#Eval(“Director”) %>

<br />

Box Office Totals:

<%#Eval(“BoxOfficeTotals”,”{0:c}”) %>

</ItemTemplate>

</asp:DataList>

<asp:SqlDataSource

id=”srcMovies”

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

SelectCommand=”SELECT Title,Director,BoxOfficeTotals

FROM Movies”

Runat=”server” />

</div>

</form>

</body>

</html>

The DataList control in Listing 13.8 includes a RepeatColumns property that has the value 3

If you set the RepeatDirection property to the value Horizontal and do not assign a

value to the RepeatColumns property, the DataList renders its data items horizontally

without end

NOTE

You can display data items in multiple columns when the DataList is in Flow layout

mode In that case, <br> tags create the row breaks

Using Templates with the DataList Control

The DataList control supports all the same templates as the Repeater control:

ItemTemplate —Formats each item from the data source.

AlternatingItemTemplate —Formats every other item from the data source.

SeparatorTemplate —Formats between each item from the data source.

Trang 3

HeaderTemplate —Formats before all items from the data source.

FooterTemplate —Formats after all items from the data source.

In addition, the DataList supports the following templates:

EditItemTemplate—Displays when a row is selected for editing

SelectedItemTemplate—Displays when a row is selected

The DataList control in Listing 13.9 includes both a HeaderTemplate and a

FooterTemplate The HeaderTemplate contains the caption for the table The

FooterTemplate contains a Label control that displays the total for all the preceding rows

(see Figure 13.7)

LISTING 13.9 ShowDataListTemplates.aspx

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

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

decimal totals;

protected void dlstMovies_ItemDataBound(object sender, DataListItemEventArgs e)

{

FIGURE 13.7 Displaying a HeaderTemplate and FooterTemplate

Trang 4

if (e.Item.DataItem != null)

totals += (decimal)DataBinder.Eval(e.Item.DataItem, “BoxOfficeTotals”);

if (e.Item.ItemType == ListItemType.Footer)

{

Label lblTotal = (Label)e.Item.FindControl(“lblTotal”);

lblTotal.Text = totals.ToString(“c”);

}

</script>

.movies td

{

padding:10px;

text-align:right;

}

</style>

<title>Show DataList Templates</title>

</head>

<body>

<div>

<asp:DataList

id=”dlstMovies”

DataSourceID=”srcMovies”

GridLines=”Horizontal”

UseAccessibleHeader=”true”

OnItemDataBound=”dlstMovies_ItemDataBound”

CssClass=”movies”

Runat=”server” >

Movie Box Office Totals

</HeaderTemplate>

<%#Eval(“Title”)%>:

</ItemTemplate>

<b>Total:</b>

<asp:Label

id=”lblTotal”

</FooterTemplate>

</asp:DataList>

Trang 5

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Title,BoxOfficeTotals

FROM Movies”

</div>

</form>

</body>

</html>

The total displayed in the FooterTemplate is calculated by the ItemDataBound event

handler The Label control is extracted by the FindControl() method and the total is

assigned to the control’s Text property

Selecting Data with the DataList Control

You can use a DataList control as a menu by taking advantage of the control’s

SelectedValue property For example, the page in Listing 13.10 enables you to pick a

movie category and display a list of matching movies (see Figure 13.8)

FIGURE 13.8 Selecting a row in the DataList

Trang 6

LISTING 13.10 SelectDataList.aspx

html

{

background-color:orange;

}

.content

{

margin:auto;

width:600px;

background-color:white;

}

.column

{

float:left;

width:250px;

padding:20px;

}

.movies td

{

padding:10px;

}

a

{

padding:10px;

color:red;

}

a:hover

{

background-color:Gold;

}

</style>

<title>Select DataList</title>

</head>

<body>

<asp:DataList

Trang 7

id=”dlstMovieCategories”

DataSourceID=”srcMovieCategories”

DataKeyField=”Id”

GridLines=”Both”

CssClass=”movies”

Runat=”server”>

<asp:LinkButton

id=”lnkMovie”

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

CommandName=”Select”

</ItemTemplate>

</asp:DataList>

</div>

<asp:DataList

id=”dlstMovieDetails”

DataSourceID=”srcMovieDetails”

Runat=”server”>

Directed by:

<%#Eval(“Director”) %>

<br />

Box Office Totals:

</ItemTemplate>

</asp:DataList>

</div>

</div>

<asp:SqlDataSource

id=”srcMovieCategories”

SelectCommand=”SELECT Id, Name FROM MovieCategories”

<asp:SqlDataSource

id=”srcMovieDetails”

SelectCommand=”SELECT Title,Director,BoxOfficeTotals

FROM Movies WHERE CategoryId=@CategoryId”

Trang 8

Runat=”server”>

<asp:ControlParameter

Name=”CategoryId”

ControlID=”dlstMovieCategories”

PropertyName=”SelectedValue” />

</SelectParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

The page in Listing 13.10 contains two DataList controls The first control displays a menu

of movie categories and the second DataList control displays a list of matching movies

The first DataList in Listing 13.10 includes a DataKeyField property The DataKeyField

property accepts the name of a primary key column from the data source When this

property is set, the DataList control’s DataKeys collection is populated with the primary

keys from the data source when the control is bound to its data source

The first DataList contains a LinkButton inside its ItemTemplate, which looks like this:

<asp:LinkButton

id=”lnkMovie”

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

CommandName=”Select”

Because the LinkButton control’s CommandName property has the value Select, clicking the

button changes the value of the DataList control’s SelectedValue property The DataList

control’s SelectedValue property is used by the second SqlDataSource control to return

movies that match the selected category

NOTE

Unlike the GridView, DetailsView, ListView, and FormView controls, you cannot

assign the names of multiple primary key columns to the DataKeyField property

Editing Data with the DataList Control

You can use the DataList control to edit database records However, editing with the

DataList control requires more coding than editing with other DataBound controls, such

as the GridView, FormView, or DetailsView controls

The page in Listing 13.11 illustrates how you can edit and delete database records with the

DataList control (see Figure 13.9)

Trang 9

LISTING 13.11 EditDataList.aspx

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

protected void dlstMovies_EditCommand(object source, DataListCommandEventArgs e)

{

dlstMovies.EditItemIndex = e.Item.ItemIndex;

dlstMovies.DataBind();

}

protected void dlstMovies_UpdateCommand(object source,

➥DataListCommandEventArgs e)

{

// Get form fields

TextBox txtTitle = (TextBox)e.Item.FindControl(“txtTitle”);

TextBox txtDirector = (TextBox)e.Item.FindControl(“txtDirector”);

CheckBox chkInTheaters = (CheckBox)e.Item.FindControl(“chkInTheaters”);

// Assign parameters

srcMovies.UpdateParameters[“Id”].DefaultValue =

dlstMovies.DataKeys[e.Item.ItemIndex].ToString();

FIGURE 13.9 Editing database records with the DataList control

Trang 10

srcMovies.UpdateParameters[“Title”].DefaultValue = txtTitle.Text;

srcMovies.UpdateParameters[“Director”].DefaultValue = txtDirector.Text;

srcMovies.UpdateParameters[“InTheaters”].DefaultValue =

chkInTheaters.Checked.ToString();

// Call SqlDataSource Update

srcMovies.Update();

// Take out of Edit mode

dlstMovies.EditItemIndex = -1;

}

protected void dlstMovies_DeleteCommand(object source,

{

// Assign parameters

srcMovies.DeleteParameters[“Id”].DefaultValue =

dlstMovies.DataKeys[e.Item.ItemIndex].ToString();

// Call SqlDataSource Delete

srcMovies.Delete();

}

protected void dlstMovies_CancelCommand(object source,

{

dlstMovies.EditItemIndex = -1;

dlstMovies.DataBind();

}

</script>

html

{

background-color:silver;

}

.movies

{

background-color:white;

}

.movies td,.movies th

{

padding:10px;

border:solid 1px black;

}

Tiêu đề	Using the Repeater and DataList Controls
Trường học	University of Example
Chuyên ngành	Computer Science
Thể loại	Essay
Năm xuất bản	2025
Thành phố	Example City

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