Introduction: In this article i am going to explain with example How to Use/ Apply/ Implement TextBox Watermark Extender control of Ajax on the TextBox controls in asp.net using both C# and Vb.Net language.
 |
| Click on image to enlarge |
On the registration form there are fields like First Name, Last Name, DOB,and Address etc. Now the trend is to skip the labels for fields and write the label text inside the text fields with the help of TextBoxWatermarkExtender control provided by the Ajax. Label text display inside Text fields and when you click inside text box to enter something, this text disappears. So you can also use it as a guideline instruction for instructing what to fill in the Text Box as shown in demo image.
I have also implemented the RequiredFieldValidator validation control to ensure First Name, Last Name, DOB,and Address fields are not left blank and also RegularExpression control to validate Date to be in dd/mm/yyyy format in the Date of Birth field while submitting the form.
Below is the list of applicable properties of the TextBoxWatermarkExtender that you can set as per application requirement.
- TargetControlID - The ID of the TextBox On which watermark is to be applied.
- WatermarkText - The text to show when the textbox control is empty.
- WatermarkCssClass - The CSS class to apply styles to the watermark text in the TextBox.
Implementation: In the <Head> tag of the design page (.aspx) create the styles for the TextBoxWatermarkExtender as:
<style type="text/css">
.watermarked
{
background-color: #F7F6F3;
border: solid 1px #808080;
padding: 3px;
color:Gray;
}
.unwatermarked
{
border: solid 1px #808080;
padding: 3px;
color:Gray;
}
</style>
But It is always recommended to
place all the styles in the CSS ( Cascade
Style sheet) so that they can be used anywhere in the project. So to add
stylesheet in the website goto website menu and click Add New item.. ->
Select StyleSheet.css.
- In the Stylesheet.css paste the following
{
background-color: #F7F6F3;
border: solid 1px #808080;
padding: 3px;
color:Gray;
}
.unwatermarked
{
border: solid 1px #808080;
padding: 3px;
color:Gray;
}
and save the file.
- Now to use this StyleSheet we have to link this stylesheet with our design page (.aspx) . So in the <Head> tag add the line <link href="StyleSheet.css" rel="stylesheet" type="text/css" />.
- You can also drag the Stylesheet.css from the solution explorer to the <Head> tag. It will automatically create the <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> line.
Source Code:
<fieldset style="width:320px;">
<legend>Ajax TextBoxWatermark example in asp.net</legend>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<table width="100%">
<tr>
<td>
<asp:TextBox ID="txtFirstName"
runat="server"
Width="200px"
CssClass="unwatermarked"></asp:TextBox>
<asp:TextBoxWatermarkExtender
ID="txtWeFirstName"
TargetControlID="txtFirstName"
WatermarkText="Enter
First Name Here"
WatermarkCssClass="watermarked"
runat="server">
</asp:TextBoxWatermarkExtender><br />
<asp:RequiredFieldValidator
ID="rfvFirstName"
runat="server"
ErrorMessage="First
Name can't be left blank"
ControlToValidate="txtFirstName"
SetFocusOnError="true"
ForeColor="Red"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtLastName"
runat="server"
Width="200px"
CssClass="unwatermarked"></asp:TextBox>
<asp:TextBoxWatermarkExtender
ID="txtWeLastName"
TargetControlID="txtLastName"
WatermarkText="Enter
Last Name Here"
WatermarkCssClass="watermarked"
runat="server">
</asp:TextBoxWatermarkExtender><br />
<asp:RequiredFieldValidator
ID="rfvlastName"
runat="server"
ErrorMessage="Last
Name can't be left blank"
ControlToValidate="txtLastName"
SetFocusOnError="true"
ForeColor="Red"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtDOB" runat="server"
Width="200px"
CssClass="unwatermarked"></asp:TextBox>
<asp:TextBoxWatermarkExtender
ID="txtWeDOB"
TargetControlID="txtDOB"
WatermarkText="Enter
DOB(dd/mm/yyyy) Here"
WatermarkCssClass="watermarked"
runat="server">
</asp:TextBoxWatermarkExtender><br />
<asp:RequiredFieldValidator
ID="rfvDOB"
runat="server"
ErrorMessage="DOB
can't be left blank"
ControlToValidate="txtDOB" SetFocusOnError="true" ForeColor="Red"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="rgeDOB"
runat="server"
ControlToValidate="txtDOB"
ErrorMessage="Please
enter DOB in dd/mm/yyyy format"
SetFocusOnError="True"
ValidationExpression="^(((0[1-9]|[12]\d|3[01])/(0[13578]|1[02])/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)/(0[13456789]|1[012])/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])/02/((19|[2-9]\d)\d{2}))|(29/02/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$"
Display="Dynamic"
ForeColor="Red"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtAddress"
TextMode="MultiLine"
runat="server"
Width="295px"
CssClass="unwatermarked"
Rows="3"></asp:TextBox>
<asp:TextBoxWatermarkExtender
ID="txtWeAddress"
TargetControlID="txtAddress"
WatermarkText="Enter
Your Address Here"
WatermarkCssClass="watermarked"
runat="server">
</asp:TextBoxWatermarkExtender><br />
<asp:RequiredFieldValidator
ID="RequiredFieldValidator3"
runat="server"
ErrorMessage="Address
can't be left blank"
ControlToValidate="txtAddress"
SetFocusOnError="true"
ForeColor="Red"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStatus"
runat="server"
Text=""
style="color: #006600"></asp:Label></td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
onclick="btnSubmit_Click"
/>
<asp:Button ID="btnReset"
runat="server"
Text="Reset"
onclick="btnReset_Click"
CausesValidation="false"
/>
</td>
</tr>
</table>
</fieldset>
Note: Have
you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
added automatically next to the very first line in the design page. Actually it
registers the Ajax Control on placing
TextBoxWatermarkExtender control on design page.
C#.Net Code to use Ajax TextBoxWatermarkExtender example in asp.net
- In the code behind file (.aspx.cs) write the code as:
protected void
Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Reset_Controls();
}
}
protected void
btnSubmit_Click(object sender, EventArgs e)
{
lblStatus.Text = "Hello
" + txtFirstName.Text + " "
+ txtLastName.Text + "," + " DOB is : " + txtDOB.Text + ","
+ " Address is :" +
txtAddress.Text;
}
protected void
btnReset_Click(object sender, EventArgs e)
{
Reset_Controls();
}
private void
Reset_Controls()
{
txtFirstName.Text
= string.Empty;
txtLastName.Text = string.Empty;
txtAddress.Text = string.Empty;
txtDOB.Text = string.Empty;
lblStatus.Text = string.Empty;
}
VB.Net Code to use Ajax TextBoxWatermarkExtender example in asp.net
- Design the form as mentioned above in the source code. But replace the line
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
onclick="btnSubmit_Click"
/> with the line <asp:Button ID="btnSubmit"
runat="server"
Text="Submit" /> and also replace the line <asp:Button ID="btnReset"
runat="server"
Text="Reset"
onclick="btnReset_Click"
CausesValidation="false"
/> with the line
<asp:Button ID="btnReset" runat="server" Text="Reset" CausesValidation="false" />
<asp:Button ID="btnReset" runat="server" Text="Reset" CausesValidation="false" />
- In the code be hind file(.aspx.vb) write the code as:
Protected Sub
Page_Load(sender As Object,
e As System.EventArgs)
Handles Me.Load
If Not
Page.IsPostBack Then
Reset_Controls()
End If
End Sub
Protected Sub
btnSubmit_Click(sender As Object, e As System.EventArgs) Handles
btnSubmit.Click
lblStatus.Text = "Hello " +
txtFirstName.Text & " " +
txtLastName.Text & "," & " DOB is : " + txtDOB.Text & "," & "
Address is :" + txtAddress.Text
End Sub
Protected Sub
btnReset_Click(sender As Object, e As System.EventArgs) Handles
btnReset.Click
Reset_Controls()
End Sub
Private Sub
Reset_Controls()
txtFirstName.Text = String.Empty
txtLastName.Text = String.Empty
txtAddress.Text = String.Empty
txtDOB.Text = String.Empty
lblStatus.Text = String.Empty
End Sub
Now over to you:
"If you like my work; you can appreciate by leaving your comments,
hitting Facebook like button, following on Google+, Twitter, Linked in and
Pinterest, stumbling my posts on stumble upon and subscribing for receiving
free updates directly to your inbox . Stay tuned and stay connected for more
technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..