Professional ASP.NET 3.5 in C# and Visual Basic Part 46 pptx

Listing 8-20: Using both the AlternatingItemTemplate and the SeparatorTemplate DataList Control Company Name: CompanyName: In this case, the AlternatingItemTe

Trang 1

<span id="DataList1_ctl00_CompanyNameLabel">Alfreds Futterkiste</span>

<br />

</td>

</tr><tr>

<td>

CompanyName:

<span id="DataList1_ctl01_CompanyNameLabel">

Ana Trujillo Emparedados y helados</span>

<br />

</td>

</tr>

<! Code removed for clarity >

</table>

Although this table layout is the default, you can change this so that the DataList control outputs<span>

tags instead This is done through the use of theRepeatLayoutproperty of the DataList control You will

need to rework your DataList, as is shown in Listing 8-19

Listing 8-19: Changing the output style using RepeatLayout

<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1"

RepeatLayout="Flow">

<ItemTemplate>

Company Name:

<asp:Label ID="CompanyNameLabel" runat="server"

Text=’<%# Eval("CompanyName") %>’ />

<br />

</ItemTemplate>

</asp:DataList>

The possible options for theRepeatLayoutproperty are eitherTableorFlow.Tableis the default

set-ting The output you will get when looking at the source of the page when using theFlowsetting is

presented here:

<span id="DataList1">

<span>

CompanyName:

<span id="DataList1_ctl00_CompanyNameLabel">Alfreds Futterkiste</span>

<br />

</span><br />

<span>

CompanyName:

<span id="DataList1_ctl01_CompanyNameLabel">

Ana Trujillo Emparedados y helados</span>

<br />

</span>

Trang 2

<! Code removed for clarity >

</span>

Working with Other Layout Templates

You will find that the other templates are just as easy to work with as the ItemTemplate Listing 8-20

shows you how to add the AlternatingItemTemplate and the SeparatorTemplate to the company name

display

Listing 8-20: Using both the AlternatingItemTemplate and the SeparatorTemplate

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DataListControl.aspx.vb"

Inherits="DataListControl" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>DataList Control</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">

<ItemTemplate>

Company Name:

<br />

</ItemTemplate>

<AlternatingItemTemplate>

CompanyName:

BackColor="LightGray"

<br />

</AlternatingItemTemplate>

<SeparatorTemplate>

<hr />

</SeparatorTemplate>

</asp:DataList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:DSN_Northwind %>"

SelectCommand="SELECT [CompanyName] FROM [Customers]">

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

In this case, the AlternatingItemTemplate is a repeat of the ItemTemplate, but the addition of the Back-Colorproperty to the Label control is contained within the item The SeparatorTemplate is used between

Trang 3

each item, whether it is from the ItemTemplate or the AlternatingItemTemplate In this case, a simple

< hr / > element is used to draw a line between each item The output of this is shown here in Figure 8-6

Figure 8-6

This process allows you to change how items are defined within the alternating rows and to put a

separator between the elements If you wanted just alternating row colors or an alternating style, it

might not always be the best approach to use the<AlternatingItemTemplate>element, but you will

find that it is better to use the<AlternatingItemStyle>element instead This approach is presented

here in Listing 8-21

Listing 8-21: Using template styles

BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"

CellPadding="3" ForeColor="Black" GridLines="Vertical">

<FooterStyle BackColor="#CCCCCC" />

<AlternatingItemStyle BackColor="#CCCCCC" />

<SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />

<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />

<ItemTemplate>

CompanyName:

<br />

</ItemTemplate>

</asp:DataList>

You will notice that each of the available templates also have an associated style element Figure 8-7

shows the use of these styles

Trang 4

Figure 8-7

Working with Multiple Columns

Template-based controls are better at displaying items in multiple columns than other controls, such

as the GridView control TheRepeatColumnsproperty takes care of this The code to make use of this

property is shown in Listing 8-22

Listing 8-22: Creating multiple columns using the RepeatColumns property

CellPadding="2" RepeatColumns="3" RepeatDirection="Horizontal">

<ItemTemplate>

Company Name:

<br />

</ItemTemplate>

</asp:DataList>

Running this bit of code in your page produces the results shown in Figure 8-8

TheRepeatDirectionproperty instructs the DataList control about how to lay out the items bound to

the control on the Web page Possible values includeVerticalandHorizontal The default value is

Vertical Setting it toVerticalwith aRepeatColumnsetting of3gives the following results:

