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

Listing 3-15: Using the RadioButton server control VB Protected Sub RadioButton_CheckedChangedByVal sender As Object, _ ByVal e As System.EventArgs If RadioButton1.Checked = True Then

Trang 1

Figure 3-17

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

horizontal fashion:

The RadioButton Ser ver Control

The RadioButton server control is quite similar to the CheckBox server control It places a radio button on

your Web page Unlike a check box, however, a single radio button on a form does not make much sense

Radio buttons are generally form elements that require at least two options A typical set of RadioButton

controls on a page takes the following construction:

<asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="Set1" />

<asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="Set1"/>

Figure 3-18 shows the result

Figure 3-18

Trang 2

When you look at the code for the RadioButton control, note the standardTextproperty that places the text next to the radio button on the Web form The more important property here isGroupName, which

can be set in one of the RadioButton controls to match what it is set to in the other This enables the radio buttons on the Web form to work together for the end user How do they work together? Well, when one

of the radio buttons on the form is checked, the circle associated with the item selected appears filled in Any other filled-in circle from the same group in the collection is removed, ensuring that only one of the radio buttons in the collection is selected

Listing 3-15 shows an example of using the RadioButton control

Listing 3-15: Using the RadioButton server control

VB

<%@ Page Language="VB" %>

<script runat="server">

Protected Sub RadioButton_CheckedChanged(ByVal sender As Object, _

ByVal e As System.EventArgs)

If RadioButton1.Checked = True Then

Response.Write("You selected Visual Basic") Else

Response.Write("You selected C#") End If

End Sub

</script>

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

<head runat="server">

<title>RadioButton control</title>

</head>

<body>

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

<div>

<asp:RadioButton ID="RadioButton1" runat="server" Text="Visual Basic"

GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged"

AutoPostBack="True" />

<asp:RadioButton ID="RadioButton2" runat="server" Text="C#"

GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged"

AutoPostBack="True" />

</div>

</form>

</body>

</html>

C#

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

protected void RadioButton_CheckedChanged(object sender, EventArgs e)

{

if (RadioButton1.Checked == true) {

Response.Write("You selected Visual Basic");

Continued

Trang 3

} else { Response.Write("You selected C#");

} }

</script>

Like the CheckBox, the RadioButton control has aCheckedChangedevent that puts anOnCheckedChanged

attribute in the control The attribute’s value points to the server-side event that is fired when a selection

is made using one of the two radio buttons on the form Remember that theAutoPostBackproperty

needs to be set toTruefor this to work correctly

Figure 3-19 shows the results

Figure 3-19

One advantage that the RadioButton control has over a RadioButtonList control (which is discussed next)

is that it enables you to place other items (text, controls, or images) between the RadioButton controls

themselves RadioButtonList, however, is always a straight list of radio buttons on your Web page

The RadioButtonList Ser ver Control

The RadioButtonList server control lets you display a collection of radio buttons on a Web page The

RadioButtonList control is quite similar to the CheckBoxList and other list controls in that it allows you

to iterate through to see what the user selected, to make counts, or to perform other actions

A typical RadioButtonList control is written to the page in the following manner:

<asp:RadioButtonList ID="RadioButtonList1" runat="server">

<asp:ListItem Selected="True">English</asp:ListItem>

<asp:ListItem>Russian</asp:ListItem>

<asp:ListItem>Finnish</asp:ListItem>

<asp:ListItem>Swedish</asp:ListItem>

</asp:RadioButtonList>

Trang 4

Like the other list controls, this one uses instances of theListItemobject for each of the items contained

in the collection From the example, you can see that if theSelectedproperty is set toTrue, one of the

ListItemobjects is selected by default when the page is generated for the first time This produces the

results shown in Figure 3-20

Figure 3-20

TheSelectedproperty is not required, but it is a good idea if you want the end user to make some sort

of selection from this collection Using it makes it impossible to leave the collection blank

