Seems that ASP.NET Ajax client library is not very often used. Microsoft seems is not extending this anymore and recommend JQuery instead. Personally I see no reason why this should not be used in SharePoint client side development. It offers a lot of flexibility when working with JavaScript classes and very easy you can extend a class by deriving a new from it. Check this.

Type.registerNamespace("SPControls");

SPControls.Generic = function (spControl) {
/// <signature>
///     <summary>Initialize SPControls.Generic class</summary>
///     <param name="spControl" type="" maybeBeNull="True" optional="False">Form control of anytype: checkbox, text, select, textarea</param>
/// </signature>

this.spControl = spControl;
}

SPControls.Generic.prototype = {

	get_baseControl: function () {
	/// <signature>
	///     <summary>Create observer on form control</summary>
	///     <returns>Form element</returns>
	/// </signature>
		return this.spControl;
	},

	observe: function (method, args) {
	/// <signature>
	///     <summary>Create observer on form control</summary>
	///     <param name="method" type="Function" maybeBeNull="False" optional="False">Form control of anytype: checkbox, text, select, textarea</param>
	///     <param name="args" type="Array" maybeBeNull="False" optional="False">Additional arguments to be passed to the callback method. First parameter is passed base control of the instance.</param>
	///     <returns type="Boolean"></returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "method", type: Function }, { name: "args", type: Array }], true);
		if (e) {
			alert("Invalid parameters in observe method of control " + this.spControl.id + ": " + e);
			throw e;
		}

		if (this.spControl === null) return false;

		var _ctl = this.spControl;
		$addHandler(this.spControl, "change", function () { method.apply(this, [_ctl].concat(args)); }, false);
		return true;
	},

	addCssClass: function (clsName) {
	/// <signature>
	///     <summary>Add CSS class on form control</summary>
	///     <param name="clsName" type="String" maybeBeNull="False" optional="False">CSS class name to be aplied.</param>
	///     <returns type="Boolean">True if control exists or false if not.</returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "clsName", type: String }], true);
		if (e) {
			alert("Invalid CSS class name to be added on control " + this.spControl.id + ": " + e);
			throw e;
		}

		if (this.spControl === null) return false;
		Sys.UI.DomElement.addCssClass(this.spControl,clsName);
		return true;
	},

	removeCssClass: function (clsName) {
	/// <signature>
	///     <summary>Remove CSS class for form control</summary>
	///     <param name="clsName" type="String" maybeBeNull="False" optional="False">CSS class name to be removed.</param>
	///     <returns type="Boolean">True if control exists or false if not.</returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "clsName", type: String }], true);
		if (e) {
			alert("Invalid CSS class name to be removed from control " + this.spControl.id + ": " + e);
			throw e;
		}

		if (this.spControl === null) return false;
		Sys.UI.DomElement.removeCssClass(this.spControl,clsName);
		return true;
	},

	toogleCssClass: function (clsName) {
	/// <signature>
	///     <summary>Toogle CSS class on form control</summary>
	///     <param name="clsName" type="String" maybeBeNull="False" optional="False">CSS class name to be toogled.</param>
	///     <returns type="Boolean">True if control exists or false if not.</returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "clsName", type: String }], true);
		if (e) {
			alert("Invalid CSS class name to be toogled from control " + this.spControl.id + ": " + e);
			throw e;
		}

		if (this.spControl === null) return false;
		Sys.UI.DomElement.toggleCssClass(this.spControl, clsName);
		return true;
	}
}
SPControls.Generic.registerClass("SPControls.Generic");

The class above is intended to be a generic from control created inside a namespace SPControls. This class includes generic methods and properties for textbox or single select control. Now I can built textbox class without rewriting all of these.

SPControls.DVTextBox = function (spControl) {
/// <signature>
///     <summary>Initialize SPControls.DVTextBox class</summary>
///     <param name="spControl" type="" maybeBeNull="True" optional="False">Input text control.</param>
/// </signature>
	SPControls.DVTextBox.initializeBase(this, [spControl]);
}

