Tuesday, August 17, 2010

Ajax Server Control to Control Multiline entry

In the Visual studio 2008 , we have option to create a Ajax Server Control which actually create a Client Side controls  ie on the java script.The only thing is that this requires a script managers on the page,without this these client side controls wont work because the all the stuff is made on the asp.net Ajax.

Following is a small code spinet for a custom control that is build on the Ajax Server Control.

using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxServerControl1
{
  
    public class ServerControl1 :TextBox,IScriptControl
    {
        private ScriptManager _scriptManager;

        private ScriptManager ScriptManager
        {
            get
            {
                if (_scriptManager == null)
                {
                    _scriptManager = ScriptManager.GetCurrent(Page);
                    if (_scriptManager == null)
                        throw new InvalidOperationException(String.Format("The control with ID '{0}' requires    ScriptManager on the page."+
                    "The ScriptManager must appear before any controls that need it.", ID));
                }
                return _scriptManager;
            }
        }

        public ServerControl1()
        {
            //
            // TODO: Add constructor logic here
            //
        }
        public  virtual IEnumerable GetScriptDescriptors()

        {

            ScriptControlDescriptor descriptor = new                                                                                                                       ScriptControlDescriptor("AjaxServerControl1.ClientControl1", this.ClientID);

            yield return descriptor;

        }

       

        public virtual IEnumerable GetScriptReferences()

        {

            yield return new ScriptReference("AjaxServerControl1.ClientControl1.js",                                                       this.GetType().Assembly.FullName);

        }



        protected override void OnPreRender(EventArgs e)

        {

            ScriptManager.RegisterScriptControl(this);

            base.OnPreRender(e);

           

        }



        protected override void Render(HtmlTextWriter writer)

        {

            writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());

            ScriptManager.RegisterScriptDescriptors(this);

            base.Render(writer);

        }



        

    }

} 


Here is the sample script the that will actually  do this ...................
/// <reference name="MicrosoftAjax.js"/>


Type.registerNamespace("AjaxServerControl1");

AjaxServerControl1.ClientControl1 = function(element) {
    AjaxServerControl1.ClientControl1.initializeBase(this, [element]);
    this.ctrl = element;
    this.ml = this.ctrl.getAttribute("maxlength");
}

AjaxServerControl1.ClientControl1.prototype = {
initialize: function() {
    
        AjaxServerControl1.ClientControl1.callBaseMethod(this, 'initialize');
        this.ctrl.attachEvent('onkeypress', this.createDelegate(this, this._keypress));
        this.ctrl.attachEvent('onpaste', this.createDelegate(this, this._paste));
        this.ctrl.MaxLength = this.ml;
        
    },
    _keypress: function(evt) {
    
        var select = document.selection.createRange();
        var len;        
        if (select.parentElement() === this.ctrl)
            len = this.ctrl.value.length - select.text.length;
        else
            len = this.ctrl.value.length;
        if (evt.keyCode === 13 && len == this.ctrl.MaxLength - 1 || len >= this.ctrl.MaxLength)
            evt.keyCode = '';
        delete len; delete select;
    },
    _paste: function(evt) {
    
        var data = new String(clipboardData.getData("text"));
        var select = document.selection.createRange();
        var len;
        if (select.parentElement() === this.ctrl)
            len = this.ctrl.value.length - select.text.length;
        else
            len = this.ctrl.value.length;
        len = len + data.length;
        if (len > this.ctrl.MaxLength) {
            if (evt.preventDefault) { evt.preventDefault(); }
            else if (window.event) { window.event.returnValue = false; }
        }
        delete data; delete select; delete len;
    },
    createDelegate: function(instance, method) {
    
        if (Function.createDelegate)
            return Function.createDelegate(instance, method);
        return function() { return method.apply(instance, arguments); }
    },
    dispose: function() {    
       
        AjaxServerControl1.ClientControl1.callBaseMethod(this, 'dispose');
    }
}
AjaxServerControl1.ClientControl1.registerClass('AjaxServerControl1.ClientControl1', Sys.UI.Control);

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



Now a small magic .Please see the previous post on the asp.net related to the tag mapping .

Enjoy coding

0 comments:

Post a Comment