In an SnippetCallback, when defining mapping between a web service method parameter and a control, there is a client-side function for each control type that deals with extracting the value from the control and passing it as the web service methods parameter.
By default most of the simple web controls (TextBox, Checkbox, RadioButtonList, etc) that come out-of-the-box with ASP.NET already have a corresponding client-side value extractor function defined, but obviously this is not good enough if you want to use custom controls.
To override these or add new ones there are two things that need to be done, first off a new extractor function would have to be defined in configuration.
<configSections>
<section name="ajaxSnippets" type="AjaxSnippets.Configuration.AjaxSnippetsConfigurationSection, AjaxSnippets"/>
</configSections>
<ajaxSnippets>
<extractors>
<add controlType="System.Web.UI.WebControls.TextBox" functionName="myCustomTextBoxExtractor" />
<add controlType="My.Custom.Control" functionName="fromMyCustomControl" />
</extractors>
</ajaxSnippets>
In this example, I am overriding the textbox extractor with my own function myCustomTextBoxExtractor, secondly I am defining a new value extractor fromMyCustomControl for My.Custom.Control.
Now the next thing that needs to be done is to write the client functions, this can be done by creating a new javascript file, which would need to be included in the page that Ajax Snippets are being used.
AjaxSnippets.ValueExtractors.prototype.myCustomTextBoxExtractor = function(id){
var el = $get(id);
// Extract value from el and return it here
}
AjaxSnippets.ValueExtractors.prototype.fromMyCustomControl = function(id){
var el = $get(id);
// Extract value from el and return it here
}
Ajax Snippets has a ValueExtractors class, and its simply just a job of adding functions to its prototype.
To give a better example, the ValueExtractors default prototype is below in full, in its current state from Ajax Snippets 0.3a release.
AjaxSnippets.ValueExtractors.prototype = {
fromAny: function(id) {
return id;
},
fromTextBox: function(id) {
return $get(id).value;
},
fromDropDown: function(id) {
var el = $get(id);
return el.options[el.selectedIndex].value;
},
fromRadioList: function(id) {
var i, els = $get(id).getElementsByTagName('input');
for (i = 0; i < els.length; i++) {
if (els[i].checked) { return els[i].value; }
}
return null;
},
fromCheckList: function(id) {
var i, els = $get(id).getElementsByTagName('input'), vals = new Array();
for (i = 0; i < els.length; i++) {
vals.push(els[i].checked);
}
return vals;
},
fromListBox: function(id) {
var i, el = $get(id), vals = new Array();
for (i = 0; i < el.options.length; i++) {
if (el.options[i].selected) { vals.push(el.options[i].value); }
}
return vals;
},
fromCheckBox: function(id) {
return $get(id).checked;
}
};