How to use AJAX Watermark Control using ASP.NET
Welcome weary traveler, and welcome to our Learning Center! Let us begin right off the bat. If you are here, it is not by mistake. You are in search of quenching your thirst for knowledge and in this tutorial we will go over adding a bit of flare to your current web application, form or such.
To spice things up a bit we will be making a very simple form and applying the AJAX TextBoxWatermarkExtender Control. First, let’s begin by creating a new project and go to our Default.aspx page. Once there let’s begin by dragging a pair of textboxes to our page and let’s name them first and last name, respectively. Now we have created a simple for with two textbox’s, one for you first name and another for you last, now how does your user know what goes where?
Originally we would have done the old, bland method of just adding a Label Control to the vicinity of our textbox’s to inform them. That is so last year, so let us try something a bit more eye catching. If you have not done so, go ahead and add the AJAX Control toolkit. After doing so be sure to take a quick skim of your new toys to play with.
Next, locate and drag on over a ToolkitScriptManager Control and place it at the top of your body opening tag. This must come before using any AJAX Control. Now we can move on the actual Watermark Control. It is labeled TextBoxWatermarkExtender. Go ahead and drag one over to each of the textboxes. I personally like to keep all the related controls together to help me organize the code to keep it maintainable, plus it’s just good practice.
Now with that out of the way we can go ahead and name the watermark controls something to help distinguish which is for which textbox. After doing so we will need to add a property to the watermark control. Let’s add the TargetControlID property. This is where we will tell the watermark which control we want it to actually mark.
Now in the properties window we can add a bit more information to make this work correctly. In the “Watermark Text” section you can now put whatever you want to be displayed, I will be using “First Name” as to add a type of label inside the textbox, but as soon as the user clicks and enters their into, it disappears. Be sure to save your work and run the application and let’s see what you have made with the most minimal amount of actual code writing.
Pretty cool, huh? Now, you may think that still looks a little bland and I don’t want it to look like that is actual entered text. I want there to be a distinguishing feature. We can now add some style to this. Let’s go back to our source view and let’s add another property, CssClass. And let’s put on the textbox “nonwatermarked” and on the Watermark Extender let’s use WatermarkCssClass and put to “watermarked”. Now in our CSS file we can add a “watermark” and “nonwatermark” tag. After a bit of magic, let’s see what we have.
Hopefully now you have a better understanding of how to use the Textbox Watermark Extender Control. I will include all the word for this Tutorial in the Source Code link Download at the bottom. Until Next time, be safe and take care!
WatermarkTut.zip
To spice things up a bit we will be making a very simple form and applying the AJAX TextBoxWatermarkExtender Control. First, let’s begin by creating a new project and go to our Default.aspx page. Once there let’s begin by dragging a pair of textboxes to our page and let’s name them first and last name, respectively. Now we have created a simple for with two textbox’s, one for you first name and another for you last, now how does your user know what goes where?
Originally we would have done the old, bland method of just adding a Label Control to the vicinity of our textbox’s to inform them. That is so last year, so let us try something a bit more eye catching. If you have not done so, go ahead and add the AJAX Control toolkit. After doing so be sure to take a quick skim of your new toys to play with.
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!
Next, locate and drag on over a ToolkitScriptManager Control and place it at the top of your body opening tag. This must come before using any AJAX Control. Now we can move on the actual Watermark Control. It is labeled TextBoxWatermarkExtender. Go ahead and drag one over to each of the textboxes. I personally like to keep all the related controls together to help me organize the code to keep it maintainable, plus it’s just good practice.
Now with that out of the way we can go ahead and name the watermark controls something to help distinguish which is for which textbox. After doing so we will need to add a property to the watermark control. Let’s add the TargetControlID property. This is where we will tell the watermark which control we want it to actually mark.
Code Block
Default.aspx
Watermark Control<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div><p></div> </form> </body> </html>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="wmtbFirstName" runat="server" Enabled="true"
TargetControlID="txtFirstName" WatermarkText="First Name">
</asp:TextBoxWatermarkExtender>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="wmtbLastName" runat="server" Enabled="true"
TargetControlID="txtLastName" WatermarkText="Last Name">
</asp:TextBoxWatermarkExtender>
</p>
We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting!
Pretty cool, huh? Now, you may think that still looks a little bland and I don’t want it to look like that is actual entered text. I want there to be a distinguishing feature. We can now add some style to this. Let’s go back to our source view and let’s add another property, CssClass. And let’s put on the textbox “nonwatermarked” and on the Watermark Extender let’s use WatermarkCssClass and put to “watermarked”. Now in our CSS file we can add a “watermark” and “nonwatermark” tag. After a bit of magic, let’s see what we have.
Hopefully now you have a better understanding of how to use the Textbox Watermark Extender Control. I will include all the word for this Tutorial in the Source Code link Download at the bottom. Until Next time, be safe and take care!
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
WatermarkTut.zip
