Professional ASP.NET 3.5 in C# and Visual Basic Part 103 docx

TextBoxWatermarkExtender The TextBoxWatermarkExtender control allows you to put instructions within controls for the end users, which gives them a better understanding of what to use the

Trang 1

<title>SlideShowExtender Control</title>

</head>

<body>

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

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Panel ID="Panel1" runat="server" Width="300px"

HorizontalAlign="Center">

<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"

ImageTitleLabelID="LabelTitle" TargetControlID="Image1"

UseContextKey="True" NextButtonID="ButtonNext"

PlayButtonID="ButtonPlay"

PreviousButtonID="ButtonPrevious"

SlideShowServiceMethod="GetSlides"

ImageDescriptionLabelID="LabelDescription">

</cc1:SlideShowExtender>

<asp:Label ID="LabelTitle" runat="server" Text="Label"

Font-Bold="True"></asp:Label><br /><br />

<asp:Image ID="Image1" runat="server"

ImageUrl="Images/Garden.jpg" /><br />

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

Text="Label"></asp:Label><br /><br />

<asp:Button ID="ButtonPrevious" runat="server" Text="Previous" />

<asp:Button ID="ButtonNext" runat="server" Text="Next" />

<asp:Button ID="ButtonPlay" runat="server" />

</asp:Panel>

</div>

</form>

</body>

</html>

The SlideShowExtender control has a lot of available properties available You can specify the

loca-tion where you are defining the image title and descriploca-tion using theImageTitleLabelIDand the

ImageDescriptionLabelIDproperties In addition to that, this page contains three Button controls One

to act as the Previous button, another for the Next button, and the final one as the Play button However,

it is important to note that when the Play button is clicked (to start the slideshow), it turns into the Stop

button

TheSlideShowServiceMethodproperty is important because it points to the server-side method that

returns the images that are part of the slide show In this case, it is referring to a method called GetSlides,

which is represented here in Listing 20-29

Listing 20-29: The GetSlides method implementation

VB

Partial Class SlideShowExtender

Inherits System.Web.UI.Page

<System.Web.Services.WebMethodAttribute()> _

<System.Web.Script.Services.ScriptMethodAttribute()> _

Trang 2

Public Shared Function GetSlides(ByVal contextKey As System.String) _

As AjaxControlToolkit.Slide()

Return New AjaxControlToolkit.Slide() { _ New AjaxControlToolkit.Slide("Images/Creek.jpg",

"The Creek", "This is a picture of a creek."), New AjaxControlToolkit.Slide("Images/Dock.jpg",

"The Dock", "This is a picture of a Dock."), New AjaxControlToolkit.Slide("Images/Garden.jpg",

"The Garden", "This is a picture of a Garden.") } End Function

End Class

C#

public partial class SlideShowExtender : System.Web.UI.Page

{

[System.Web.Services.WebMethodAttribute(),

System.Web.Script.Services.ScriptMethodAttribute()]

public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)

{

return new AjaxControlToolkit.Slide[] { new AjaxControlToolkit.Slide("Images/Creek.jpg",

"The Creek", "This is a picture of a creek."), new AjaxControlToolkit.Slide("Images/Dock.jpg",

"The Dock", "This is a picture of a Dock."), new AjaxControlToolkit.Slide("Images/Garden.jpg",

"The Garden", "This is a picture of a Garden.") };

}

With the code-behind in place, the SlideShowExtender has a server-side method to call for the photos

This method, calledGetSlides(), returns an array ofSlideobjects which require the location of the

object (the path), the title, and the description When running this page, you get something similar to

the following results shown in Figure 20-37

Pressing the Play button on the page will rotates the images until they are done They will not repeat in

a loop unless you have the SlideShowExtender control’sLoopproperty set toTrue (It is set toFalseby default.)

The other important property to pay attention to is thePlayIntervalproperty The value of this property

is an integer that represents the number of milliseconds that the browser will take to change to the next photo in the series of images By default, this is set to3000milliseconds

TextBoxWatermarkExtender

The TextBoxWatermarkExtender control allows you to put instructions within controls for the end

users, which gives them a better understanding of what to use the control for This can be text or even

images (when using CSS) Listing 20-30 shows an example of using this control with a TextBox server

control

Trang 3

Listing 20-30: Using the TextBoxWatermarkExtender control with a TextBox control

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="cc1" %>

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

<head runat="server">

<title>TextBoxWatermarkExtender Control</title>

</head>

<body>

<div>

<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"

WatermarkText="Enter in something here!" TargetControlID="TextBox1">

</cc1:TextBoxWatermarkExtender>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>

Figure 20-37

Trang 4

In this case, the TextBoxWatermarkExtender control is associated with a simple TextBox control and

uses theWatermarkTextproperty to provide the text that will appear inside the actual TextBox control Figure 20-38 shows the results of the code from this listing

Figure 20-38 The text in the image from Figure 20-38 is straight text with no style inside of the TextBox control

When the end user clicks inside of the TextBox control, the text will disappear and the cursor will be

