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

我使用asp.net中的webforms构建了一个支持ajax的UI。我非常希望这种互动非常轻松。我想要做的就是拨打电话获取数据，然后将其绑定到我的表单客户端。使用javascript，json和jquery获取和设置客户端的表单值

这是我的工作示例。

<!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与实体[属性]

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

编辑：改变了选择，以便它与任何形式的元素

来源

2009-12-19 Glenn

为什么你使用eval？怎么样'实体[property]' – czarchaic 2009-12-19 02:53:10

在asp.net中已经合作过了;）谢谢你应该清理它的建议。 – Glenn 2009-12-19 03:03:24

@czarchaic：那就是答案！发布它 – 2009-12-19 03:45:56

工作，如果是我的话我将命名空间的功能，而不是让他们自由浮动：

(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-19 05:12:44 prodigitalson

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

回答

相关问题