AJAX Textbox WaterMarkExtender


In this article I'm trying to explain how to work with Textbox waterMarkExtender in AJAX. TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behavior.

AJAX Textbox WaterMarkExtender:


In this article I'm trying to explain how to work with Textbox waterMarkExtender in AJAX.

Description:


TextboxWaterMArkExtender control is used to display the text content in TextBox itself. Using this we can reduce the space of the web page for example, we try to open one pop up in that need to enter something in textbox we need to give some description before that textbox but don't have that much space to give text. In that scenario we use WaterMarkExtender, using this we can display the text inside textbox control once we try to enter something then the title of the textbox is disappear. Once we delete the content in textbox again it's shows the title of the textbox.

Properties:



TargetControlID -- Id of the textbox to operate on.
WatermarkText — default text when there is no text in control.
WatermarkCssClass – Apply styles to Textbox control while enter and remove the text in controls.

StyleSheet:



<style type="text/css">

/*Textbox Watermark*/

.unwatermarked {
height:18px;
width:148px;
}

.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}


Before start a project download AJAX toolkit dll and add assembly reference to that project.

Source Code:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextboxWatermark.aspx.cs" Inherits="TextboxWatermark" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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>
<style type="text/css">

/*Textbox Watermark*/

.unwatermarked {
height:18px;
width:148px;
}

.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}
.style1
{
color: #003300;
font-size: large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<span class="style1"><strong>TextBoxWatermark Demonstration</strong></span><br />
<br />
//Without ScriptManager it's throws server error
<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

<asp:TextBox ID="txtFstName" runat="server" CssClass="unwatermarked"></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server" TargetControlID="txtFstName"
WatermarkText="Enter First Name" WatermarkCssClass="watermarked"
></ajaxToolkit:TextBoxWatermarkExtender>
<br />

<asp:TextBox ID="txtLstName" runat="server" CssClass="unwatermarked" ></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="tbwePwd" runat="server" TargetControlID="txtLstName" WatermarkText="Enter Last Name"
WatermarkCssClass="watermarked"
></ajaxToolkit:TextBoxWatermarkExtender>

</div>
</form>
</body>
</html>



OutPut:



1

2

ScriptManager:

<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

Without wrote this line in source code it’s throws the server error to overcome this issue we just add above lines of code under div tag.

3

Conclusion:



Using this control we reduce the space and provide some better look to page. Hope this will help you those who are looking for this.


Attachments

  • Source Code (45193-223619-Source-Code.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: