Looking to de-clutter your forms, or want to give your Text Boxes some style, even some instructions? Like “type your name here” and once the user types his or hers name, the watermark will disappear, Well this handy AJAX Control will do just that!
Pretty cool isn’t it?
Did you know?
It is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
The TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get “watermark” behavior.
When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.
This Extender is so easy to use, so simple you may end up using on every textbox.
We are going to show you a simple demonstration, with little to no CSS, you may style your textboxes however you’d like, you may change the watermark color and opacity.
First things let’s add New WebForm to this project and name it TextBoxWaterMark.aspx
As always add a ScriptManager to the page.
Add an UpdatePanel. Set the ID to UpdatePanel1
Add 2 TextBoxes and you can drag TextBox watermark extenders to the textboxes..
Add a Button and set the properties as well.
Set the TargetControls to the text boxes and the extender controls.
<asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server" /><br/>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1"runat="server"
TargetControlID="TextBox1"
WatermarkText="Type First Name Here"
WatermarkCssClass="watermarked" />
Last name:
<asp:TextBox ID="TextBox2" CssClass="unwatermarked" Width="150"runat="server" /><br /><br />
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2"runat="server"
TargetControlID="TextBox2"
WatermarkText="Type Last Name Here"
WatermarkCssClass="watermarked" />
As you can see above we set a CSS rule for each text box, of UnwaterMarked and WaterMarked.The TextBox watermark extender has very simple properties to set.
Below is the CSS we used for our boxes.
<style>
/*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;
}
</style>
We chose Server Intellect for its cloud hosting,
for our web hosting. They have managed to handle virtually everything
for us, from start to finish. And their customer service is stellar.
<script runat="server">
protected void Page_Loadundefinedobject sender, EventArgs e)
{
Button1_Clickundefinednull, null);
}
protected void Button1_Clickundefinedobject sender, EventArgs e)
{
string firstName = undefinedundefined"" == TextBox1.Text) ? "[blank]" : TextBox1.Text);
string lastName = undefinedundefined"" == TextBox2.Text) ? "[blank]" : TextBox2.Text);
Label1.Text = HttpUtility.HtmlEncodeundefinedstring.Formatundefined"Hello {0} {1}!", firstName, lastName));
}
</script>
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud servers!.Now Load the WebPage in your browser and it should look something like this, depending on how you styled your TextBoxes.
See how easy that was?Not as easy when ….
We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
