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
