Foundations of ASP.NET AJAX phần 7 pot

Table 7-6. Properties of the CascadingDropDown Control Property Name Description Category Category name of the CascadingDropDown control LoadingText Status text shown on the control itself while the data for the drop-down is being fetched ParentControlID The ID of the other drop-down control whose selection impacts this control PromptText Text shown if the drop-down is empty ServiceMethod Name of the web method used to retrieve the data ServicePath Path of the web service used to retrieve the data TargetControlID ID of the target corresponding DropDown control You may have also seen cascading drop-downs on many car shopping/searching sites, in which you start with the manufacturer of the car and end up with the exact model of the car. We’ll look one such example, which comes with the full-source version of the ASP.NET AJAX Control Toolkit available for download at http://ajax.asp.net. After you load the solution into Visual Studio, under the SampleWebSite project, locate the CascadingDropDown folder with an .aspx and .asmx page. Set CascadingDrop- Down.aspx as the start page, and then run the application (Ctrl+F5). You are presented with three drop-down controls asking you to enter the make, model, and color of a car. With each selection, the values of the subsequent drop-down control change, and the complete specs of the car are displayed (see Figure 7-12). CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1)150 828-8 CH07.qxd 10/8/07 4:22 PM Page 150 Figure 7-12. Selecting a car using CascadingDropDown controls Let’s examine the markup for this page: <div class="demoheading">CascadingDropDown Demonstration</div> <table> <tr> <td>Make</td> <td><asp:DropDownList ID="DropDownList1" runat="server" Width="170" /> </td> </tr> <tr> <td>Model</td> <td><asp:DropDownList ID="DropDownList2" runat="server" Width="170" /> </td> </tr> <tr> CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) 151 828-8 CH07.qxd 10/8/07 4:22 PM Page 151 <td>Color</td> <td><asp:DropDownList ID="DropDownList3" runat="server" Width="170" AutoPostBack="true" OnSelectedIndexChanged="DropDownList3 SelectedIndexChanged" /> </td> </tr> </table> <br /> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes ]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" /> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models ]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" /> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors ]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2" /> </div> The three ASP.NET drop-down controls at the beginning of this code segment make up the three selection points, which are followed by the three CascadingDropDown controls. Each of these extender controls specifies the corresponding drop-down (by using the TargetControlID property) as well as the ServicePath ServiceMethod properties, which will be used as a data source. And that’s it! Beyond that, there is a little more code on the web form itself that displays text to the users in the appropriate event handlers. The rest of the work is done in a web service as listed here: [WebMethod] public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category) CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1)152 828-8 CH07.qxd 10/8/07 4:22 PM Page 152 { StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit. CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); return AjaxControlToolkit.CascadingDropDown. QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category); } The main part of this web service is the GetDropDownContents web method shown in the preceding code segment. This method first gets a dictionary object of known cate- gory/value pairs and queries the data document for results. This data document is nothing more than an XmlDocument object loaded with data from an XML file. In fact, if you look in the App_Data folder in the solution, you’ll see an XML file called CarService.xml, which holds the data for the drop-down controls. Figure 7-13 shows the contents of CarService.xml. Figure 7-13. CarService.xml CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) 153 828-8 CH07.qxd 10/8/07 4:22 PM Page 153 CollapsiblePanelExtender Control The CollapsiblePanelExtender control allows you to easily make visually appealing col- lapsing and expanding effects on panels used in your web page with minimal code. This extender is quite simple yet very flexible and is particularly useful in scenarios where you have large amounts of text, some of which does not need to be initially presented to the users. Also with many useful properties, its collapse/expansion behavior can be well cus- tomized. This includes the ability to have the panel auto expand or auto collapse depending on the mouse hovering. Table 7-7 lists some of the properties of the CollapsiblePanelExtender control. Table 7-7. Properties of the CollapsiblePanelExtender Control Property Name Description AutoCollapse Boolean value indicating whether or not to collapse the panel when the mouse moves away from it AutoExpand Boolean value indicating whether or not to expand the panel when the mouse hovers over it Collapsed The initial state of the panel CollapseControlID ID of the control responsible for collapsing the panel CollapsedImage Path to the image file used by ImageControlID (when collapsed) CollapsedSize Collapsed size of the target control in pixels CollapsedText Displayed text when the panel is collapsed ExpandControlID ID of the control responsible for expanding the panel ExpandDirection Direction of expansion of the panel (horizontal/vertical) ExpandedImage Displayed image when the panel is expanded ExpandedSize Expanded size of the target control in pixels ExpandedText Displayed text when the panel is expanded ImageControlID ID of the image control serving as status indicator for the state of the panel (collapsed/expanded) ScrollContents Boolean value indicating whether or not to make the panel scrollable TargetControlID ID of the target panel control TextLabelID ID of the Label control containing the status text of the panel Let’s turn our attention again to the SampleWebSite project that ships the full source version of the ASP.NET AJAX Control Toolkit where the CollapsiblePanel is used exten- sively in nearly all pages. Specifically, in Solution Explorer, expand the CollapsiblePanel folder, and take a look at the CollapsiblePanel,aspx page where the focus is this extender. CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1)154 828-8 CH07.qxd 10/8/07 4:22 PM Page 154 For the purposes of this demo, let’s focus only on the first panel on top of the page as shown in Figure 7-14. Figure 7-14. Example of CollapsiblePanel (in collapsed mode) This portion of the page consists of two panels with a CollapsiblePanelExtender, and it displays some basic information about ASP.NET AJAX. There is a little image on the right side of the panel that collapses or expands the panel when clicked. Here’s the .aspx markup for this portion of the page: <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server">(Show Details ) ➥ </asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText=" (Show Details ) " /> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0"> <br /> CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) 155 828-8 CH07.qxd 10/8/07 4:22 PM Page 155 <p> <asp:ImageButton ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" /> <%= GetContentFillerText() %> </p> </asp:Panel> </div> <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1" ExpandedText="(Hide Details )" CollapsedText="(Show Details )" ImageControlID="Image1" ExpandedImage="~/images/collapse_blue.jpg" CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true" /> The first panel (Panel2) is essentially the header where the image to expand/collapse the panel is located. The majority of the actual content is in the second panel. In this case, the content is being generated by a method called GetContentFillerText. So notice that while the TargetContronID property of the CollapsiblePanelExtender is set to Panel1, the ExpandControlID and CollapseControlID properties are both set to Panel2, which is essentially the header panel. The small icon on the right portion of the header changes depending on the state of the panel as specified by the ExpandedImage and CollapsedImage properties. Figure 7-15 shows this panel in expanded mode. CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1)156 828-8 CH07.qxd 10/8/07 4:22 PM Page 156 Figure 7-15. Example of CollapsiblePanel (in expanded mode) ConfirmButtonExtender Control The ConfirmButtonExtender control, as the name suggests, captures the Click event of a button and displays a confirmation dialog box. If the user clicks OK after that, the button will function as implemented; otherwise, the Click event will simply be ignored. This control is so simple that it only has two properties: TargetControlID and ConfirmText. As you probably have guessed already, TargetControlID contains the ID of the target button, and ConfirmText holds the text message that will be displayed in the dialog box requiring user confirmation. CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) 157 828-8 CH07.qxd 10/8/07 4:22 PM Page 157 The ConfirmButtonExtender control is ideal in situations where the user is about to submit an order or other important unit of data. It works equally well with ASP.NET Button and LinkButton controls. To see this in a page, create an ASP.NET button control on a page followed by the ConfirmButtonExtender control. After that, set the TargetControlID property of your ConfirmButtonExtender control to that of the regular button, and set the text for the ConfirmText property. Lastly, create a Label control, and in the event handler for the button, set the label’s text to a message indicating the successful receipt of the Click event. Your ASPX markup should look similar to the following code snippet: <asp:Button ID="Button1" runat="server" Text="Submit"➥ OnClick="Button1_Click" /> <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="Button1" ConfirmText="Are you sure ?" runat="server"> </cc1:ConfirmButtonExtender><br /> <asp:Label ID="Label1" runat="server" Width="360px"></asp:Label> When you click this submit button, you will be presented with a dialog box as shown in Figure 7-16. Figure 7-16. Dialog box of the ConfirmButtonExtender control If you cancel the dialog box, the initial Click event of the Submit button will be dis- carded. However, if you click OK, the Click event is accepted, and the click-event method is invoked. The click-event method displays a confirmation message in the Label control as shown in Figure 7-17. CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1)158 828-8 CH07.qxd 10/8/07 4:22 PM Page 158 Figure 7-17. Submit button accepted DragPanelExtender Control The DragPanelExtender control is without a doubt one of the coolest controls in the ASP.NET AJAX Control Toolkit; it allows the user to drag around a panel on a web page. As you can imagine, manually implementing this type of functionality with client-side JavaScript is a grand endeavor. In addition to that, this control has only two properties and is extremely easy to use. Other than the TargetControlID property, which you know all too well by now, the DragPanelExtender control has another property called DragHandleID. This property speci- fies the subpanel with which the user can drag the overall panel. In the SampleWebSite project that you saw earlier, there is also an excellent example for the DragPanelExtender control found in DragPanel.aspx. Before looking at the code, run the page, and drag the panel around to see how nicely it works (see Figure 7-18). CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) 159 828-8 CH07.qxd 10/8/07 4:22 PM Page 159 [...]... various other controls in the ASP.NET AJAX Control Toolkit 163 828-8 CH 07. qxd 10/8/ 07 4:22 PM Page 164 828-8 CH08.qxd 10/11/ 07 10:56 AM CHAPTER Page 165 8 Using the ASP.NET AJAX Control Toolkit (Part 2) I n the previous chapter, you were introduced to some of the controls in the ASP.NET AJAX Control Toolkit As mentioned before, this package is readily available on http:/ /ajax .asp.net along with documentation... containing the actual content for DropDown Take a look at the sample that comes with the ASP.NET AJAX Control Toolkit and focus your attention on the DropDown.aspx page as shown in Figure 7- 19 161 828-8 CH 07. qxd 162 10/8/ 07 4:22 PM Page 162 CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) Figure 7- 19 Example of the DropDown extender control Viewing the code reveals a few LinkButton controls as... So, in this case, the drop-down list items are LinkButton controls held within a Panel control and not an ASP.NET DropDownExtender control—a perfect example of the flexibility of this... extender provided in the documentation for the ASP.NET AJAX Control Toolkit shown in Figure 8-1 Figure 8-1 An example of the DropShadow extender applied to a panel 828-8 CH08.qxd 10/11/ 07 10:56 AM Page 1 67 CHAPTER 8 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 2) Basically, you just need to set the TargetControlID property of the DropShadow extender to the ID of the panel control to which you want to... THE ASP.NET AJAX CONTROL TOOLKIT (PART 2) Property Name Description PopupPosition Position of the pop-up control relative to the target control (Left, Right, Center, Top, Bottom) TargetControlID ID of the target control over which the pop-up control will display when the mouse hovers over it Once again, the provided sample in the ASP.NET AJAX Toolkit, which can also be found online at http:/ /ajax .asp.net, ... the EditTemplate of the GridView control You can see this sample in Figure 8-5 Figure 8-5 HoverMenu extender used on a GridView control 173 828-8 CH08.qxd 174 10/11/ 07 10:56 AM Page 174 CHAPTER 8 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT... applied to the target TextBox when it contains an invalid entry CultureName Name of the culture applied to the input mask 175 828-8 CH08.qxd 176 10/11/ 07 10:56 AM Page 176 CHAPTER 8 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 2) The two important properties to note here are Mask and MaskType MaskType simply specifies the type of the target validation mask, which can be None, Number, Date, DateTime, and... Figure 8-4 You can only type numbers here:   171 828-8 CH08.qxd 172 10/11/ 07 10:56 AM Page 172 CHAPTER 8 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 2) Figure 8-4 FilteredTextBox extender displaying the date fetched from... displayed OffsetX/OffsetY Offset values (in pixels) for the pop-up control when the mouse hovers over the target control from the top-left corner PopDelay Amount of time elapsed (ms) until the pop-up control disappears after the initial hover PopupControlID ID of the pop-up control that will be displayed when the mouse hovers over the target control 828-8 CH08.qxd 10/11/ 07 10:56 AM Page 173 CHAPTER...828-8 CH 07. qxd 160 10/8/ 07 4:22 PM Page 160 CHAPTER 7 ■ USING THE ASP.NET AJAX CONTROL TOOLKIT (PART 1) Figure 7- 18 DragPanel control in action When you view the ASPX markup for this page, you’ll see a few nested Panel controls and the DragPanel control: . the ASP. NET AJAX Control Toolkit. CHAPTER 7 ■ USING THE ASP. NET AJAX CONTROL TOOLKIT (PART 1) 163 828-8 CH 07. qxd 10/8/ 07 4:22 PM Page 163 828-8 CH 07. qxd 10/8/ 07 4:22 PM Page 164 Using the ASP. NET. the Label control as shown in Figure 7- 17. CHAPTER 7 ■ USING THE ASP. NET AJAX CONTROL TOOLKIT (PART 1)158 828-8 CH 07. qxd 10/8/ 07 4:22 PM Page 158 Figure 7- 17. Submit button accepted DragPanelExtender. DropDown.aspx page as shown in Figure 7- 19. CHAPTER 7 ■ USING THE ASP. NET AJAX CONTROL TOOLKIT (PART 1) 161 828-8 CH 07. qxd 10/8/ 07 4:22 PM Page 161 Figure 7- 19. Example of the DropDown extender control Viewing