使用javascript、json和jquery在客户端获取和设置表单值_Javascript_Jquery_Json_Bind

使用javascript、json和jquery在客户端获取和设置表单值

javascript jquery json

使用javascript、json和jquery在客户端获取和设置表单值,javascript,jquery,json,bind,Javascript,Jquery,Json,Bind,我正在asp.net中使用webforms构建一个支持ajax的UI。我真的希望这种互动非常轻松。我想做的是调用以获取数据，然后将其绑定到我的表单客户端这是我的工作示例 <!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/19

我正在asp.net中使用webforms构建一个支持ajax的UI。我真的希望这种互动非常轻松。我想做的是调用以获取数据，然后将其绑定到我的表单客户端

这是我的工作示例

<!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>

我的问题是：有没有更好的方法可以做到这一点？因为JSon对象的属性都是variant类型，所以我应该如何最好地传达我正在使用的类型，以便在将数据绑定到select时可以评估正确的jquery

您对该代码的总体感觉如何？好的糟糕

编辑：我将eval替换为实体[属性]

编辑：使用名称空间建议

编辑：更改选择器，使其可以与任何表单元素一起工作

如果是我，我将为您的函数命名名称空间，而不是让它们自由浮动：

(function($){
  $.myNamespace = {
      bind = function(row, entity){},
      reverseBind = function(row, entity){}
  };
})(jQuery);

$(document).ready(function () {

        detail = new detailItem();
        /* note i pass in a selector instead of the jQ node list - IMO using jQ on the selector 
           should be done and verified within the functions not as part of the argument. */
        $.myNamespace.bind('#formRow', detail); 
    });

你为什么用eval？实体[属性]在asp.net中被关得太久了怎么办；谢谢你的建议，应该把它清理干净一点。@Czarchic:这就是答案！发布它…我在想，我能够为不同类型的输入（如复选框和选择列表）更改选择器的唯一方法是在ID属性中存储更多信息，以便稍后解析它。思想？