Professional ASP.NET 3.5 in C# and Visual Basic Part 100 pot

ConfirmButtonExtender In this case, the ConfirmButtonExtender extends the Button1 server control and adds a confirmation dialog using the text defined with theCofirmTextprop

Trang 1

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

<head runat="server">

<title>ConfirmButtonExtender</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"

TargetControlID="Button1"

ConfirmText="Are you sure you wanted to click this button?">

</cc1:ConfirmButtonExtender>

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

</div>

</form>

</body>

</html>

In this case, the ConfirmButtonExtender extends the Button1 server control and adds a confirmation

dialog using the text defined with theCofirmTextproperty This page is shown in Figure 20-15

Figure 20-15

If the end user clicks OK in this instance, then the page will function normally as if the dialog never

occurred However, if Cancel is clicked, by default the dialog will disappear and the form will not be

submitted (it will be as if the button was not clicked at all) In this case, you can also capture the Cancel

button being clicked and perform a client-side operation by using theOnClientClickevent and giving it

a value of a client-side JavaScript function

Instead of using the browsers modal dialogs, you can even go as far as creating your own to use as

the confirmation form To accomplish this task, you will need to use the new ModalPopupExtender

server control TheModalPopupExtendercontrol points to another control to use for the confirmation

Listing 20-9 shows how to make use of this control

Listing 20-9: Using the ModalPopupExtender control to create your own

confirmation form

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

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

TagPrefix="cc1" %>

Trang 2

<title>ConfirmButtonExtender</title>

</head>

<body>

<div>

<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"

TargetControlID="Button1"

DisplayModalPopupID="ModalPopupExtender1">

</cc1:ConfirmButtonExtender>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

CancelControlID="ButtonNo" OkControlID="ButtonYes"

PopupControlID="Panel1"

TargetControlID="Button1">

</cc1:ModalPopupExtender>

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

<asp:Panel ID="Panel1" runat="server"

style="display:none; background-color:White; width:200;

border-width:2px; border-color:Black; border-style:solid; padding:20px;">

Are you sure you wanted to click this button?<br />

<asp:Button ID="ButtonYes" runat="server" Text="Yes" />

<asp:Button ID="ButtonNo" runat="server" Text="No" />

</asp:Panel>

</div>

</form>

</body>

</html>

In this example, the ConfirmButtonExtender still points to the Button1 control on the page, meaning

that when the button is clicked, then the ConfirmButtonExtender will take action Instead of using

theConfirmTextproperty, theDisplayModalPopupIDproperty is used In this case, it points to the

ModalPopupExtender1 control — another extender control

The ModalPopupExtender control, in turn, references the Panel1 control on the page through the use

of thePopupControlIDproperty The contents of this Panel control is used for the confirmation on the

button click For this to work, the ModalPopupExtender control has to have a value for theOkControlID

and theCancelControlIDproperties In this case, these two properties point to the two Button controls that are contained within the Panel control When you run this page, you will get the results shown in

Figure 20-16

Trang 3

The DragPanelExtender enables you define areas where end users can move elements around the page

as they wish The end user actually has the ability to drag and drop the element anywhere on the

browser page

To enable this feature, you have to do a few things The first suggestion is to create a<div>area on the

page that is large enough for to drag the item around in From here, you need to specify what will be

used as the drag handle and another control that will follow the drag handle around In the example in

Listing 20-10, the Label control is used as the drag handle, and the Panel2 control is the content that is

dragged around the screen

Listing 20-10: Dragging a Panel control around the page

TagPrefix="cc1" %>

<title>DragPanel control</title>

</head>

<body>

<div>

<div style="height: 600px;">

<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server"

DragHandleID="Label1" TargetControlID="Panel1">

</cc1:DragPanelExtender>

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

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

Text="Drag this Label control to move the control"

BackColor="DarkBlue" ForeColor="White"></asp:Label>

<asp:Panel ID="Panel2" runat="server" Width="450px">

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

</asp:Panel>

</div>

</form>

</body>

