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

Question

我正在使用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对象的属性都是变量类型，所以我应该如何最好地传达我正在使用的类型，以便将数据绑定到select时，我可以评估正确的jquery？

您对此代码有什么总体看法？ 好？坏？

编辑：我用实体[属性]替换了eval

编辑：使用命名空间建议

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

Answer 1

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

(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); 
    });

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2009-12-19 05:12:44

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2009-12-19 05:12:44

解决方案1
0 已采纳 2009-12-19 05:12:44