How to Use TextBoxWhatermarkExtender control on ASP.NET Website

Introduction :- The TextBoxWhatermarkExtender control is used to provide a tip to provide a tip to the user that specifies the type of parameter entered within the text box.This extender attaches to a TextBox control and displays a text within the text box when the web page renders for the first time. when the user clicks the text box to insert values,the default text gets hidden. If you  have not installed ajax toolkit ,You can install it from here
 There are some properties of this extender control as given below:-
1.) TargetControlID :- It sets the ID of the TextBox control to which you want to attach the extender control.
2.) TargetControlID :- It sets text to display when the value in the text box is empty.
3.) WhatmarkCssClass :- It sets the Css class for text box when it is empty.

 There are some steps to implement this whole concepts as given below:-
Step 1  :-  First open your visual studio --> File --> New --> ASP.NET Empty website --> OK--> Open solution Explorer --> Add a New page(Default.aspx)--> Drag and Drop ToolkitScriptManager ,Label,Text Box  and Button Controls on the page as shown below:-

Step :-  Now open Source file --> Drag and drop TextBoxWaterMark controls --> Set it properties as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <span class="style1">How to Use </span><span class="style2">
        TextBoxWhaterMarkExtender</span><span class="style1"> Control On ASP.NET Website</span><br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <br />
        <asp:Label ID="Label1" runat="server" Text="Enter your name"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server" Height="32px" Width="252px"></asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Enter your Age"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" Height="32px" Width="252px"></asp:TextBox>
        <br />
        <asp:Label ID="Label3" runat="server" Text="Enter your favoriot website"></asp:Label>
       <asp:TextBox ID="TextBox3" runat="server" Height="32px" Width="252px"></asp:TextBox>
        <br />
        <asp:Label ID="Label4" runat="server" Text="Enter your Location"></asp:Label>
        <asp:TextBox ID="TextBox4" runat="server" Height="32px" Width="252px"></asp:TextBox>
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
        TargetControlID="TextBox1" WatermarkCssClass="watermark" WatermarkText="Enter your name">
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" 
        TargetControlID="TextBox2" WatermarkCssClass="watermark" WatermarkText="Enter your Age">
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" runat="server" 
        TargetControlID="TextBox3" WatermarkCssClass="watermark" WatermarkText="Enter your favoriot website">
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4" runat="server" 
        TargetControlID="TextBox4" WatermarkCssClass="watermark" WatermarkText="Enter your Location">
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Height="26px" 
            style="font-weight: 700; background-color: #FF99FF" Text="Submit" 
            Width="95px" />

Step :- Now run the application (press F5) --> You will see following output as shown below:-

For More,,,
  1. How to add captcha image on ASP.NET Website
  2. How to add .mdf database in website
  3. oops concepts in c#
  4. How to make Media player in visual studio 2010
  5. How to displayyour data in grid view control


Post a Comment

Powered by Blogger.