Update Panel .NET

In part one I have shown how you can bind properties of two DOM elements, in this post, I will demonstrate how you can bind properties of DOM elements to a JavaScript object.

Under the hood, Sys.Binding uses the Sys.Observer component to track changes to objects.  An “observable” object can be a DOM element, a component (i.e. derived Sys.Component), or for that matter, any JavaScript object.

For the example, first create a blank ASP.NET Web Site and add the MicrosoftAjaxTemplates.js script.

Add the following mark-up to the page (between the <div> tags):

<asp:Label ID="Label1" runat="server" Text="Min:" AssociatedControlID="TextBox1" />
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Max:" AssociatedControlID="TextBox2" />
<asp:TextBox ID="TextBox2" runat="server" />
Range - min: <asp:Label ID="Label3" runat="server" /> max: <asp:Label ID="Label4" runat="server" />

Then add the following script inside a <script> block just before the closing </form> tag:

var range = { min: 0, max: 100 };
function pageLoad() {
    $create(Sys.Binding, {
        target: $get("TextBox1"),
        targetProperty: "value",
        source: range,
        path: "min",
        mode: Sys.BindingMode.twoWay
    });
    $create(Sys.Binding, {
        target: $get("TextBox2"),
        targetProperty: "value",
        source: range,
        path: "max",
        mode: Sys.BindingMode.twoWay
    });
    $create(Sys.Binding, {
        target: $get("Label3"),
        targetProperty: "innerHTML",
        source: range,
        path: "min",
        mode: Sys.BindingMode.oneWay
    });
    $create(Sys.Binding, {
        target: $get("Label4"),
        targetProperty: "innerHTML",
        source: range,
        path: "max",
        mode: Sys.BindingMode.oneWay
    });
}

Start the web site and you should see a page like this:

Try changing the value in either text box, the corresponding label will be updated automatically.

This is how it works – firstly, I define a JavaScript object named “range” (using JavaScript object notation). The range object has two properties, “min” and “max”.

var range = { min: 0, max: 100 };

I then bind the value of one text box to the min property of range and the value of the other text box to max. The bindings in both cases are two way, because I want any change made to the text box be reflected in the range object and vice versa.

$create(Sys.Binding, {
    target: $get("TextBox1"),
    targetProperty: "value",
    source: range,
    path: "min",
    mode: Sys.BindingMode.twoWay
});
$create(Sys.Binding, {
    target: $get("TextBox2"),
    targetProperty: "value",
    source: range,
    path: "max",
    mode: Sys.BindingMode.twoWay
});

To complete the example, I bind the innerHTML property of Label3 and Label4 to the min and max properties of the range object respectively, only this time, the binding is one way, because I only want the changes to the range object be reflected in the labels.

$create(Sys.Binding, {
    target: $get("Label3"),
    targetProperty: "innerHTML",
    source: range,
    path: "min",
    mode: Sys.BindingMode.oneWay
});
$create(Sys.Binding, {
    target: $get("Label4"),
    targetProperty: "innerHTML",
    source: range,
    path: "max",
    mode: Sys.BindingMode.oneWay
});

Please note that you should not “live bind” the innerHTML property of an element, because your page will potentially be at risk to script injection attacks.

In my next post, I will expand on this example by adding a slider control.

For more information on bindings, please refer to these posts:

• ASP.NET AJAX 4.0: Observing updates to POJOs
• Hack: using live bindings outside templates
• Cocoa Key-Value Observing Programming Guide