× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Color Picker and Confirm Button - Exploring Microsoft ASP.NET Ajax - Lesson 11 | .net courses

In this video, we are going to talk about the ColorPickerExtender and ConfirmButtonExtender.

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. With the ConfirmButtonExtender, the user will get a dialog confirming whether or not to proceed with the action. You can still do that in JavaScript. But this control is more compact, and it will give you the option to run some JavaScript function if the user cancels the submit. Like every Ajax control, the ConfirmButtonExtender has a TargetControlId property to specify the control that will trigger the confirmation (like a link button or a standard button).

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.

Video Transcription

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.

In today's video, I'd like to talk about a couple of things. First things is the ColorPicker so we can choose a specific color on the page and then the second thing is a ConfirmButton. So, you know how it is when you are programming with JavaScript. When it does something you can load a message box and say, "Are you sure you want to do this" something like that. So, but this JavaScript is pretty much hidden from you just can use the control to do that work for you. So, let's go ahead and create those two examples. The first one is the ColorPicker, the second one is the ConfirmButton.

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.

For that, as we always do, we need to select the target control. Right? The TargetControlID in this case would be 'Button1'. So that will trigger the ConfirmButtonExtender. Click it on that button. All right? Now, I'm going to put the ConfirmText. What text would you like to see on the dialog when it shows up? Okay? So something like "Are you sure you want to submit the data?" Let's put the ConfirmText to say "Are you sure you want to submit the data?" Okay? Now what else can I change? One more property. Let's select the OnClientCancel. When the client cancels, when they dialog says "OK Cancel" the user did not want to submit the data. They want to cancel. What action would you like to run? That's could be a JavaScript function that says CancelSubmit for example. That's the name of the function that I wanted to run if the user clicked cancel. Okay?

Again, I have the option of removing this and putting this slash over here to save some lines. Okay? Let's go ahead to the top and let's write some JavaScript with that function. It's called script, type, text/javaScript, in here I'll have a function, the name of the function is "CancelSubmit," I believe that's what we named it, and for that function I'm going to put an alert. That alert says "The data is not submitted." Okay? Something like that. So now when the user clicks on the button, it will trigger that extender and it says "Are you sure you want to submit the data?" If the user click "OK," nothing happens. If the user click "cancel," well, in that case, we'll have to trigger that function called "CancelSubmit," that's the function that I have over here, "CancelSubmit" Okay?

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.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login