How to display an image for textbox server control while focus the control?

To display an image for textbox server control while on focus the control using AJAX functionality
Example: In this article implements a simple client behavior, text box control is display image when it is selected or has focus in the browser.

Default Behavior




ASP.NET AJAX client behavior 

The control might change image occur inside the text box when it has focus, and then return to the default when focus moves to another control.

Contents:

• About Extender Control
• Creating the Client Namespace in Javascript
• Namespace Class and Methods definition with examples 
• Sys. Application Class and Methods
• Step-By-Step Procedures to create Extender control.
  

About Extender Control

An Extender Control used to create the client behavior and assign to Web server controls to display in a Page.

In ASP.Net provides ExtenderControl Abstract class in the System.Web.UI namespace.The extender control can be applied to a web server control by using TargetControlTypeAttribute

• FocusToCntrl– identifies the CSS class that will be applied to the DOM element to highlight the control when it has focus.
• BlurToCntrl– identifies the CSS class that will be applied to the DOM element to highlight the control when it does not have focus.

While inheriting the extender control must implement the two members

1. GetScriptDescriptors method
2. GetScriptReferences method

GetScriptDescriptors method

GetScriptDescriptors method to define the instance of the client behavior type and the control creates a new scriptbehaviorDescriptor object and that object return value for the GetScriptDescriptors method.


The client class name and ClientID values supplied to the constructor.

Example:

ScriptBehaviorDescriptor objdesc = new 
ScriptBehaviorDescriptor("MRSamples.FocusBehavior", 
targetControl.ClientID);

            objdesc.AddProperty("FocusToCntrl", this.pFocusCssClass);

            objdesc.AddProperty("BlurToCntrl", this.pBlurCssClass);

            return new ScriptDescriptor[] { objdesc };

GetScriptReferences method

GetScriptReferences method specifies a JavaScript file that contains the client code for the behavior type.

Example:

ScriptReference objref = new ScriptReference();
           objref.Path = ResolveClientUrl("ControlBehavior.js");
           return new ScriptReference[] { objref };

Create the Extender control supplies the scriptbehaviourdescriptor object.

Example:

<Muhil:FocusExtender ID="FocusExtender1" runat="server"
                                  pBlurCssClass="BlurCtrl"
                                  pFocusCssClass="FocusCtrl"
                                  TargetControlID="TextBox1" />

Creating the Client Namespace in Javascript

The client namespace javascript code must call the registerNamespace method of the Type class to create its namespace (MRSamples).

registerNamespace method is used to create a namespace in client side. This is especially useful in large projects. By using namespaces, you can group classes. Each class name is then qualified by its namespace, which gives you a way to create globally unique class names.

In a registernamespace can declare one or more of the following classes:

• Another namespace
• A class
• An interface
• An enumeration
• A delegate

Example:

Type.registerNamespace('MRSamples');

Type class

Type class provides a typing and type-reflection system to define the client class

MRSamples.FocusBehavior Class

This class defines the MRSamples.FocusBehavior client class and it includes two properties to hold the property values supplied by the web server control. After the MR.FocusBehavior class is defined, the client code defines the prototype for the class.

Two Methods are important for behavior class

• Initialize Method
• Dispose Method

Initialize Method

Initialize method is called when an instance of the behavior is created and this method  used to set default property values

It will call the initialize method of the Sys.UI.Behavior base class and Calls the addHandlers method to add event delegates.

Example:

MRSamples.FocusBehavior.prototype = {initialize : function() 
{
   
MRSamples.FocusBehavior.callBaseMethod(this, 'initialize');
       
  $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus, 'blur' : this._onBlur },this);

                       this.get_element().className = this.BlurCssClass;
    },

Dispose Method

The dispose method is called when an instance of the behavior is no longer used on the page and is removed and it call the dispose method of the Behavior base class.

Example:

dispose : function() {

        $clearHandlers(this.get_element());

  

        MRSamples.FocusBehavior.callBaseMethod(this, 'dispose');

    }

   

Register the behavior to a page.

To register the client class by calling the registerClass method

Example:

MRSamples.FocusBehavior.registerClass('MRSamples.FocusBehavior', Sys.UI.Behavior);

Sys. Application Class and Methods

A call to the notifyScriptLoaded method provides notification in all browser types that the script has finished loading.

Example:

if (typeof(Sys) !== 'undefined') 
Sys.Application.notifyScriptLoaded();

When calling the notifyScriptLoaded method  to check Microsoft Ajax Library to prevent errors if the library is unavailable.

Step-By-Step Procedures to create Extender control and client behavior.

1. Create an App_Code folder under the root folder of the Web site.
2. Create .cs file(MRFcsExt.cs) under the APP_Code folder.
3.  copy and paste the below code in MRFcsExt.cs Class

 using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace MRExtender
{
    [TargetControlType(typeof(Control))]
    public class FocusExtender : ExtenderControl
    {
        private string p_FocusCssClass;
        private string p_BlurCssClass;

        public string pFocusCssClass
        {
            get { return p_FocusCssClass; }
            set { p_FocusCssClass = value; }
        }

        public string pBlurCssClass
        {
            get { return p_BlurCssClass; }
            set { p_BlurCssClass = value; }
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference objref = new ScriptReference();
            objref.Path = ResolveClientUrl("ControlBehavior.js");

            return new ScriptReference[] { objref };
        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor objdesc = new ScriptBehaviorDescriptor("MRSamples.FocusBehavior", targetControl.ClientID);
            objdesc.AddProperty("FocusToCntrl", this.pFocusCssClass);
            objdesc.AddProperty("BlurToCntrl", this.pBlurCssClass);

            return new ScriptDescriptor[] { objdesc };
        }
    }
}

4.    Compile and run the web page. The extender control is dynamically compiled
5.    Add javscript file (ControlBehavior.js) in your website
6.    In ControlBehavior.js copy and paste the below code.

Type.registerNamespace('MRSamples');
MRSamples.FocusBehavior = function(element) {
MRSamples.FocusBehavior.initializeBase(this, [element]);
    this.FocusCssClass = null;
    this.BlurCssClass = null;
}

MRSamples.FocusBehavior.prototype = {
    initialize : function() {
    MRSamples.FocusBehavior.callBaseMethod(this, 'initialize');
        
        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

                       this.get_element().className = this.BlurCssClass;
    },
    
    dispose : function() {
        $clearHandlers(this.get_element());

        MRSamples.FocusBehavior.callBaseMethod(this, 'dispose');
    },

    _onFocus : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this.FocusCssClass;          
        }
    },
    
    _onBlur : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this.BlurCssClass;          
        }
    },


    get_FocusToCntrl: function() {
    return this.FocusCssClass;
    },

    set_FocusToCntrl: function(value) {
    if (this.FocusCssClass !== value) {
        this.FocusCssClass = value;
        this.raisePropertyChanged('FocusToCntrl');
        }
    },

    get_BlurToCntrl: function() {
    return this.BlurCssClass;
    },

    set_BlurToCntrl: function(value) {
    if (this.BlurCssClass !== value) {
        this.BlurCssClass = value;
        this.raisePropertyChanged('BlurToCntrl');
        }
    }
}


MRSamples.FocusBehavior.descriptor = {
properties: [{ name: 'FocusToCntrl', type: String },
                    { name: 'BlurToCntrl', type: String}]
}