properly placed at the beginning of the text box

To apply some style to the content that you use as a watermark, you can use theWatermarkCssClass

property You can change the code to include a bit of style as shown in Listing 20-31

Listing 20-31: Applying style to the watermark

TagPrefix="cc1" %>

<title>TextBoxWatermarkExtender Control</title>

<style type="text/css">

.watermark

{

width:150px;

font:Verdana;

font-style:italic;

color:GrayText;

}

</style>

</head>

<body>

<div>

<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"

WatermarkText="Enter in something here!" TargetControlID="TextBox1"

WatermarkCssClass="watermark">

</cc1:TextBoxWatermarkExtender>

</div>

</form>

</body>

</html>

This time, the WatermarkCssClass property is used and points to the inline CSS class,watermark, which

is on the page Running this page, you will see the style applied as shown in Figure 20-39

Trang 5

Figure 20-39

ToggleButtonExtender

The ToggleButtonExtender control works with CheckBox controls and allows you to use an image of

your own instead of the standard check box images that the CheckBox controls typically use Using

the ToggleButtonExtender control, you are able to specify images for checked, unchecked, and disabled

statuses Listing 20-32 shows an example of using this control

Listing 20-32: Using the ToggleButtonExtender control

TagPrefix="cc1" %>

<title>ToggleButtonExtender Control</title>

</head>

<body>

<div>

<cc1:MutuallyExclusiveCheckBoxExtender

ID="MutuallyExclusiveCheckBoxExtender1" runat="server" Key="MyCheckBoxes"

TargetControlID="CheckBox1">

</cc1:MutuallyExclusiveCheckBoxExtender>

<cc1:MutuallyExclusiveCheckBoxExtender

ID="MutuallyExclusiveCheckBoxExtender2" runat="server" Key="MyCheckBoxes"

TargetControlID="CheckBox2">

</cc1:MutuallyExclusiveCheckBoxExtender>

<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"

TargetControlID="CheckBox1" UncheckedImageUrl="Images/Unchecked.gif"

CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked"

UncheckedImageAlternateText="Not Checked" ImageWidth="25"

ImageHeight="25">

</cc1:ToggleButtonExtender>

<asp:CheckBox ID="CheckBox1" runat="server" Text=" Option One" />

<cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"

TargetControlID="CheckBox2" UncheckedImageUrl="Images/Unchecked.gif"

CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked"

UncheckedImageAlternateText="Not Checked" ImageWidth="25"

ImageHeight="25">

</cc1:ToggleButtonExtender>

<asp:CheckBox ID="CheckBox2" runat="server" Text=" Option Two" />

</div>

</form>

</body>

</html>

Trang 6

This page has two CheckBox controls Each check box has an associated ToggleButtonExtender control

along with a MutuallyExclusiveCheckBoxExtender control to tie the two check boxes together The Tog-gleButtonExtender control uses theCheckedImageUrland theUncheckedImageUrlproperties to specify the appropriate images to use Then, if images are disabled by the end user’s browser instance, the text that is provided in theCheckedImageAlternateTextandUncheckedImageAlternateTextproperties is

used instead You will also have to specify values for theImageWidthandImageHeightproperties for the page to run

Running this page, you get results similar to those presented in Figure 20-40

Figure 20-40

UpdatePanelAnimationExtender

The UpdatePanelAnimationExtender control allows you to apply an animation to a Panel control for two specific events The first is theOnUpdatingevent and the second is theOnUpdatedevent You can then

use the animation framework provided by ASP.NET AJAX to change the page’s style based on these two events Listing 20-33 shows an example of using theOnUpdatedevent when the end user clicks a specific date within aCalendarcontrol contained within the UpdatePanel control on the page

Listing 20-33: Using animations on the OnUpdated event

VB

<%@ Page Language="VB" %>

TagPrefix="cc1" %>

<script runat="server">

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _

ByVal e As EventArgs)

Label1.Text = "The date selected is " &

Calendar1.SelectedDate.ToLongDateString() End Sub

</script>

<title>UpdatePanelAnimationExtender Control</title>

</head>

<body>

<div>

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1"

runat="server" TargetControlID="UpdatePanel1">

<Animations>

Continued

Trang 7

<Sequence>

<Color PropertyKey="background" StartValue="#999966"

EndValue="#FFFFFF" Duration="5.0" />

</Sequence>

</OnUpdated>

</Animations>

</cc1:UpdatePanelAnimationExtender>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server"></asp:Label><br />

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

onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

C#

TagPrefix="cc1" %>

<script runat="server">

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Label1.Text = "The date selected is " + Calendar1.SelectedDate.ToLongDateString();

}

</script>

With this bit of code, when you click a date within the Calendar control, the entire background of the

UpdatePanel holding the calendar changes color from one to another for a five-second duration according

as specified in the animation you built The animations you define can get pretty complex, and building

deluxe animations are beyond the scope of this chapter

ValidatorCalloutExtender

The last extender control covered is the ValidatorCalloutExtender control This control allows you to

