ASP.NET AJAX TextBox Watermark Control
In this example i am showing how to use AJAX TextBoxWatermarkExtender in the ASP.NET. Basically watermark is useful for giving sample message to the text box. If we try to enter data on the text box, text box will be empty and then we can enter data. In the below output, first name data is "ranga" which i have entered. Come to last name it came from the watermark extender.
If we see the below Text Box watermak extender, we have to give the WatermarkCssClass, Water mark text, Targetcontrolid and runat attributes are must.
If we see the below Text Box watermak extender, we have to give the WatermarkCssClass, Water mark text, Targetcontrolid and runat attributes are must.
<Ajax:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" WatermarkCssClass="WaterMarkClass"
WatermarkText="Ranga" TargetControlID="txtFirstName" runat="server">
</Ajax:TextBoxWatermarkExtender>
Output:
 |
| ASP.NET AJAX TextBox Watermark Control Example |
ASP.NET CODE:
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.WaterMarkClass
{
background-color: #EaEaEa;
border: solid 0.5px #818181;
padding: 3px;
}
.WithOutWaterMark
{
border: solid 1.5px #818181;
padding: 3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</Ajax:ToolkitScriptManager>
<b>First Name:</b>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="WithOutWaterMark">
</asp:TextBox>
<Ajax:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" WatermarkCssClass="WaterMarkClass"
WatermarkText="Ranga" TargetControlID="txtFirstName" runat="server">
</Ajax:TextBoxWatermarkExtender>
<br />
<b>Last Name:</b><asp:TextBox ID="txtLastName" runat="server" CssClass="WithOutWaterMark">
</asp:TextBox>
<Ajax:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" WatermarkCssClass="WaterMarkClass"
WatermarkText="Rajesh" TargetControlID="txtLastName" runat="server">
</Ajax:TextBoxWatermarkExtender>
<br />
</div>
</form>
</body>
</html>
Post a Comment
Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.