ASP.NET 4 Unleased - p 68 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (707.17 KB, 10 trang )
ptg
644
CHAPTER 13 Using the Repeater and DataList Controls
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#” %>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>MultiColumn DataList</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
From the Library of Wow! eBook
ptg
645
Using the DataList Control
13
<asp:DataList
id=”dlstMovies”
DataSourceID=”srcMovies”
RepeatColumns=”3”
GridLines=”Both”
Runat=”server”>
<ItemTemplate>
<h1><%#Eval(“Title”)%></h1>
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 c an display data i tems in mu ltiple 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.
From the Library of Wow! eBook
ptg
646
CHAPTER 13 Using the Repeater and DataList Controls
. 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
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<script runat=”server”>
decimal totals;
protected void dlstMovies_ItemDataBound(object sender, DataListItemEventArgs e)
{
FIGURE 13.7 Displaying a HeaderTemplate and FooterTemplate.
From the Library of Wow! eBook
ptg
647
Using the DataList Control
13
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>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.movies td
{
padding:10px;
text-align:right;
}
</style>
<title>Show DataList Templates</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:DataList
id=”dlstMovies”
DataSourceID=”srcMovies”
GridLines=”Horizontal”
UseAccessibleHeader=”true”
OnItemDataBound=”dlstMovies_ItemDataBound”
CssClass=”movies”
Runat=”server” >
<HeaderTemplate>
Movie Box Office Totals
</HeaderTemplate>
<ItemTemplate>
<%#Eval(“Title”)%>:
<%#Eval(“BoxOfficeTotals”,”{0:c}”) %>
</ItemTemplate>
<FooterTemplate>
<b>Total:</b>
<asp:Label
id=”lblTotal”
Runat=”server” />
</FooterTemplate>
</asp:DataList>
From the Library of Wow! eBook
ptg
648
CHAPTER 13 Using the Repeater and DataList Controls
<asp:SqlDataSource
id=”srcMovies”
ConnectionString=”<%$ ConnectionStrings:Movies %>”
SelectCommand=”SELECT Title,BoxOfficeTotals
FROM Movies”
Runat=”server” />
</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.
From the Library of Wow! eBook
ptg
649
Using the DataList Control
13
LISTING 13.10 SelectDataList.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
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>
<form id=”form1” runat=”server”>
<div class=”content”>
<div class=”column”>
<asp:DataList
From the Library of Wow! eBook
ptg
650
CHAPTER 13 Using the Repeater and DataList Controls
id=”dlstMovieCategories”
DataSourceID=”srcMovieCategories”
DataKeyField=”Id”
GridLines=”Both”
CssClass=”movies”
Runat=”server”>
<ItemTemplate>
<asp:LinkButton
id=”lnkMovie”
Text=’<%#Eval(“Name”) %>’
CommandName=”Select”
Runat=”server” />
</ItemTemplate>
</asp:DataList>
</div>
<div class=”column”>
<asp:DataList
id=”dlstMovieDetails”
DataSourceID=”srcMovieDetails”
Runat=”server”>
<ItemTemplate>
<h1><%#Eval(“Title”)%></h1>
Directed by:
<%#Eval(“Director”) %>
<br />
Box Office Totals:
<%#Eval(“BoxOfficeTotals”,”{0:c}”) %>
</ItemTemplate>
</asp:DataList>
</div>
<br style=”clear:both” />
</div>
<asp:SqlDataSource
id=”srcMovieCategories”
ConnectionString=”<%$ ConnectionStrings:Movies %>”
SelectCommand=”SELECT Id, Name FROM MovieCategories”
Runat=”server” />
<asp:SqlDataSource
id=”srcMovieDetails”
ConnectionString=”<%$ ConnectionStrings:Movies %>”
SelectCommand=”SELECT Title,Director,BoxOfficeTotals
FROM Movies WHERE CategoryId=@CategoryId”
From the Library of Wow! eBook
ptg
651
Using the DataList Control
13
Runat=”server”>
<SelectParameters>
<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”
Runat=”server” />
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).
From the Library of Wow! eBook
ptg
652
CHAPTER 13 Using the Repeater and DataList Controls
LISTING 13.11 EditDataList.aspx
<%@ Page Language=”C#” MaintainScrollPositionOnPostback=”true” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<script runat=”server”>
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.
From the Library of Wow! eBook
ptg
653
Using the DataList Control
13
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,
➥
DataListCommandEventArgs e)
{
// Assign parameters
srcMovies.DeleteParameters[“Id”].DefaultValue =
dlstMovies.DataKeys[e.Item.ItemIndex].ToString();
// Call SqlDataSource Delete
srcMovies.Delete();
}
protected void dlstMovies_CancelCommand(object source,
➥
DataListCommandEventArgs e)
{
dlstMovies.EditItemIndex = -1;
dlstMovies.DataBind();
}
</script>
<html xmlns=”
<head id=”Head1” runat=”server”>
<style type=”text/css”>
html
{
background-color:silver;
}
.movies
{
background-color:white;
}
.movies td,.movies th
{
padding:10px;
border:solid 1px black;
}
From the Library of Wow! eBook