</html>

Trang 4

This example creates a<div>element that has a height of600pixels Within this defined area, the

example uses a DragPanelExtender control and targets the Panel1 control through the use of the Target-ControlIDproperty being assigned to this control

Within the Panel1 control are two other server controls — a Label and another Panel control The

Label control is assigned to be the drag handle using theDragHandleIDproperty of the DragPanelExten-der control With this little bit of code in place, you are now able to drag thePanel1control around on

your browser window Figure 20-17 shows the Label control being used as a handle to drag around the Panel control

Figure 20-17

DropDownExtender

The DropDownExtender control allows you to take any control and provide a drop-down list of options below it for selection It provides a different framework than a typical dropdown list control as it allows for an extreme level of customization Listing 20-11 shows how you can even use an image as the initiator

of drop-down list of options

Listing 20-11: Using an Image control as an initiator of a drop-down list

VB

<%@ Page Language="VB" %>

TagPrefix="cc1" %>

<script runat="server">

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

Image1.ImageUrl = "Images/Creek.jpg"

End Sub

Continued

Trang 5

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

Image1.ImageUrl = "Images/" & DirectCast(sender, LinkButton).Text & ".jpg"

End Sub

</script>

<title>DropDownExtender Control</title>

</head>

<body>

<div>

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

<ContentTemplate>

<cc1:DropDownExtender ID="DropDownExtender1" runat="server"

DropDownControlID="Panel1" TargetControlID="Image1">

</cc1:DropDownExtender>

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

</asp:Image>

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

<asp:LinkButton ID="Option1" runat="server"

OnClick="Option_Click">Creek</asp:LinkButton>

OnClick="Option_Click">Dock</asp:LinkButton>

OnClick="Option_Click">Garden</asp:LinkButton>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

C#

TagPrefix="cc1" %>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

Image1.ImageUrl = "Images/Creek.jpg";

}

protected void Option_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "Images/" + ((LinkButton)sender).Text + ".jpg";

}

</script>

Trang 6

In this case, a DropDownExtender control is tied to an Image control that on thePage_Load()event

displays a specific image The DropDownExtender control has two specific properties that need to be

filled The first is theTargetControlIDproperty that defines the control that becomes the initiator of the drop-down list The second property is theDropDownControlIDproperty, which defines the element on the page that will be used for the drop-down items that appear below the control In this case, it is a Panel control with three LinkButton controls

Each of the LinkButton controls designates a specific image that should appear on the page Selecting one

of the options changes the image to the choice through theOption_Click()method Running this page gives you the results illustrated in Figure 20-18

Figure 20-18

DropShadowExtender

The DropShadowExtender control allows you to put a drop shadow on any control you choose as the

target The first thought is an image (as shown here in Listing 20-12), but you can use it for any control that you wish

Listing 20-12: Using DropShadowExtender with an Image control

TagPrefix="cc1" %>

Continued

Trang 7

<title>DropShadowExtender Control</title>

</head>

<body>

<div>

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Image1">

</cc1:DropShadowExtender>

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

</div>

</form>

</body>

</html>

In this example, it is as simple as using the DropShadowExtender control with aTargetControlIDof

Image1 With this in place, the image will appear in the browser as shown in Figure 20-19

Figure 20-19

As stated, in addition to images, you can use DropShadowExtender for almost anything Listing 20-13

shows how to use it with a Panel control

Listing 20-13: Using the DropShadowExtender with a Panel control

TagPrefix="cc1" %>

Trang 8

<title>DropShadowExtender Control</title>

</head>

<body>

<div>

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Panel1" Rounded="True">

</cc1:DropShadowExtender>

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

HorizontalAlign="Center">

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

</asp:Login>

</asp:Panel>

</div>

</form>

</body>

</html>

In this case, a Panel control with a Login control is extended with the DropShadowExtender control The result is quite similar to that of the Image control’s result However, one addition to the DropShadowEx-tender control here is that theRoundedproperty is set toTrue(by default, it is set toFalse) This produces the look shown in Figure 20-20