add a more noticeable validation message to end users working with a form You associate this control

not with the control that is being validated, but instead with the validation control itself An example of

associating the ValidatorCalloutExtender control with a RegularExpressionValidator control is presented

in Listing 20-34

Listing 20-34: Creating validation callouts with the ValidationCalloutExtender

Trang 8

<title>ValidatorCalloutExtender Control</title>

</head>

<body>

<div>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"

TargetControlID="RegularExpressionValidator1">

</cc1:ValidatorCalloutExtender>

Email Address: 

<asp:RegularExpressionValidator ID="RegularExpressionValidator1"

runat="server"

ErrorMessage="You must enter an email address" Display="None"

ControlToValidate="TextBox1"

ValidationExpression="\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator><br />

<asp:Button ID="Button1" runat="server" Text="Submit" />

</div>

</form>

</body>

</html>

This page has a single text box for the form, a Submit button and a RegularExpressionValidator control The RegularExpressionValidator control is built as you normally would, except you make use of the

Displayproperty and set it toNone You do not want the normal ASP.NET validation control to also

display its message, as it will collide with the one displayed with the ValidatorCalloutExtender control Although theDisplayproperty is set toNone, you still use theErrorMessageproperty to provide the

error message Running this page produces the results presented in Figure 20-41

Figure 20-41

ASP.NET AJAX Control Toolkit Ser ver Controls

The next set of ASP.NET AJAX controls actually do not always extend other ASP.NET controls, but

Trang 9

Accordion Control

TheAccordioncontrol gives you the ability to provide a series of collapsible panes to the end user This

control is ideal when you have a lot of content to present in a limited space TheAccordioncontrol is

a template control and contains panes represented as AccordionPane controls Listing 20-35 shows an

Accordion control that contains two AccordionPane controls

Listing 20-35: An Accordion control with two AccordionPane controls

TagPrefix="cc1" %>

<title>Accordion Control</title>

<style type="text/css">

.titlebar {

background-color:Blue;

color:White;

font-size:large;

font-family:Verdana;

border:solid 3px Black;

}

</style>

</head>

<body>

<div>

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="titlebar"

HeaderSelectedCssClass="titlebar">

<Panes>

<cc1:AccordionPane runat="server">

<Header>

This is the first pane

</Header>

<Content>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Donec accumsan lorem Ut consectetuer tempus metus Aenean tincidunt venenatis tellus Suspendisse molestie cursus ipsum Curabitur ut lectus Nulla ac dolor nec elit convallis vulputate Nullam pharetra pulvinar nunc Duis orci Phasellus a tortor at nunc mattis congue

Vestibulum porta tellus eu orci Suspendisse quis massa Maecenas varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut gravida nisl neque a ipsum Vivamus facilisis Cras viverra Curabitur

ut augue eget dolor semper posuere Aenean at magna eu eros tempor pharetra Aenean mauris

</Content>

</cc1:AccordionPane>

Trang 10

<cc1:AccordionPane runat="server">

<Header>

This is the second pane

</Header>

<Content>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Donec accumsan lorem Ut consectetuer tempus metus Aenean tincidunt venenatis tellus Suspendisse molestie cursus ipsum Curabitur ut lectus Nulla ac dolor nec elit convallis vulputate Nullam pharetra pulvinar nunc Duis orci Phasellus a tortor at nunc mattis congue

Vestibulum porta tellus eu orci Suspendisse quis massa Maecenas varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut gravida nisl neque a ipsum Vivamus facilisis Cras viverra Curabitur

ut augue eget dolor semper posuere Aenean at magna eu eros tempor pharetra Aenean mauris

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

</div>

</form>

</body>

</html>

There is a single CSS class defined in the document and this class,titlebar, is used as the value of

theHeaderCssClassand theHeaderSelectedCssClassproperties The Accordion control here contains two AccordionPane controls The subelements of the AccordionPane control are the<Header>and the

<Content>elements The items placed in the<Header>section will be in the clickable pane title, while the items contained within the<Content>section will slide out and be presented when the associated

header is selected

Running this page produces the results illustrated here in Figure 20-42

This figure shows a screenshot of each of the panes selected Some of the more important properties are described in the following list:

❑ AutoSize— Defines how the control deals with its size expansion and shrinkage The possible

values includeNone,Fill, andLimit The default isNoneand when used, items below the con-trol may move to make room for the concon-trol expansion A value ofFillworks with theHeight

property and the control will fill to the requiredHeight This means that some of the panes may have to grow to accommodate the space while other panes might have to shrink and include a

scrollbar to handle the limited space from the height restriction A value ofLimitalso works

with theHeightproperty and will never grow larger than this value It is possible that the pane might be smaller than the specified height

❑ TransitionDuration— The number of milliseconds it takes to transition to another pane

❑ FramesPerSecond— The number of frames per second to use to transition to another pane

❑ RequireOpenedPane— Specifies that at least one pane is required to be open at all times The

default setting of this property isTrue A value ofFalsemeans that all panes can be collapsed

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