1

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

您对这段代码的总体感受是什么？好的？坏的？

编辑：我将 eval 替换为 entity[property]

编辑：使用的命名空间建议

编辑：更改了选择器，使其适用于任何表单元素

4

1 回答 1

0

如果是我，我会给你的函数命名，而不是让它们自由浮动：

(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); 
    });
于 2009-12-19T05:12:44.890 回答