Figure 20-20

As you can see from Figure 20-20, not only are the edges of the drop shadow rounded, but also the entire Panel control has rounded edges Other style properties that you can work with include theOpacity

property, which controls the opacity of the drop shadow only, and theRadiusproperty, which controls the radius used in rounding the edges and obviously works only if theRoundedproperty is set toTrue

By default, theOpacitysetting is set at1, which means 100% visible To set it at, say, 50% opacity, you

have to set theOpacityvalue to.5

Trang 9

The DynamicPopulateExtender control allows you to send dynamic HTML output to a Panel control For

this to work, you need one control or event that triggers a call back to the server to get the HTML that in

turn gets pushed into thePanelcontrol, thereby making a dynamic change on the client

As with the AutoCompleteExtender control, you need a server-side event that returns something back to

the client asynchronously Listing 20-14 shows the code required to use this control on the.aspxpage

Listing 20-14: Using the DynamicPopulateExtender control to populate a Panel control

.ASPX

<%@ Page Language="VB" AutoEventWireup="true"

CodeFile="DynamicPopulateExtender.aspx.vb"

Inherits="DynamicPopulateExtender" %>

<%@ Register Assembly="AjaxControlToolkit, Version=3.5.11119.20050,

Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"

Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<title>DynamicPopulateExtender Control</title>

<script type="text/javascript">

function updateGrid(value) {

var behavior = $find(’DynamicPopulateExtender1’);

if (behavior) { behavior.populate(value);

} }

</script>

</head>

<body>

<div>

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

<cc1:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server"

TargetControlID="Panel1" ServiceMethod="GetDynamicContent">

</cc1:DynamicPopulateExtender>

<div onclick="updateGrid(this.value);" value=’0’>

<asp:LinkButton ID="LinkButton1" runat="server"

OnClientClick="return false;">Customers</asp:LinkButton></div>

OnClientClick="return false;">Employees</asp:LinkButton></div>

OnClientClick="return false;">Products</asp:LinkButton></div>

<asp:Panel ID="Panel1" runat="server">

</asp:Panel>

</div>

</form>

</body>

</html>

Trang 10

This.aspxpage is doing a lot First off, there is a client-side JavaScript function calledupdateGrid() This function calls the DynamicPopulateExtender control that is on the page You will also find three LinkBut-ton server controls, each of which is encased within a<div>element that calls theupdateGrid()function and provides a value that is passed into the function Since you want the<div>element’sonclickevent

to be triggered with a click and not theLinkButtoncontrol’s click event, each LinkButton contains an

OnClientClickattribute that simply does nothing This is accomplished usingreturn false;

The DynamicPopulateExtender control on the page targets the Panel1 control as the container that will

take the HTML that comes from the server on an asynchronous request The DynamicPopulateExtender control knows where to go get the HTML using theServiceMethodattribute The value of this attribute calls theGetDynamicContent()method, which is in the page’s code-behind file

Once you have the.aspxpage in place, the next step is to create the code-behind page This page will

contain the server-side method that is called by the DynamicPopulateExtender control This is presented

in Listing 20-15

Listing 20-15: The code-behind page of the DynamicPopulateExtender.aspx page

VB

Imports System.Data

Imports System.Data.SqlClient

Imports System.IO

Partial Class DynamicPopulateExtender

Inherits System.Web.UI.Page

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

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

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

As System.String

Dim conn As SqlConnection

Dim cmd As SqlCommand

Dim cmdString As String = "Select * from Customers"

Select Case contextKey

Case "1"

cmdString = "Select * from Employees"

Case "2"

cmdString = "Select * from Products"

End Select

conn = New SqlConnection("Data Source=.\SQLEXPRESS;

AttachDbFilename=|DataDirectory|\NORTHWND.MDF;

Integrated Security=True;User Instance=True")

’ Put this string on one line in your code cmd = New SqlCommand(cmdString, conn)

conn.Open()

Dim myReader As SqlDataReader

myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection)

Continued

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