You can use the RadioButtonList control to check for the value selected by the end user in any of your

page methods Listing 3-16 shows aButton1_Clickevent that pushes out the value selected in the

RadioButtonList collection

Listing 3-16: Checking the value of the item selected from a RadioButtonList control

VB

Protected Sub Button1_Click(ByVal sender As Object, _

Label1.Text = "You selected: " & _

RadioButtonList1.SelectedItem.ToString()

End Sub

</script>

C#

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = "You selected: " +

RadioButtonList1.SelectedItem.ToString();

}

</script>

This bit of code gets at the item selected from the RadioButtonList collection ofListItemobjects It is how you work with other list controls that are provided in ASP.NET The RadioButtonList also affords you

access to theRepeatColumnsandRepeatDirectionproperties (these were explained in the CheckBoxList section) You can bind this control to items that come from any of the data source controls so that you

can dynamically create radio button lists on your Web pages

Trang 5

Image Ser ver Control

The Image server control enables you to work with the images that appear on your Web page from the

server-side code It is a simple server control, but it can give you the power to determine how your images

are displayed on the browser screen A typical Image control is constructed in the following manner:

<asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" />

The important property here isImageUrl It points to the file location of the image In this case, the

location is specified as theMyImage.giffile

Listing 3-17 shows an example of how to dynamically change theImageUrlproperty

Listing 3-17: Changing the ImageUrl property dynamically

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Image1.ImageUrl = "~/MyImage2.gif"

End Sub

</script>

<title>Image control</title>

</head>

<body>

<div>

<asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" /><br />

<br />

<asp:Button ID="Button1" runat="server" Text="Change Image"

OnClick="Button1_Click" />

</div>

</form>

</body>

</html>

C#

protected void Button1_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "~/MyImage2.gif";

}

</script>

In this example, an image (MyImage1.gif) is shown in the browser when the page is loaded for the first

time When the end user clicks the button on the page, a new image (MyImage2.gif) is loaded in the

postback process

Trang 6

Special circumstances can prevent end users from viewing an image that is part of your Web page They might be physically unable to see the image, or they might be using a text-only browser In these cases, their browsers look for the<img>element’slongdescattribute that points to a file containing a long

description of the image that is displayed

For these cases, the Image server control includes aDescriptionUrlattribute The value assigned to it

is a text file that contains a thorough description of the image with which it is associated Here is how to use it:

<asp:Image ID="Image1" runat="server" DescriptionUrl="~/Image01.txt" />

This code produces the following results in the browser:

<img id="Image1" src="INETA.jpg" longdesc="Image01.txt" alt="" />

Remember that the image does not support the user clicking the image If you want to program events

based on button clicks, use the ImageButton server control discussed earlier in this chapter

Table Ser ver Control

Tables are one of the Web page’s more common elements because the HTML<table>element is one

possible format utilized for controlling the layout of your Web page (CSS being the other) The typical

construction of the Table server control is as follows:

<asp:Table ID="Table1" runat="server">

<asp:TableRow Runat="server" Font-Bold="True"

ForeColor="Black" BackColor="Silver">

<asp:TableHeaderCell>First Name</asp:TableHeaderCell>

<asp:TableHeaderCell>Last Name</asp:TableHeaderCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>Bill</asp:TableCell>

<asp:TableCell>Evjen</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell>Devin</asp:TableCell>

<asp:TableCell>Rader</asp:TableCell>

</asp:TableRow>

</asp:Table>

This produces the simple three-rowed table shown in Figure 3-21

Figure 3-21 You can do a lot with the Table server control For example, you can dynamically add rows to the table,

as illustrated in Listing 3-18

Trang 7

Listing 3-18: Dynamically adding rows to the table

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

Dim tr As New TableRow()

Dim fname As New TableCell()

fname.Text = "Scott"

tr.Cells.Add(fname)

Dim lname As New TableCell()

lname.Text = "Hanselman"

tr.Cells.Add(lname)

