Creating waterMark textbox by using ASP.net Ajax control tool kit


Asp.net ajax tool kit have make it very much easy to create a watermarked control. Its just a matter of few lines of code and steps. To create watermarked textbox using Asp.Net Ajaxcontroltoolkit follow the steps below :

Step 1. First add the ToolkitScriptManager control to the page. this ToolkitScriptManager is very important without adding this control the page will not accept any ajaxtoolkit control.

Step 2. then add the asp.net textbox control to the page. suppose the control id is txtMemberName

Step 3. add the TextBoxWatermarkExtender control on the page. and set the TargetControlID property value to txtMemberName (or any other that targated to make as watermark) and set the WatermarkText property to text that wanted to show as water marked text.

Thats all, after running this page it will show a textbox with water marked text, but the style is not like water marked. To make it more attractive as water mark text box have to add some style in the property WatermarkCssClass.

The source code block that I have used in my test to create water marked text box is like below :

<style>

 

.waterMark

{ height: 16px;

width: 168px;

padding: 2px 2 2 2px;

border: 1px solid #BEBEBE;

background-color: #F0F8FF;

/* color: gray;*/

font-size: 8pt;

text-align: center;

}

</style>

 

<asp:ToolkitScriptManager ID=”ToolkitScriptManager1″ runat=”server”>

</asp:ToolkitScriptManager>

<asp:TextBoxWatermarkExtender ID=”txtWaterMarkMemberName” WatermarkCssClass=”waterMark” WatermarkText=”enter member name” TargetControlID=”txtMemberName” runat=”server”>

</asp:TextBoxWatermarkExtender>

<asp:TextBox ID=”txtMemberName” runat=”server”></asp:TextBox>

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: