I am building out an ajax enabled UI using webforms in asp.net. I really want this interaction to be extremely light. What I would like to do is make a call to get the data and then bind it to my form client side.
Here is my working example.
<!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>Untitled Page</title>
<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
<style type="text/css">
body { font-family: Arial; font-size:10px; }
#formRow label { display:block;}
#formRow input { display:block; margin-bottom: 10px;}
</style>
<script type="text/javascript">
(function ($) {
$.formUtil = {
bind: function (row, entity) {
for (property in entity) {
//take the property name and put it together with the entity and eval it
var propertyValue = entity[property];
//take the property name and use it to build a selector to go find the input value in the form
//need a switch to be able to determine different element types
$(row).find('#' + property).val(propertyValue);
}
},
reverseBind: function (row, entity) {
for (property in entity) {
//Get the value from the target form element
entity[property] = $(row).find('#' + property).val();
alert(entity[property]);
}
}
};
})(jQuery);
//Create an object to fill the form in with
//This will not be needed once there is a web service call to get the object
function detailItem() {
this.name = "Widget 123";
this.description = "Some wonderful description";
this.category = "2";
}
//Define the detail object on a global scale so that later it can be used to set the values into in reverse bind
var detail = null;
$(document).ready(function () {
detail = new detailItem();
$.formUtil.bind('#formRow', detail); //Initial bind for page load
});
</script>
</head>
<body>
<div id="formRow">
<label>Name:</label>
<input type="text" id="name" /><!--Notice the id is he same as the field name in the object-->
<label>Description:</label>
<input type="text" id="description" /><!--Notice the id is he same as the field name in the object-->
<label>Category:</label>
<select id="category">
<option value="1">Apples</option>
<option value="2">Oranges</option>
<option value="3">Banannas</option>
</select>
<input type="button" onclick="$.formUtil.reverseBind($(this).parents('div').get(0), detail)" value="Get Data From Form" />
</div>
</body>
</html>
My question is: Is there a better way to do this already? Because the JSon object's properties are all variant type how should I best communicate what type I am working with so that if I am binding the data to a select I can eval the correct jquery?
What are your general feelings about this code? Good? Bad?
Edit: I replaced eval with entity[property]
Edit: Used namespace suggestion
Edit: Altered the selector so that it would work with any form element