Trang 5

Figure 8-8

When theRepeatDirectionproperty is set toHorizontal, you get the items laid out in a horizontal

fashion:

The ListV iew Ser ver Control

One of the newest template-based controls is the ListView control This is a control that is only available

in the 3.5 version of the NET Framework This control is considered a better alternative to the DataList

control You will find that this control gives you more control over the layout and works quite nicely in

Visual Studio because it provides a set of wizards to easily set up your layout with the most common

options

Looking at the Available Templates

As with the DataList control, the ListView control has a series of available templates at your disposal

Each one of these templates controls a specific aspect of the layout The following table defines the layout

options available to this control

Template Description

LayoutTemplate The core template that allows you to define the structure of the entire

layout Using this layout, you can use tables, spans, or anything else you want to layout your data elements

ItemSeparatorTemplate Defines the layout of any separator that is used between items

Trang 6

Template Description

GroupSeparatorTemplate Defines the layout of any separator that is used between groups

EmptyItemTemplate Defines the layout of the empty items that might be contained within

a group For instance, if you group by ten items and the last page contains only seven items, then the last three items will use this template

EmptyDataTemplate Defines the layout for items that do not contain data

SelectedItemTemplate Allows for a row or item to be defined on how it looks and behaves

when selected

AlternatingItemTemplate Works in conjunction with theItemTemplateto provide a layout for

all the odd rows within the layout This is commonly used if you want

to have a grid or layout where each row is distinguished in some way (such as having a different background color)

when editing

InsertItemTemplate Allows for a row or item to be defined on how it looks and behaves

when performing an insert

Next, the following sections look at using some of these in your ASP.NET page

Using the Templates

In creating a page that makes use of the ListView control, the first step will be to create a basic page with

a ListView control on it, as illustrated here in Listing 8-23

Listing 8-23: Creating the base page

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ListViewControl.aspx.vb"

Inherits="ListViewControl" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ListView Control</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ListView ID="ListView1" runat="server" DataKeyNames="CustomerID"

DataSourceID="SqlDataSource1">

</asp:ListView>

Continued

Trang 7

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:DSN_Northwind %>"

SelectCommand="SELECT * FROM [Customers] ORDER BY [CompanyName]"

InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (@CustomerID,

@CompanyName, @ContactName, @ContactTitle, @Address, @City, @Region,

@PostalCode, @Country, @Phone, @Fax)"

UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @CustomerID">

<UpdateParameters>

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="ContactName" Type="String" />

<asp:Parameter Name="ContactTitle" Type="String" />

<asp:Parameter Name="Address" Type="String" />

<asp:Parameter Name="City" Type="String" />

<asp:Parameter Name="Region" Type="String" />

<asp:Parameter Name="PostalCode" Type="String" />

<asp:Parameter Name="Country" Type="String" />

<asp:Parameter Name="Phone" Type="String" />

<asp:Parameter Name="Fax" Type="String" />

<asp:Parameter Name="CustomerID" Type="String" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="CustomerID" Type="String" />

<asp:Parameter Name="CompanyName" Type="String" />

<asp:Parameter Name="ContactName" Type="String" />

<asp:Parameter Name="ContactTitle" Type="String" />

<asp:Parameter Name="Address" Type="String" />

<asp:Parameter Name="City" Type="String" />

<asp:Parameter Name="Region" Type="String" />

<asp:Parameter Name="PostalCode" Type="String" />

<asp:Parameter Name="Country" Type="String" />

<asp:Parameter Name="Phone" Type="String" />

<asp:Parameter Name="Fax" Type="String" />

</InsertParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

In this case, you have a base ListView control and a SqlDataSource control that has been wired up to

the Northwind sample database and provided Select, Update, and Insert methods The ListView control

itself is then bound to the SqlDataSource control It provides the primary key of the table for working

with the various queries through the use of theDataKeyNamesproperty

Creating the Layout Template

The next step is to create the layout of the overall control using the LayoutTemplate The use of this

Trang 8

Listing 8-24: Using the LayoutTemplate element

<LayoutTemplate>

<table runat="server">

<tr runat="server">

<td runat="server">

<table ID="itemPlaceholderContainer" runat="server" border="1"

style="background-color: #FFFFFF;border-collapse: collapse;

border-color: #999999;border-style:none;border-width:1px;

font-family: Verdana, Arial, Helvetica, sans-serif;">

<tr runat="server" style="background-color:#DCDCDC;color: #000000;">

