AJAX TextBox WaterMark Control Tutorial in ASP.NET using C#
See more tutorials in Controls. This post has Comments Off on AJAX TextBox WaterMark Control Tutorial in ASP.NET using C#.
In This Tutorial we will learn how to create and use an AJAX Textbox Watermark Control. The AJAX Textbox Watermark Control is a simple control that allows greyed out text to be displayed over an empty Textbox. It is a very popular control on web forms helping to show people what to place in Textboxes without using Labels. It is a very simple setup, but it makes a site look more professional.
Step 1. Creating the Form and Controls
1. Create a new Web Form called “Default.aspx”
2. Add a TextBox to the Form and name it “TextBox1″
3. Add a Script Manager to the Form (always do this for AJAX applications)
3. Click the Smart Tag on the Textbox and choose add extender
4. Choose the Textbox Watermark Extender
5. Go into the Code View and add this Line into the Extender Tag
6. Once Complete the code should look like below.
<form id=“form1” runat=“server”>
<asp:ScriptManager ID=“ScriptManager1” runat=“server”>
<asp:TextBox ID=“TextBox1” runat=“server”></asp:TextBox>
runat=“server” Enabled=“True” WatermarkText=“Enter Name” TargetControlID=“TextBox1”>
Step 2. Run the Application
When you run the Application you should notice that a Textbox appears on the screen and it displays the Text “Enter Name”.
Before/After Focus when empty:
It may appear that there is Text in the Textbox, but upon focusing the Textbox it disappears. Also, when you focus on another Item while the Textbox is empty it will show the Watermark again, thus eliminating the need for Labels to Label your Textboxes.
In this Tutorial we learned how to create, use and setup a Textbox Watermark Extender. This is a very simple setup that can make your websites look much better and more professional in a matter of minutes.