Notice that the page now contains a ColorPickerExtender control that appears directly below the txtCardColor TextBox control. Listing 2 - CreateCard.aspx (with ColorPicker) Click OK to close the dialog.Īfter you make these changes, the source for the page looks like Listing 2. You can pick the ColorPicker extender to extend the txtCardColor TextBox with the ColorPicker extender. If you pick this option, the Extender Wizard appears (see Figure 4).įigure 03: Adding an extender ( Click to view full-size image)įigure 04: Selecting a control extender with the Extender Wizard ( Click to view full-size image) If you hover your mouse over the txtCardColor TextBox, a smart task option appears the enables you to add an extender (see Figure 3). The easiest way to add the ColorPicker control extender to the page is in Design View. Alternatively, you can type the following tag into Source View beneath the opening server-side form tag: You can drag the ScriptManager onto the page from the toolbox (the ScriptManager is located under the AJAX Extensions tab). A good place to add the ScriptManager is right below the opening server-side tag. Add the ColorPicker control extender to the pageīefore you can use the ColorPicker, you must add a ScriptManager to your page.Add a ScriptManager control to the page.You need to complete two steps to use the ColorPicker control extender with the form in Listing 1: The ColorPicker displays a color dialog when you move focus to a TextBox control (see Figure 2).įigure 02: The ColorPicker Control Extender ( Click to view full-size image) You can use the ColorPicker control extender to create a better user experience. If the user wants a specialized color - for example, just the right shade of pea green - then the user must figure out the HTML color code without any help. The user has to type a color into the textbox. The form in Listing 1 works, but it does not provide a great user experience. LblSelectedColor.Text = txtCardColor.Text Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) When you submit the form, the selected values are displayed (see Figure 1).įigure 01: Simple form for creating a business card ( Click to view full-size image) The ASP.NET page in Listing 1 contains two TextBox controls named txtCardText and txtCardColor. Visitors can enter the text for a business card and pick the color. Imagine, for example, that you want to create a website that enables visitors to create customized business cards. Extending a TextBox Control with the ColorPicker Control Extender The ColorPicker is useful whenever you want to provide an intuitive user interface for a user to pick a color. The ColorPicker control extender displays a popup dialog that enables you to select a color. The goal of this tutorial is to explain how you can use the AJAX Control Toolkit ColorPicker control extender. It can be attached to any ASP.NET TextBox control. ColorPicker is an ASP.NET AJAX extender that provides client-side color-picking functionality with UI in a popup control.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |