Microsoft AJAX Library Preview 6 & Data Binding

Sorry for a long absence.In my last post I had discussed about Microsoft AJAX Library Preview 6 and the DataView control.In this post we will take a look into the data binding feature.

Let’s first take a look at the Sys.Binding class and it’s following properties

  • target – The target object
  • targetProperty – The property of the target object
  • source – The source object
  • path – The property of the source object

The BindingMode enumeration has the following values:

  • auto [integer 0] – This is the default which indicates two way.
  • oneTime [integer 1] – The data flows from source to target and for one time only.
  • oneWay [integer 2] – The data flows from source to target
  • twoWay [integer 3] – The data flows from source to target & vice versa.
  • oneWayToSource [integer 4] – The data flows from target to source.

The two important methods are:

  • initialize – This method initializes the binding.
  • update – This method updates the source and target depending upon binding mode

Let’s consider the following example with two textboxes:

<body>
    <input type="text" id="txtSource" value="123" />
    <input type="text" id="txtTarget" />
</body>

In the Sys.onReady() I have created a binding between the two objects as shown below:

<script type="text/javascript">
    var b;
    Sys.onReady(function() { 

        b = new Sys.Binding();
        b.set_target(document.getElementById('txtTarget'));
        b.set_targetProperty("value");
        b.set_source(document.getElementById('txtSource'));
        b.set_path("value");
        b.initialize();

    });
</script>

Now by default there is a two way binding between the controls and changing value in one will result in same value in the other.

Another alternate way to initialize the binding is by using Sys.bind method as shown below:

Sys.bind(document.getElementById('txtTarget'),"value",document.getElementById('txtSource'),"value");

In the next post we will discuss about how binding works with the DataView control.

Posted in Web App | Leave a comment