English Version:http://dflying.dflying.net/1/archive/110_build_your_own_transformers_in_aspnet_atlas.html
Binding in ASP.NET Atlas is a powerful way to connect two objects. (You can refer to http://dflying.cnblogs.com/archive/2006/04/04/366900.html for more information about binding.) Atlas binding will automatically apply the changed properties on the source object to on the specified attribute of the target object. But sometimes you'll want to make some modifications to this property before applying it to the target object. For example, when displaying an indexed list, you might want the index to start incrementing from 1 instead of the default 0 in JavaScript. At this time you need to use Atlas Transformer. The Transformer in Atlas is something like a pipeline. It will be inserted into the process of assigning values from the properties of the source object to the properties of the target object, in order to perform the necessary filtering/decoration/conversion on the properties to be assigned (here it is to Add 1 to the source attribute) and then assign it to the target attribute.
Atlas provides some built-in transformers, such as Add, Multiply, Compare, etc. However, in actual development, in most cases we need to define our own transformer. Let's get familiar with how to write a custom transformer by developing an example of CustomBooleanTransformer.
CustomBooleanTransformer is used to convert Boolean values into our custom format, such as Yes/No or Completed/InProgress. If we choose to use binding to display a Boolean value to the user, then this transformer will be very useful, and it will give the user a more friendly user experience.
In general, creating a transformer will have the following four steps:
Obtain the value to be transformed passed in from the source binding object. Here we first call get_value() to obtain the incoming value and convert it to Boolean type.
Get the parameters of transformer. The parameter here is a string that can be split into two parts by a comma (,). The boolean true will be converted to the first part and false will be converted to the second part. If the parameter passed in is empty, the default string true/false is used instead.
Make the conversion. In this step, you should use your own logic to convert the incoming value into the outgoing value (usually using the parameters of the transformer obtained in the previous step). Here we first split the parameter into two parts with a comma (,), then replace true with the first part and false with the second part. If the argument cannot be split into two parts, use true/false instead.
To output the converted value, call the method set_value() to achieve it.
Below is the JavaScript code for CustomBooleanTransformer, save it as CustomBooleanTransformer.js.
Sys.BindingBase.Transformers.CustomBoolean = function(sender, eventArgs) {
// step 1, get input value.
var value = eventArgs.get_value();
if (typeof(value) != 'boolean') {
value = Boolean.parse(value);
}
// step 2, get arguments will be used in transforming.
var customString = eventArgs.get_transformerArgument();
if (customString == null || customString == '') {
customString = 'true,false';
}
// step 3, do the transformation.
var customValues = customString.split(',');
if (customValues.length != 2)
{
customValues[0] = 'true';
customValues[1] = 'false';
}
var newValue = value ? customValues[0] : customValues[1];
// step 4, set the transformed value as output.
eventArgs.set_value(newValue);
}
OK, now let's test this CustomBooleanTransformer. Add a checkbox and a textbox to the page and bind them. When the checkbox is selected/unchecked, the corresponding converted Boolean value will be displayed in the textbox.
Below is the HTML definition from the ASPX file. Don't forget to add a reference to the CustomBooleanTransformer.js file in the ScriptManager.
<atlas:ScriptManager ID="sm1" runat="server">
<Scripts>
<atlas:ScriptReference Path="CustomBooleanTransformer.js" />
</Scripts>
</atlas:ScriptManager>
<input id="myCheckbox" type="checkbox" />
<input id="myTextbox" type="text" />
Below is the Atlas script definition. Here, the transformerArgument is specified as 'Yes,No', in order to convert the Boolean value true into Yes and false into No. <page xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<references>
</references>
<components>
<checkBox id="myCheckbox" />
<textBox id="myTextBox">
<bindings>
<binding dataContext="myCheckbox" dataPath="checked"
property="text" transform="CustomBoolean" transformerArgument="Yes,No" />
</bindings>
</textBox>
</components>
</page>