Professional ASP.NET 3.5 in C# and Visual Basic Part 102 pdf

NumericUpDownExtender The NumericUpDownExtender control allows you to put some up/down indicators next to a TextBox control that enable the end user to more easily control a selection..

Trang 1

You form a group of CheckBox controls by using theKeyproperty All the check boxes that you want in

one group need to have the sameKeyvalue In the example is Listing 20-20, all the check boxes share a

Keyvalue ofMyCheckboxes

Running this page, results in a list of four check boxes When you select one of the check boxes, a check

mark appears Then, when you select another check box, first checkbox you selected gets deselected The

best part is that you can even deselect what you have selected in the group, thereby selecting nothing in

the check box group

NumericUpDownExtender

The NumericUpDownExtender control allows you to put some up/down indicators next to a TextBox

control that enable the end user to more easily control a selection

A simple example of this is illustrated here in Listing 20-21

Listing 20-21: Using the NumericUpDownExtender control

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

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

TagPrefix="cc1" %>

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

<head runat="server">

<title>NumericUpDownExtender Control</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"

TargetControlID="TextBox1" Width="150" Maximum="10" Minimum="1">

</cc1:NumericUpDownExtender>

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

</div>

</form>

</body>

</html>

The NumericUpDownExtender control here extends the TextBox control on the page When using the

NumericUpDownExtender control, you have to specify the width of the control with theWidthproperty

Otherwise, you will see only the up and down arrow keys and not the text box area In this case, the

Widthproperty is set to150(pixels) TheMaximumandMinimumproperties provide the range used by

the up and down indicators

With aMaximumvalue setting of10and aMinimumvalue of1, the only range in the control will be 1

through 10 Running this page produces the results shown in Figure 20-29

Trang 2

Figure 20-29

In addition to numbers as is shown with Listing 20-21, you can also use text as is illustrated here in

Listing 20-22

Listing 20-22: Using characters instead of numbers with NumericUpDownExtender

<cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"

TargetControlID="TextBox1" Width="150"

RefValues="Blue;Brown;Green;Orange;Black;White">

</cc1:NumericUpDownExtender>

In this case, the words are defined within theRefValuesproperty (all separated with a semicolon) This gives you the results presented in Figure 20-30

Figure 20-30

PagingBulletedListExtender

The PagingBulletedListExtender control allows you to take long bulleted lists and easily apply alphabetic paging to the list For an example of this, Listing 20-23 will work off of the Customers table within the

Northwind database

Listing 20-23: Paging a bulleted list from the Northwind database

TagPrefix="cc1" %>

<title>PagingBulletedListExtender Control</title>

</head>

<body>

<div>

<cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1"

runat="server" TargetControlID="BulletedList1">

</cc1:PagingBulletedListExtender>

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

ConnectionString="Data Source=.\SQLEXPRESS;

Continued

Trang 3

Integrated Security=True;User Instance=True"

ProviderName="System.Data.SqlClient"

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

</asp:SqlDataSource>

<asp:BulletedList ID="BulletedList1" runat="server"

DataSourceID="SqlDataSource1" DataTextField="CompanyName"

DataValueField="CompanyName">

</asp:BulletedList>

</div>

</form>

</body>

</html>

This code pulls all theCompanyNamevalues from the Customers table of the Northwind database and

binds those values to the BulletList control on the page Running this page gives you the results

illus-trated in Figure 20-31

Figure 20-31

From this figure, you can see that the paging is organized alphabetically on the client side Only the

letters for which there are values appear in the linked list of letters Clicking any of the letters gives you

the items from the bulleted list that start with that character

PopupControlExtender

The PopupControlExtender control allows you to create a popup for any control on your page For

instance, you can completely mimic the CalendarExtender control that was presented earlier by creating

a popup containing a Calendar control off a TextBox control Listing 20-24 mimics this behavior

Trang 4

Listing 20-24: Creating a CalendarExtender control with PopupControlExtender

VB

<%@ Page Language="VB" %>

TagPrefix="cc1" %>

<script runat="server">

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _

ByVal e As System.EventArgs)

PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString())

End Sub

</script>

<title>PopupControlExtender Control</title>

</head>

<body>

<div>

<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"

TargetControlID="TextBox1" PopupControlID="UpdatePanel1" OffsetY="25">

</cc1:PopupControlExtender>

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

<ContentTemplate>

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

BorderColor="White" BorderWidth="1px" Font-Names="Verdana"

Font-Size="9pt" ForeColor="Black" Height="190px"

NextPrevFormat="FullMonth" Width="350px"

OnSelectionChanged="Calendar1_SelectionChanged">

<SelectedDayStyle BackColor="#333399" ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" />

<OtherMonthDayStyle ForeColor="#999999" />

<NextPrevStyle Font-Bold="True" Font-Size="8pt"

ForeColor="#333333" VerticalAlign="Bottom" />

<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />

<TitleStyle BackColor="White" BorderColor="Black"

BorderWidth="4px" Font-Bold="True" Font-Size="12pt"

ForeColor="#333399" />

</asp:Calendar>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Continued

Trang 5

TagPrefix="cc1" %>

<script runat="server">

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());

}

</script>

When running this page, you get a single text box on the page Click within the text box and a pop-up

calendar appears so you can select a date that will be populated back into the text box (as illustrated in

Figure 20-32)

Figure 20-32

You will want to place your popup control within an ASP.NET AJAX UpdatePanel control and to pass the

value from the popup control back to the target control (the TextBox1 control), so you use theCommit()

method:

PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString())

ResizableControlExtender

