ASP.NET 4 Unleased - p 49 doc

The ddlMovies_SelectedIndexChanged method displays the selected list item in a Label control.. Using the Items Collection All the list items rendered by a List control are contained in t

Trang 1

SelectCommand=”SELECT Id, Title FROM Movies”

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

Runat=”server” />

</div>

</form>

</body>

</html>

When you enable the AutoPostBack property, a JavaScript onchange() event handler is

added to the List control The onchange event is supported by all recent browsers

includ-ing Firefox 1.0 and Opera 8.0

The DropDownList control has a SelectedIndexChanged event handler named

ddlMovies_SelectedIndexChanged() The SelectedIndexChanged event is raised whenever

you make a new selection in the List control (independent of the AutoPostBack property)

The ddlMovies_SelectedIndexChanged() method displays the selected list item in a Label

control

WEB STANDARDS NOTE

You should avoid using the AutoPostBack property because it creates accessibility

problems for persons with disabilities If you can’t use a mouse, and you are

interact-ing with a website through the keyboard, havinteract-ing a page post back to the server

whenev-er you make a selection change is a frustrating expwhenev-erience

Using the Items Collection

All the list items rendered by a List control are contained in the List control’s list item

collection This collection is exposed by the Items property

You can work directly with the list items in this collection For example, you can add or

remove particular list items, or you can change the order of the list items

The page in Listing 10.8 contains two ListBox controls and two button controls When

you click the Add button, a list item is moved from the first ListBox to the second

ListBox control When you click Remove, the list item is moved back to the original List

control (see Figure 10.7)

Trang 2

LISTING 10.8 ListPicker.aspx

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

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

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

/// <summary>

/// Move item from All Movies to Favorite Movies

/// </summary>

protected void btnAdd_Click(object sender, EventArgs e)

