The following is not a .Net topic. It’s an Internet Explorer 5 topic. The following technique can be used with any web page that uses IE 5+ as the client, so I’ve used it with .html, .asp, and .aspx files. It’s client-side xml databinding with Internet Explorer. This feature isn’t in Mozilla, but if you have an IE Intranet app, this is a possible way in which you can make your front end more responsive and flexible.
If you weren’t away, you can embed a section of xml in a web page, add some attributes to some html controls, and IE will automatically duplicate your bound controls for as many nodes as exist in the xml fragment. There are events that are thrown throughout the binding process, so you can use JavaScript or VBScript to make the front end dynamic. The following is a simple binding example:
<html>
<xml id=”xml”>
<MyData>
<Node>
<CheckBox>checked</CheckBox>
<Kount>0</Kount>
</Node>
<Node>
<CheckBox>1</CheckBox>
<Kount>4</Kount>
</Node>
<Node>
<CheckBox>0</CheckBox>
<Kount>6</Kount>
</Node>
</MyData>
</xml>
<body>
<table datasrc=”#xml”>
<tbody>
<tr>
<td>
<input type=”checkbox” id=”chk” datafld=”CheckBox”>
</td>
<td>
<input type=”button” id=”btn” datafld=”Kount”>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Now, one small issue I ran into was that the property bound in the button is the value property. The value property is the text on the face of the button, so that won’t due. I modified it using JavaScript and a <input/> tag event to solve this if I need the button to be disabled if the value isn’t 0.
<html>
<script language=”javascript”>
function changeButton(button){
if(button.value != “0”){
button.disabled = true;
}else{
button.disabled = false;
}
button.onpropertychange = “”;
button.value = “Delete”;
}
</script>
<xml id=”xml”>
<MyData>
<Node>
<CheckBox>checked</CheckBox>
<Kount>0</Kount>
</Node>
<Node>
<CheckBox>1</CheckBox>
<Kount>4</Kount>
</Node>
<Node>
<CheckBox>0</CheckBox>
<Kount>6</Kount>
</Node>
</MyData>
</xml>
<body>
<table datasrc=”#xml”>
<tbody>
<tr>
<td>
<input type=”checkbox” id=”chk” datafld=”CheckBox”>
</td>
<td>
<input type=”button” id=”btn” datafld=”Kount” onpropertychange=”changeButton(this);”>
</td>
</tr>
</tbody>
</table>
</body>
</html>