Получение и установка значений формы на стороне клиента с помощью javascript, json и jquery - PullRequest
Новая
       10

Получение и установка значений формы на стороне клиента с помощью javascript, json и jquery

1 голос
/ 19 декабря 2009

Я создаю пользовательский интерфейс с поддержкой ajax, используя веб-формы в asp.net. Я действительно хочу, чтобы это взаимодействие было чрезвычайно легким. Я хотел бы позвонить, чтобы получить данные, а затем связать их со своей клиентской формой.

Вот мой рабочий пример. 

<!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 на сущность [свойство]

Редактировать: Предложение по использованию пространства имен

Редактировать: изменил селектор, чтобы он работал с любым элементом формы

1 Ответ

0 голосов
/ 19 декабря 2009

Если бы это был я, я бы присвоил пространству имен вашу функцию вместо того, чтобы иметь их свободно плавающими: 

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