{

ListItem item = lstAllMovies.SelectedItem;

if (item != null)

{

lstAllMovies.Items.Remove(item);

lstFavoriteMovies.ClearSelection();

lstFavoriteMovies.Items.Add(item);

}

FIGURE 10.7 Using the ListPicker to select list items

Trang 3

/// </summary>

protected void btnRemove_Click(object sender, EventArgs e)

{

ListItem item = lstFavoriteMovies.SelectedItem;

if (item != null)

{

lstFavoriteMovies.Items.Remove(item);

lstAllMovies.ClearSelection();

lstAllMovies.Items.Add(item);

}

/// <summary>

/// When the form is submitted,

/// show the contents of the

/// Favorite Movies ListBox

/// </summary>

protected void btnSubmit_Click(object sender, EventArgs e)

{

foreach (ListItem item in lstFavoriteMovies.Items)

lblResults.Text += “<li>” + item.Text;

}

</script>

.listPicker

{

border:solid 1px black;

padding:5px;

width:380px;

background-color:silver;

}

.listPicker select

{

width:100%;

}

</style>

<title>List Picker</title>

</head>

<body>

Trang 4

<asp:ListBox

id=”lstAllMovies”

DataSourceID=”srcMovies”

DataTextField=”Title”

DataValueField=”Id”

</div>

<asp:Button

id=”btnAdd”

Text=” >”

ToolTip=”Add List Item”

Runat=”server” OnClick=”btnAdd_Click” />

<br />

<asp:Button

id=”btnRemove”

Text=”< ”

ToolTip=”Remove List Item”

Runat=”server” OnClick=”btnRemove_Click” />

</div>

<asp:ListBox

id=”lstFavoriteMovies”

</div>

</div>

<p>

<asp:Button

id=”btnSubmit”

Text=”Submit Form”

Runat=”server” OnClick=”btnSubmit_Click” />

</p>

<hr />

<asp:Label

id=”lblResults”

EnableViewState=”false”

Trang 5

<asp:SqlDataSource

id=”srcMovies”

</form>

</body>

</html>

The first ListBox in Listing 10.8 is bound to the Movies database table You can use the

ListBox controls to pick your favorite movies by moving movie titles from the first

ListBox to the second ListBox

When you click the Add button, the btnAdd_Click() method executes This method grabs

the selected item from the All Movies ListBox and adds it to the Favorite Movies ListBox

The Remove button does exactly the opposite

Both the btnAdd_Click() and btnRemove_Click() methods call the ClearSelection()

method of the ListBox class This method iterates through all the list items and sets the

Selected property for each list item to the value False If multiple list items are selected,

an exception is thrown

NOTE

One problem with the page discussed in this section is that the page must be

post-ed back to the server each time you move an item from the first ListBox to the

sec-ond ListBox At the end of this chapter, you learn how to create a MultiSelectList

control, which uses a client-side script to get around this limitation

Working with the DropDownList Control

The DropDownList control enables you to display a list of options while requiring a

minimum of screen real estate A user can select only one option at a time when using

this control

The page in Listing 10.9 illustrates how you can use the DropDownList control to display

all the movie titles from the Movies database table (see Figure 10.8)

Trang 6

LISTING 10.9 ShowDropDownList.aspx

{

lblMovie.Text = ddlMovies.SelectedItem.Text;

}

</script>

<title>Show DropDownList</title>

</head>

<body>

<div>

FIGURE 10.8 Displaying list items with the DropDownList control

Trang 7

<asp:DropDownList

id=”ddlMovies”

<asp:Button

id=”btnSubmit”

Text=”Submit”

OnClick=”btnSubmit_Click”

<hr />

<asp:Label

id=”lblMovie”

<asp:SqlDataSource

id=”srcMovies”

</div>

</form>

</body>

</html>

The DropDownList control renders an HTML <select> tag One problem with the HTML

<select> tag is that it has an infinite z index In other words, you can’t place other

objects, such as an absolutely positioned <div> tag, in front of a DropDownList control in

a page

One way to get around this problem is to use a third-party control such as the

EasyListBox control (available at http://www.EasyListBox.com) This control works fine

when other objects are layered over it It also supports several advanced features such as

multiple columns and images in list items

Trang 8

Working with the RadioButtonList Control

The RadioButtonList control, like the DropDownList control, enables a user to select only

one list item at a time The RadioButttonList control displays a list of radio buttons that

can be arranged either horizontally or vertically

The page in Listing 10.10 illustrates how you can use the RadioButtonList control to

display a list of movie titles (see Figure 10.9)

FIGURE 10.9 Displaying list items with the RadioButtonList control

LISTING 10.10 ShowRadioButtonList.aspx

{

lblMovie.Text = rblMovies.SelectedItem.Text;

}

Trang 9

<title>Show RadioButtonList</title>

</head>

<body>

<div>

<asp:RadioButtonList

id=”rblMovies”

RepeatColumns=”3”

<asp:Button

id=”btnSubmit”

Text=”Submit”

Runat=”server” OnClick=”btnSubmit_Click” />

<hr />

<asp:Label

id=”lblMovie”

<asp:SqlDataSource

id=”srcMovies”

</div>

</form>

</body>

</html>

In Listing 10.10, the radio buttons are rendered in a three-column layout The

RadioButtonList control includes three properties that have an effect on its layout:

Horizontal and Vertical

Possible values are Table and Flow

Trang 10

By default, the radio buttons rendered by the RadioButtonList control are rendered in

an HTML table If you set the RepeatLayout property to the value Flow, the radio buttons

are not rendered in a table Even when the RadioButtonList renders its items in Flow

layout mode, you can specify multiple columns

Working with the ListBox Control

The ListBox control is similar to the DropDownList control with two important

differ-ences First, the ListBox control requires more screen real estate because it always displays

a certain number of list items Furthermore, unlike the DropDownList control, the ListBox

control enables a user to select multiple items

The page in Listing 10.11 illustrates how you can enable a user to select a single item from

a ListBox control (see Figure 10.10)

FIGURE 10.10 Displaying list items with the ListBox control

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