Table1.Rows.Add(tr)

End Sub

C#

protected void Page_Load(object sender, EventArgs e)

{

TableRow tr = new TableRow();

TableCell fname = new TableCell();

fname.Text = "Scott";

tr.Cells.Add(fname);

TableCell lname = new TableCell();

lname.Text = "Hanselman";

tr.Cells.Add(lname);

Table1.Rows.Add(tr);

}

To add a single row to a Table control, you have to create new instances of theTableRowandTableCell

objects You create theTableCellobjects first and then place them within aTableRowobject that is added

to aTableobject

The Table server control is enhanced with some extra features One of the simpler new features is the

capability to add captions to the tables on Web pages Figure 3-22 shows a table with a caption

To give your table a caption, simply use the newCaptionattribute in the Table control, as illustrated in

Listing 3-19

Listing 3-19: Using the new Caption attribute

<title>Table Server Control</title>

</head>

Trang 8

<asp:Table ID="Table1" runat="server"

Caption="<b>Table 1:</b> This is an example of a caption above a table."

BackColor="Gainsboro">

<asp:TableRow ID="Tablerow1" Runat=server>

<asp:TableCell ID="Tablecell1" Runat="server">Lorem ipsum dolor sit

amet, consectetuer adipiscing elit Duis vel justo Aliquam adipiscing In mattis volutpat urna Donec adipiscing, nisl eget dictum egestas, felis nulla ornare ligula, ut bibendum pede augue

eu augue Sed vel risus nec urna pharetra imperdiet Aenean semper Sed ullamcorper auctor sapien Suspendisse luctus Ut ac nibh Nam lorem Aliquam dictum aliquam purus.</asp:TableCell>

</asp:TableRow>

</asp:Table>

</form>

</body>

</html>

Figure 3-22

By default, the caption is placed at the top center of the table, but you can control where it is placed by using another new attribute —CaptionAlign Its possible settings includeBottom,Left,NotSet,Right, andTop

In the past, an<asp:Table>element contained any number of<asp:TableRow>elements Now you

have some additional elements that can be nested within the<asp:Table>element These new elements include<asp:TableHeaderRow>and<asp:TableFooterRow> They add either a header or footer to

your table, enabling you to use the Table server control to page through lots of data but still retain some text in place to indicate the type of data being handled This is quite a powerful feature when you work with mobile applications that dictate that sometimes end users can move through only a few records at a time

Trang 9

The Calendar Ser ver Control

The Calendar server control is a rich control that enables you to place a full-featured calendar directly

on your Web pages It allows for a high degree of customization to ensure that it looks and behaves in a

unique manner The Calendar control, in its simplest form, is coded in the following manner:

<asp:Calendar ID="Calendar1" runat="server">

</asp:Calendar>

This code produces a calendar on your Web page without any styles added, as shown in Figure 3-23

Figure 3-23

Making a Date Selection from the Calendar Control

The calendar allows you to navigate through the months of the year and to select specific days in the

exposed month A simple application that enables the user to select a day of the month is shown in

Listing 3-20

Listing 3-20: Selecting a single day in the Calendar control

VB

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _

Response.Write("You selected: " & _ Calendar1.SelectedDate.ToShortDateString()) End Sub

</script>

<head id="Head1" runat="server">

<title>Using the Calendar Control</title>

</head>

Trang 10

<div>

<asp:Calendar ID="Calendar1" runat="server"

OnSelectionChanged="Calendar1_SelectionChanged">

</asp:Calendar>

</div>

</form>

</body>

</html>

C#

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Response.Write("You selected: " +

Calendar1.SelectedDate.ToShortDateString());

}

</script>

Running this application pulls up the calendar in the browser The end user can then select a single date

in it After a date is selected, theCalendar1_SelectionChangedevent is triggered and makes use of the

OnSelectionChangeattribute This event writes the value of the selected date to the screen The result is shown in Figure 3-24

Figure 3-24

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