<th runat="server"></th>

<th runat="server">Customer ID</th>

<th runat="server">Company Name</th>

<th runat="server">Contact Name</th>

</tr>

<tr ID="itemPlaceholder" runat="server"></tr>

</table>

</td>

</tr>

<tr runat="server">

<td runat="server" style="text-align: center;background-color: #CCCCCC;

font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;">

<asp:DataPager ID="DataPager1" runat="server">

<Fields>

<asp:NextPreviousPagerField ButtonType="Button"

ShowFirstPageButton="True" ShowNextPageButton="False"

ShowPreviousPageButton="False" />

<asp:NumericPagerField />

ShowLastPageButton="True" ShowNextPageButton="False"

</Fields>

</asp:DataPager>

</td>

</tr>

</table>

</LayoutTemplate>

This layout template constructs the layout as a grid using tables to layout the items A styled table is

defined with a header in place The most important part of laying out the template is that the container itself is defined using a control with theIDvalue ofitemPlaceholderContainer The element will also need to be made a server control by adding therunatproperty

</table>

The placeholder for each data item needs to take the same form, but theIDof the server control you make needs to have a value ofitemPlaceholder

Trang 9

<tr runat="server" style="background-color:#DCDCDC;color: #000000;">

<th runat="server"></th>

<th runat="server">Customer ID</th>

<th runat="server">Company Name</th>

<th runat="server">Contact Name</th>

</tr>

<tr ID="itemPlaceholder" runat="server"></tr>

</table>

It is important to keep theitemPlaceholderelement within the itemPlaceholderContainer control,

within the layout template It cannot sit outside of the container

The final part of this layout is the new DataPager server control This new server control is part of

ASP.NET 3.5

<asp:DataPager ID="DataPager1" runat="server">

<Fields>

ShowFirstPageButton="True" ShowNextPageButton="False"

<asp:NumericPagerField />

ShowLastPageButton="True" ShowNextPageButton="False"

</Fields>

</asp:DataPager>

The DataPager works with template-based data in allowing you to control how end users move across

the pages of the data collection

Now that the LayoutTemplate is in place, the next step is to create the ItemTemplate

Creating the ItemTemplate

The ItemTemplate that you create is quite similar to the ItemTemplate that is part of the DataList

con-trol that was discussed earlier In this case, however, the ItemTemplate is placed in the specific spot

within the layout of the page where you defined the itemPlaceholder control to be Listing 8-25 shows

the ItemTemplate for this example

Listing 8-25: Building the ItemTemplate

<ItemTemplate>

<tr style="background-color:#DCDCDC;color: #000000;">

<td>

<asp:Button ID="EditButton" runat="server"

CommandName="Edit" Text="Edit" />

</td>

<td>

Trang 10

<asp:Label ID="CustomerIDLabel" runat="server"

Text=’<%# Eval("CustomerID") %>’ />

</td>

<td>

</td>

<td>

<asp:Label ID="ContactNameLabel" runat="server"

Text=’<%# Eval("ContactName") %>’ />

</td>

</tr>

</ItemTemplate>

Creating the EditItemTemplate

The EditItemTemplate is the area that shows up when you decide to edit the data item (in this case, a

row of data) Listing 8-26 shows the EditItemTemplate in use

Listing 8-26: Building the EditItemTemplate

<EditItemTemplate>

<tr style="background-color:#008A8C;color: #FFFFFF;">

<td>

<asp:Button ID="UpdateButton" runat="server"

CommandName="Update" Text="Update" />

<asp:Button ID="CancelButton" runat="server"

CommandName="Cancel" Text="Cancel" />

</td>

<td>

<asp:Label ID="CustomerIDLabel1" runat="server"

Text=’<%# Eval("CustomerID") %>’ />

</td>

<td>

<asp:TextBox ID="CompanyNameTextBox" runat="server"

Text=’<%# Bind("CompanyName") %>’ />

</td>

<td>

<asp:TextBox ID="ContactNameTextBox" runat="server"

Text=’<%# Bind("ContactName") %>’ />

</td>

</tr>

</EditItemTemplate>

In this case, the EditItemTemplate, when shown, displays an Update and Cancel button to manipulate the editing options When editing, the values are placed within text boxes and the values are then updated into the database through theUpdatecommand

Creating the EmptyItemTemplate

If there are no values in the database, then you should prepare to gracefully show something in your

layout TheEmptyItemTemplateis usedin Listing 8-27 to perform that operation

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