TextBoxWatermark Control
- This Control attached to an ASP.NET TextBox control to get "watermark"
behavior on the web Page.
- Purpose of this control to provide more information to user.
Properties
- TargetControlID, Control ID.
- WatermarkText, The text to show when the control has no value
- WatermarkCssClass, The CSS class to apply to the TextBox.
Step.1 Drag ScriptManager Control and add a two Text Box . Click on First
Text Box and click on Add Extender.
Step 2. Above process is repeat for the Second Text Box
(Same as above). Add a button and Two Label on page for show the text which user
enter in Text Box. Paste the Below code on button Click (Default.aspx.cs).
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello!!!!" + "" +TextBox1.Text.ToString();
Label2.Text = "" + TextBox2.Text.ToString();
}
|
The Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs"
Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"
tagprefix="cc1" %>
<!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>Untitled Page</title>
<style type="text/css">
.style2
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"
style="top: 86px; left: 10px; position: absolute; height: 22px;
width:223px"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"
style="top: 138px; left: 9px; position: absolute; height: 21px;
width: 225px"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBox2_TextBoxWatermarkExtender"
runat="server" Enabled="True" TargetControlID="TextBox2"
WatermarkText="Enter Your Second Name..">
</cc1:TextBoxWatermarkExtender>
<asp:Button ID="Button1" runat="server"
style="top: 134px; left: 294px; position: absolute; height: 26px;
width: 56px"
Text="Submit" onclick="Button1_Click" />
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Label ID="Label2" runat="server"></asp:Label>
</form>
</body>
</html>
|
Step 3. Debug the Application. Output Will Be
Enter text in Textbox
Tolal:0 Click:
Show All Comments
