I've been struggling for ages now to get the ASP.NET AJAX DataContext object to track my changes to complex types. The binding seems to work and the underlying object gets updated, but the DataContext object does not track the change.
Here is a simplified version of my code (with the WCF fetch and save call taken out).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">
var customers = null;
var dataContext = null;
Sys.require([Sys.components.dataView, Sys.components.dataContext], function() {
customers =
[
{ Contact: { Name: 'Fred Johnson' }, Country: { Name: 'USA'} },
{ Contact: { Name: 'Davie Jones' }, Country: { Name: 'England'} }
];
dataContext = Sys.create.dataContext();
dataContext.trackData(customers);
Sys.create.dataView('#CustomerView',
{
data: customers
});
});
function onSave() {
if (dataContext.get_hasChanges()) {
alert("Saved");
}
else {
alert("No changes to save.");
}
}
</script>
</head>
<body xmlns:sys="javascript:Sys">
<div id="CustomerView" class="sys-template">
<ul>
<li>
<label for="country">{{Contact.Name}}</label>
<input id="country" sys:value="{binding Country.Name}" />
</li>
</ul>
</div>
<input id="save" type="button" value="Save" onclick="javascript: onSave();" />
</body>
</html>
Why when I click the save button, having changed the value in the country text box, the dataContext object thinks that there are no changes to save?