Trang 6

control will then change in size depending on how the end user extends the item For this to work, you have to create a handle for the end user to use Listing 20-25 shows you how to use

ResizableControl-Extender with an image

Listing 20-25: Using the ResizableControlExtender control with an image

TagPrefix="cc1" %>

<title>ResizableControlExtender Control</title>

<style type="text/css">

.handle

{

width:10px;

height:10px;

background-color:Black;

}

.resizable

{

border-style:solid;

border-width:2px;

border-color:Black;

}

</style>

</head>

<body>

<div>

<cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"

TargetControlID="Panel1" HandleCssClass="handle"

ResizableCssClass="resizable">

</cc1:ResizableControlExtender>

<asp:Panel ID="Panel1" runat="server" Width="300" Height="225">

<asp:Image ID="Image1" runat="server" ImageUrl="Images/Garden.jpg"

style="width:100%; height:100%"/>

</asp:Panel>

</div>

</form>

</body>

</html>

In this example, the ResizableControlExtender control depends upon CSS to create the handle for the

end user to grab to resize thePanelcontrol TheTargetControlIDproperty points to the control to be

resized

There are two CSS references in the ResizableControlExtender control One deals with the control as it

sits on the screen with no end user interaction This is really to show the end user that there is an ability

Trang 7

to resize the element This is done through theHandleCssClassproperty The value of this property

points to the CSS classhandlecontained within the same file The second CSS reference deals with the

control as it is clicked and held (when the end user does not let up with the mouse click performed) This

one is done with theResizableCssClassproperty The value of this property points to the CSS class

resizable

When compiled and run, the code should generate the same page presented in Figure 20-33

Figure 20-33

You can see in the top screenshot how the image looks when there is no end user interaction In this case,

there is a black square (as defined by the CSS) in the lower-right corner of the image The screenshot on

Trang 8

The RoundedCornersExtender control allows you to put rounded corners on the elements on your page

As with the ResizableControlExtender control, you put the element you are interested in working with

inside of a Panel control Listing 20-26 shows this done with a Login server control

Listing 20-26: Rounding the corners of the Panel control containing a Login server

control

TagPrefix="cc1" %>

<title>RoundedCornersExtender Control</title>

</head>

<body>

<div>

<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"

TargetControlID="Panel1">

</cc1:RoundedCornersExtender>

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

HorizontalAlign="Center" BackColor="Orange">

<asp:Login ID="Login1" runat="server">

</asp:Login>

</asp:Panel>

</div>

</form>

</body>

</html>

Here, the RoundedCornersExtender control simply points to the Panel control with the

Target-ControlIDproperty This Panel control has a background color of orange to show that the corners are

indeed rounded The result of this bit of code is illustrated in Figure 20-34

Figure 20-34 You can control the degree of the rounded corners using theRadiusproperty of the

RoundedCorner-sExtender control By default, this property is set to a value of5 You can even go as far as choosing the

Trang 9

corners that you want to round using theCornersproperty The possible values of theCornersproperty

includeAll,Bottom,BottomLeft,BottomRight,Left,None,Right,Top,TopLeft, andTopRight

SliderExtender

The SliderExtender control actually extends a TextBox control to make it look like nothing it normally

does This ASP.NET AJAX control gives you the ability to create a true slider control that allows the end

user to select a range of numbers using a mouse instead typing in the number Listing 20-27 shows a

simple example of using the slider

Listing 20-27: Using the SliderExtender control

TagPrefix="cc1" %>

<title>SliderExtender Control</title>

</head>

<body>

<div>

<cc1:SliderExtender ID="SliderExtender1" runat="server"

TargetControlID="TextBox1">

</cc1:SliderExtender>

</div>

</form>

</body>

</html>

This little bit of code to tie a SliderExtender control to a typical TextBox control is simple and produces

the result presented in Figure 20-35

Figure 20-35

This is fine, but it is hard for the end users to tell what number they are selecting Therefore, you might

find it better to give a signifier to the end user Adding a Label control to the page (calledLabel1) and

changing the SliderExtender control to include aBoundControlIDproperty gives you this result The

code for this change is presented here:

<cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1"

Trang 10

This small change produces see the result (with the appropriate Label control on the page) shown in

Figure 20-36

Now when the end users slide the handle on the slider, they see the number that they are working with quite easily Some of the following properties are available to the SliderExtender control

❑ Decimal —Allows you to specify the number of decimals the result should take The more

decimals you have, the more unlikely the end user will be able to pick an exact number

❑ HandleCssClass —The CSS class that you are using the design the handle

❑ HandleImageUrl —The image file you are using to represent the handle

❑ Length —The length of the slider in pixels The default value is150

❑ Maximum —The maximum number represented in the slider The default value is100

❑ Minimum —The minimum number represented in the slider The default value is0

❑ Orientation— The orientation of the slider The possible values includeHorizontaland

Vertical The default value is Horizontal

❑ RailCssClass— The CSS class that you are using to design the rail of the slider

❑ ToolTipText— The ToolTip when the end user hovers over the slider Using0within the text

provides the means show the end user the position the slider is currently in

SlideShowExtender

The SlideShowExtender control allows you to put an image slideshow in the browser The slideshow

controls allow the end user to move to the next or previous images as well as simply play the images

as a slideshow with a defined wait between each image Listing 20-28 shows an example of creating a

slideshow

Listing 20-28: Creating a slideshow with three images

.ASPX

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="SlideShowExtender.aspx.vb"

Inherits="SlideShowExtender" %>

TagPrefix="cc1" %>

Continued

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