MRSamples.FocusBehavior.registerClass('MRSamples.FocusBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

7.    Create a New ASP.Net Page or use Default.aspx page
8.    If the page doest not have a ScriptManager control , add the scriptmanager control into aspx page

       <asp:ScriptManager ID="ScriptManager1" runat="server" />

9.     Add a two TextBox and control to the page and markup for the controls must include runat="server". Looks below

10.    Create CSS Style for textboxes for onfocus and onblur that you like

 <style type="text/css">

    .BlurCtrl

    {

        background-color:#eeeeee;

    }



    .FocusCtrl

    {

        background:#FFFFFF url(images/icon-pencil.gif) no-repeat 4px 
4px;

        padding:4px 4px 4px 22px;

        border:1px solid #CCCCCC;

        

    }

    

    </style>

11.     Add an @ Register directive to the page, then specify the namespace and the TagPrefix attribute for the extender control

<%@ Register Namespace="MRExtender" TagPrefix="Muhil" %>

12.    Add an instance of the FocusExtender control to the page.
13.    Set the TargetControlID property of the FocusExtender control to the ID

<Muhil:FocusExtender ID="FocusExtender1" runat="server"
                                 
 pBlurCssClass="BlurCtrl"
                                  
pFocusCssClass="FocusCtrl"
                                  
TargetControlID="TextBox1" />

14.  Run the page and select each control.

Text Box control is occurring with image when it has focus.

Complete Code Listing

• ASPX Page
• Extender Control (MRFcsExt.cs)
• Javascript (ControlBehavior.js)

ASPX Page

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Namespace="MRExtender" TagPrefix="Muhil" %>


<!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 id="Head1" runat="server">
    <title>Sample for Extender Control CSS Properties -Muhil</title>
    
    <style type="text/css">
    .BlurCtrl
    {
        background-color:#eeeeee;
    }

    .FocusCtrl
    {
        background:#FFFFFF url(images/icon-pencil.gif) no-repeat 4px 4px;
    	padding:4px 4px 4px 22px;
    	border:1px solid #CCCCCC;
    	
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label runat="server" ID="Label1" AssociatedControlID="TextBox1">First Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1" runat="server" /></td>
              </tr>
              <tr>
                <td><asp:Label runat="server" ID="Label2" AssociatedControlID="TextBox2">Last Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox2" runat="server" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>

            <asp:Button runat="server" ID="Button1" Text="Submit Form" />
            
 <Muhil:FocusExtender ID="FocusExtender1" runat="server"
                                  pBlurCssClass="BlurCtrl"
                                  pFocusCssClass="FocusCtrl"
                                  TargetControlID="TextBox1" />
            <Muhil:FocusExtender ID="FocusExtender2" runat="server"
                                  pBlurCssClass="BlurCtrl"
                                  pFocusCssClass="FocusCtrl"
                                  TargetControlID="TextBox2" />
          

        </div>


    </form>
</body>
</html>

Extender Control (MRFcsExt.cs)

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace MRExtender
{
    [TargetControlType(typeof(Control))]
    public class FocusExtender : ExtenderControl
    {
        private string p_FocusCssClass;
        private string p_BlurCssClass;

        public string pFocusCssClass
        {
            get { return p_FocusCssClass; }
            set { p_FocusCssClass = value; }
        }

        public string pBlurCssClass
        {
            get { return p_BlurCssClass; }
            set { p_BlurCssClass = value; }
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference objref = new ScriptReference();
            objref.Path = ResolveClientUrl("ControlBehavior.js");

            return new ScriptReference[] { objref };
        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor objdesc = new ScriptBehaviorDescriptor("MRSamples.FocusBehavior", targetControl.ClientID);
            objdesc.AddProperty("FocusToCntrl", this.pFocusCssClass);
            objdesc.AddProperty("BlurToCntrl", this.pBlurCssClass);

            return new ScriptDescriptor[] { objdesc };
        }
    }
}

Javascript (ControlBehavior.js)

Type.registerNamespace('MRSamples');
MRSamples.FocusBehavior = function(element) {
MRSamples.FocusBehavior.initializeBase(this, [element]);
    this.FocusCssClass = null;
    this.BlurCssClass = null;
}

MRSamples.FocusBehavior.prototype = {
    initialize : function() {
    MRSamples.FocusBehavior.callBaseMethod(this, 'initialize');
        
        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

                       this.get_element().className = this.BlurCssClass;
    },
    
    dispose : function() {
        $clearHandlers(this.get_element());

        MRSamples.FocusBehavior.callBaseMethod(this, 'dispose');
    },

    _onFocus : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this.FocusCssClass;          
        }
    },
    
    _onBlur : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this.BlurCssClass;          
        }
    },


    get_FocusToCntrl: function() {
    return this.FocusCssClass;
    },

    set_FocusToCntrl: function(value) {
    if (this.FocusCssClass !== value) {
        this.FocusCssClass = value;
        this.raisePropertyChanged('FocusToCntrl');
        }
    },

    get_BlurToCntrl: function() {
    return this.BlurCssClass;
    },

    set_BlurToCntrl: function(value) {
    if (this.BlurCssClass !== value) {
        this.BlurCssClass = value;
        this.raisePropertyChanged('BlurToCntrl');
        }
    }
}


MRSamples.FocusBehavior.descriptor = {
properties: [{ name: 'FocusToCntrl', type: String },
                    { name: 'BlurToCntrl', type: String}]
}


MRSamples.FocusBehavior.registerClass('MRSamples.FocusBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Conclusion

I have attached a sample project and let me know your feedback's.

Note: Download project should be in C:\