Duration: 16 minutes
Summary: In this video, we are going to talk about the ColorPickerExtender and ConfirmButtonExtender. With the color picker, we can target a control like a textbox for example. When the textbox gets the focus, the color picker dialog will show. The user can select a color from the dialog. In addition to that, the color picker provides a SampleControlId property. Setting this property to a control on the page, the control’s back ground color will change depending on the color the user is hovering over. That way, the user can select the appropriate color after viewing a sample.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, Button, ToolkitScriptManager, Label, TextBox, ColorPickerExtender,TargetControlId, SampleControlId, function, ConfirmButtonExtender.
Welcome back, everyone. This is Ayad Boudiab. I'm a senior .net application developer and we are proceeding with our discussion of AJAXControlToolkit and in every one of those videos we take one or two controls and we try to experiment with the controls in detail and just trying to figure out how the control works and how we can use it in our day-to-day programming experience.
In the previous video, I talked about the CollapsiblePanelExtender and in that I showed you how we can add that extender that we can associate it with a Panel and be able to expand and collapse the Panel depending on our needs in addition to other properties that we can set.
On the right-hand side, right click on the project, add a new item, Web Form and let's name it "ColorPickerExample" click add. Before I forget and before I get an error message trying to load the page, first thing I want to do in my AjaxControlToolkit is pick up at ToolkitScriptManager and drop it on the page. Okay? Underneath that I'm going to add a Label and I'll show you shortly what's the purpose of that Label.
So, I'm going to drop the Label over here. We can keep the name 'Label1', but let's change the Text to say something. "Here is some sample text". So I have a label. Now, underneath the label I'm going to drop a textbox and then the ColorPickerExtender. So underneath the label I'm going to put a break and I'm going to drop a textbox, 'Textbox1', that's fine, and then I'm going to have the ColorPickerExtender.
Scroll down to the toolkit and let's look for ColorPickerExtender. Here it is. Drop that on the page. So now I have a ColorPickerExtender right underneath the textbox. I want to link them. So, obviously, the first thing I'd like to do is make sure that my TargetControlID is being set. The target is the textbox. Of course, you can have a button to load this dialog that shows the color, but in this case the way I'm setting it up right now when the textbox get the focus you will see the dialog for the colors.
I set up my TargetControlID. The second thing I'd like to set up is the SampleControlID. Now, what's the difference? In the case of the SampleControlID is, basically, when you hover over the colors in the dialog you want the background color of a certain control to show the color that you're hovering over. That way you can have some type of sample so you can choose the color that suits your needs. Now, you understand the purpose of adding the label.
I added the label on the top. That label will show me the color as I'm hovering over it and then when I decide to select the color that specific color would be in the textbox. Okay? So we drop the manager first, the label, the textbox and the ColorPickerExtender.
Let's right click on the page and try to preview that in the browser. It shows me a label and a textbox. When I click on the textbox you see the color picker shows up underneath. Now, as I hover over the color notice what's going to happen to the label. Do you see the background of the label, how it's changing? It's giving me some options to choose from in here. So that's how it's going to look like when I choose the color, just as some type of sample for the user to choose from.
You could imagine that you're working for a store that sells clothes and in that case when the user needs to choose a specific color for a shirt that they are buying online, you can use that sample to display how the color would look like and the user would go over them, hover over the colors and say, "Yeah, maybe that blue color is good for me," and then select it. Once they do the color shows up in the textbox. Okay? Of course we can take it from there and save that color and so on, but you know now the purpose of the ColorPickerExtender that helps us select a specific color so we can choose that color and proceed from there. Okay?
Now, let's go ahead and look at our next example which is the ConfirmButtonTest. Right click on the project, add a new item. Let's call this one "ConfirmButtonExample," click Add. Now I have my page. It's empty, Let me go over to the AjaxControlToolkit. Let me select my ToolkitScriptManager, drop that manager on the page. And this error message, I want to get rid of them, showing up. So now I have the Script Manager on the page. Now what do I want to do? Now the ConfirmButton basically is confirming the user's action. So imagine you have a form, you fill out the form with information, you click the send button and the button said shows up as a dialog. It shows "Are you sure you want to do this?" And say, yes, that's what I want to do and you proceed or if you cancel then something else is going to happen. So, that's what we're trying to do.
In that case, let's go ahead a create a simple Table that shows just a couple of things like first name, last name. Okay? So let's do this. Let's scroll up to the basic standard controls, drop a Table. The Table has TableRow. TableRow has TableCell's. I want two cells. One cell for a label and one cell for a textbox. So I'm going to drop that underneath. I need two rows of this. I'm going to copy that row, place it underneath it. The first one would contain a label that says enter first name or first name, that's the Text of the label, it says "First Name:". Of course, underneath it I'll have a textbox. Okay, so I need this, let me txtFirst and then underneath that I'm going to drop a label here that says "Last Name" and underneath textbox that says just ID the txtLast. If I click on the design, I should be able to see a Table with two rows and two columns, first name and last name. Okay?
Let's go back to the source and proceed from there. Now that I dropped the label, I'm sorry, the Table, with a Table row and Table column, underneath the Table I'm going to put a break and I'm going to drop a Button. Let's call it "Button1" that's fine. The Text says "Submit". Now that I'm done with the button, right underneath it I'm going to use my ConfirmButtonExtender. Scroll down to the AjaxControlToolkit and let's look for the ConfirmButtonExtender. Here it is. Going to drop that on the page and let's change it's properties.
Let's go ahead and give it shot and see what we end up with. I have the Table shows me the first name, last name. Go ahead and type the data. Okay? And then I click Submit. Here' the extender took over and says "Are you sure you want to submit the data?" Click "OK," nothing happens. The data is submitted. Everything proceeds as usual. Right? So nothing fancy in there.
Now, the other thing is I can, again, fill out the form, say "Submit" and it says "Are you sure you want to submit the data?" If I click "Cancel," it triggered the function. It says the "Data is not submitted". Okay? Now don't worry about this one that shows up when I'm running in Chrome. It says "Prevent this page from additional dialogs.". You don't want these dialogs to keep showing, but don't worry about it.
The one that I'm interested in, it says the data is not submitted. So, therefore, the function that the function here was triggered because the user has selected the "Cancel" and OnClientCancel, I want to run that function and that's the ConfirmText that shows up on the first attempt when I click the "Submit" says "Are you sure to submit the data." Of course, there are other properties that you can experiment with to see how this ConfirmButtonExtender works, but that's the main idea behind it.
So, today we talked about the ConfirmButtonExtender. See how we can use that from the AjaxControlToolkit so we be able to have to submit the data the user fills out on a form or back off and trigger some action if we don't want that data submitted like in this case of OnClientCancel.
I also talked about the ColorPicker that allows us to select a specific color, but when the user clicks on a certain control, for example, the textbox, and how we can see some sample data so we can choose the color that we are interested in.
Again, I hope this discussion is helpful to you. Please, always give us feedback on the Mr. Bool website if you have any concerns. Thank you very much for listening. I'm Ayad Boudiab and you take care.