SPControls.DVTextBox.prototype = {

	getValue: function () {
	/// <signature>
	///     <summary>Get the value of the input text control</summary>
	///     <returns type="String">Control value of empty string if control is not found.</returns>
	/// </signature>
		if (this.spControl === null) return "";
		return this.spControl.value.toString().trim();
	},

	getText: function () {
	/// <signature>
	///     <summary>Get the value of the input text control</summary>
	///     <returns type="String">Control value of empty string if control is not found.</returns>
	/// </signature>
		return this.getValue();
	},

	setValue: function (val) {
	/// <signature>
	///     <summary>Set the value of the input text control</summary>
	///     <returns type="Boolean">True if control exists and false is not.</returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "val", type: String }], true);
		if (e) {
			alert("Unable to set the value of control control " + this.spControl.id + ": " + e);
			throw e;
		}

		if (this.spControl === null) return false;
		this.spControl.value = val.trim();
		return true;
	},

	setText: function (val) {
	/// <signature>
	///     <summary>Set the value of the input text control</summary>
	///     <returns type="Boolean">True if control exists and false is not.</returns>
	/// </signature>

		var result = this.setValue(val);
		return result;
	}
}
SPControls.DVTextBox.registerClass("SPControls.DVTextBox", SPControls.Generic);

And not it is single select control turn. Noticed we do not repeat methods and properties which this control has in common with textbox.

SPControls.DVDropDown = function (spControl) {
/// <signature>
///     <summary>Initialize SPControls.DVDropDown class.</summary>
///     <param name="spControl" type="" maybeBeNull="True" optional="False">Select form control.</param>
/// </signature>
	SPControls.DVDropDown.initializeBase(this, [spControl]);
}

SPControls.DVDropDown.prototype = {

	getValue: function () {
	/// <signature>
	///     <summary>Get the value of the single select control</summary>
	///     <returns type="String">Selected option value or empty string if select control is not found.</returns>
	/// </signature>
		if (this.spControl === null) return "";
		return this.spControl.options[this.spControl.selectedIndex].value.trim();
	},

	getText: function () {
	/// <signature>
	///     <summary>Get the value of the single select control</summary>
	///     <returns type="String">Selected option value or empty string if select control is not found.</returns>
	/// </signature>
		if (this.spControl === null) return "";
		return this.spControl.options[this.spControl.selectedIndex].text.trim();
	},

	setValue: function (val) {
	/// <signature>
	///     <summary>Set selected index of single select based on option value.</summary>
	///     <params name="val" type="String" optional="False" mayBeNull="False">True if control exists and option value is present in the options list or false if not.</params>
	///     <params name="caseSensitive" type="Boolean" optional="True" mayBeNull="True">True if control exists and option value is present in the options list or false if not.</params>
	///     <returns type="Boolean">True if control exists and option value is present in the options list or false if not.</returns>
	/// </signature>

		var e = Function._validateParams(arguments, [{ name: "val", type: String, optional: false, mayBeNull: false }, { name: "caseSensitive", type: Boolean, optional: true, mayBeNull: true }], false);
		if (e) {
			throw e;
		}

		if (this.spControl === null) return false;
		var opts = this.spControl.options;
		for (var i = 0; i < opts.length; i++) {
			if (this.spControl.options[i].value.trim() === val.trim()) {
				this.spControl.selectedIndex = i;
				return true;
				break;
			}
		}
		return false;
	},

	setText: function (val, caseSensitive) {
	/// <signature>
	///     <summary>Set selected index of single select based on option value.</summary>
	///     <params name="val" type="String">True if control exists and option value is present in the options list or false if not.</params>
	///     <params name="caseSensitive" type="Boolean">True if control exists and option value is present in the options list or false if not.</params>
	///     <returns type="Boolean">True if control exists and option value is present in the options list or false if not.</returns>
	/// </signature>

		if (this.spControl === null) return false;
		var opts = this.spControl.options;
		for (var i = 0; i < opts.length; i++) {
			var isMatch = (this.spControl.options[i].text.trim() === val.trim());
			if (this.spControl.options[i].text.trim() === val.trim()) {
				this.spControl.selectedIndex = i;
				return true;
				break;
			}
		}
		return false;
	}
}
SPControls.DVDropDown.registerClass("SPControls.DVDropDown", SPControls.Generic);
Advertisements