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

Evjen c20.tex V2 - 01/28/2008 3:13pm Page 948 Chapter 20: ASP.NET AJAX Control Toolkit < 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 the CofirmText property. 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 a ll). In this case, you can also capture the Cancel button being clicked and perform a client-side operation by using the OnClientClick event 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. The ModalPopupExtender control 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" % > 948 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 949 Chapter 20: ASP.NET AJAX Control Toolkit < 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" 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 the ConfirmText property, the DisplayModalPopupID property 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 the PopupControlID property. The contents of this Panel control is used for the confirmation on the button click. For this to work, the ModalPopupExtender control has t o have a value for the OkControlID and the CancelControlID properties. 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. Figure 20-16 949 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 950 Chapter 20: ASP.NET AJAX Control Toolkit DragPanelExtender 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 draggedaroundthescreen. Listing 20-10: Dragging a Panel control around the page < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > DragPanel control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < 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 > < /asp:Panel > < /div > < /div > < /form > < /body > < /html > 950 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 951 Chapter 20: ASP.NET AJAX Control Toolkit This example creates a < div > element that has a height of 600 pixels. Within this defined area, the example uses a DragPanelExtender control and targets the Panel1 control through the use of the Target- ControlID property 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 the DragHandleID property of the DragPanelExten- der control. With this little bit of code in place, you are now able to drag the Panel1 control 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" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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 951 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 952 Chapter 20: ASP.NET AJAX Control Toolkit Protected Sub Option_Click(ByVal sender As Object, ByVal e As System.EventArgs) Image1.ImageUrl = "Images/" & DirectCast(sender, LinkButton).Text & ".jpg" End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > DropDownExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < 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 > < asp:LinkButton ID="Option2" runat="server" OnClick="Option_Click" > Dock < /asp:LinkButton > < asp:LinkButton ID="Option3" runat="server" OnClick="Option_Click" > Garden < /asp:LinkButton > < /asp:Panel > < /ContentTemplate > < /asp:UpdatePanel > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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 > 952 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 953 Chapter 20: ASP.NET AJAX Control Toolkit In this case, a DropDownExtender control is tied to an Image control that on the Page_Load() event displays a specific image. The DropDownExtender control has two specific properties that need to be filled. The first is the TargetControlID property that defines the control that becomes the initiator of the drop-down list. The second property is the DropDownControlID property, which defines the element on the page that will be used for the drop-down items that appear below the contro l. 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 o ne of the options changes the image to the choice through the Option_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 < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > Continued 953 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 954 Chapter 20: ASP.NET AJAX Control Toolkit < title > DropShadowExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < 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 a TargetControlID of 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 < %@ Page Language="C#" % > < %@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" % > 954 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 955 Chapter 20: ASP.NET AJAX Control Toolkit < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > DropShadowExtender Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < 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 the Rounded property is set to True (bydefault,itissetto False ). 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 the Opacity property, which controls the opacity of the drop shadow only, and the Radius property, which controls the radius used in rounding the edges and obviously works only if the Rounded property is set to True . By default, the Opacity setting is set at 1 , which means 100% visible. To set it at, say, 50% opacity, you have to set the Opacity value to .5 . 955 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 956 Chapter 20: ASP.NET AJAX Control Toolkit DynamicPopulateExtender 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 the Panel control, 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 .aspx page. 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" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > DynamicPopulateExtender Control < /title > < script type="text/javascript" > function updateGrid(value) { var behavior = $find(’DynamicPopulateExtender1’); if (behavior) { behavior.populate(value); } } < /script > < /head > < body > < form id="form1" runat="server" > < 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 > < div onclick="updateGrid(this.value);" value=’1’ > < asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="return false;" > Employees < /asp:LinkButton >< /div > < div onclick="updateGrid(this.value);" value=’2’ > < asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="return false;" > Products < /asp:LinkButton >< /div > < asp:Panel ID="Panel1" runat="server" > < /asp:Panel > < /div > < /form > < /body > < /html > 956 Evjen c20.tex V2 - 01/28/2008 3:13pm Page 957 Chapter 20: ASP.NET AJAX Control Toolkit This .aspx page is doing a lot. First off, there is a client-side JavaScript function called updateGrid() .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 the updateGrid() function and provides a value that is passed into the function. Since you want the < div > element’s onclick event to be triggered with a click and not the LinkButton control’s click event, each LinkButton contains an OnClientClick attribute that simply does nothing. This is accomplished using return 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 controlknowswheretogogettheHTMLusingthe ServiceMethod attribute. The value of this attribute calls the GetDynamicContent() method, which is in the page’s code-behind file. Once you have the .aspx page 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 957 . the Opacity setting is set at 1 , which means 100% visible. To set it at, say, 50 % opacity, you have to set the Opacity value to .5 . 955 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 956 Chapter 20: ASP. NET. xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > Continued 9 53 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 954 Chapter 20: ASP. NET AJAX Control Toolkit < title > DropShadowExtender. "Images/" + ((LinkButton)sender).Text + ".jpg"; } < /script > 952 Evjen c20.tex V2 - 01/28/2008 3: 13pm Page 9 53 Chapter 20: ASP. NET AJAX Control Toolkit In this case, a DropDownExtender