TextBoxWatermarkExtender Control in AJAX

Introduction

Ajax (Asynchronous JavaScript and XML) is new web development technique use for the interactive website. AJAX help we can developed web application and retrieve small amount of data from web server. AJAX consist a different type of technology.

• JavaScript
• XML
• Asynchronous Call to the server

TextBoxWatermarkExtender Control

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. The watermark is typically used to provide more information to the user about the TextBox itself without cluttering up the rest of the page. The Watermark displays some text and style which are specified whether that value is present or not in the textbox.

Property

• TargetControlID
• BehaviorID
• Watermarkcssclass
• Watermarktext

Step 1 : Open Visual Studio 2010.

• Go to File->New->WebSite
• Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

• Select Add->New Item
• Select WebForm
• Default.aspx page open

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

• Drag a Updatepanel, ScriptManager, TextBox, Label and a Button

ContentTemplate for UpdatePanel

Step 4 : Go to Default.aspx page[Source]option and define <contentTemplate> for the UpdatePanel.

Code

<ContentTemplate>
    Name
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID ="TextBox1" WatermarkText="textthe my name" WatermarkCssClass="watermarked">
        </asp:TextBoxWatermarkExtender>
        Age&nbsp;&nbsp;&nbsp;
              <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
              </ContentTemplate>

Step 5 : Go to Default.aspx page[Design] option and go to UpdatePanel property.

• Define childrenTriggerproperty is "True"

Step 6 : Now go to Default.aspx[Design]option and drag TextBoxWatermarkExtender control from Toolbox.

Step 7 : Go to Default.aspx[Source] option and define TargetcontrolID,  WatermarkText, WatermarkTextCssClass and write a code.

Code

   <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID ="TextBox1" WatermarkText="textthe my name" WatermarkCssClass="watermarked">
        </asp:TextBoxWatermarkExtender>

Step 8 : Go to Default.aspx.cs file and write a code.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1_Click(null, null);
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string name = (("" == TextBox1.Text) ? "[blank]" : TextBox1.Text);
        string age = (("" == TextBox2.Text) ? "[blank]" : TextBox2.Text);
        Label1.Text = HttpUtility.HtmlEncode(string.Format("Hello {0} {1}!", name, age));
    }
}

Step 9 : Go to Default.aspx page option and write a code.

Code

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #86DF9C">
        <br />
        MY AJAX APPLICATION WITH ASP.NET
        <br />
        <br />
    <asp:updatepanel ID="Updatepanel1" runat="server" ChildrenAsTriggers="true">
    <ContentTemplate>
    Name
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID ="TextBox1" WatermarkText="textthe my name" WatermarkCssClass="watermarked">
        </asp:TextBoxWatermarkExtender>
        Age&nbsp;&nbsp;&nbsp;
              <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID ="TextBox2" WatermarkCssClass ="watermarked" WatermarkText ="textage">
        </asp:TextBoxWatermarkExtender>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submission"
            onclick="Button1_Click" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
        </asp:updatepanel>
    </div>
    </form>

Step 10 :  Now run the application by Pressing F5.

Step 11 : Now we define name, age and click on submission button then following output show.

Resource

• AJAX Rating Control

• ASP.Net AJAX GridView Loading using C#

• GridView Using Ajax ModalPopupExteder

• Ajax tab control using CSS