Список пар имя-значение с повторяющимися именами для объекта JavaScript - PullRequest
Новая
       9

Список пар имя-значение с повторяющимися именами для объекта JavaScript

1 голос
/ 24 сентября 2011

Для отправки данных формы на сервер из вызова AJAX для привязки сетки Telerik MVC мы можем установить e.data в OnDataBinding событии для анонимного объекта JavaScript 

<script type="text/javascript">
function Grid_onDataBinding(e) {
     var categoryValue = "Beverages";
     var priceValue = 3.14;

     // pass additional values by setting the "data" field of the event argument
     e.data = { 
        // the key ("category") specifies the variable name of the action method which will contain the specified value
        category: categoryValue,
        price: priceValue
     };
}
</script>

Чтобы упростить привязку модели для логического значения, ASP.NET MVC создает флажки вместе со скрытым текстовым полем с тем же именем 

<input name="myCheckBox" class="check-box" id="myCheckBox" type="checkbox" CHECKED="checked" value="true"/>
<input name="myCheckBox" type="hidden" value="false"/>

и когда они представлены, отправленные данные равны

myCheckBox=true&MyCheckBox=false - когда флажок установлен

myCheckBox=false - когда флажок не установлен

Для страниц, на которых нет флажка, данные публикации могут быть легко получены с помощью 

e.data = form.serializeObject()

где serializeObject создает этот объект путем циклического перебора всех полей формы. Как построить этот объект в случае форм, когда есть флажки, как описано выше? В основном, как можно представить список пар имя-значение в форме объекта, если имена допускают дублирование? 

e.data = { 
    textBox1: "some value1",
    myCheckBox: true //,
    //myCheckBox: false // ???
};

Реализация serializeObject создает массив для таких элементов формы, которые передаются как myCheckBox[]=true&myCheckBox[]=false, что нарушает привязку модели на стороне сервера.

Ответы [ 2 ]

2 голосов
/ 24 сентября 2011

Вы можете выбрать определенные субэлементы формы для сериализации, а не просто сериализации всей формы. Это позволяет вам отфильтровать те, которые вам не нужны: 

$('form input:not([type=hidden])').serializeObject();

Редактировать : Для комментария @ amit_g необходимо установить флажок, если он отмечен, или скрытый элемент, если его нет. Это требует более сложного фильтра, чем селектор :not: 

$('form input')
    .filter(function() {
        if ($(this).attr('type') == 'hidden') {
            // filter out those with checked checkboxes
            var name = $(this).attr('name');
            return !$('form input[type=checkbox][name=' + name +']')
                .prop('checked');
        } else {
            // include all other input
            return true;
        }
    })
    .serializeObject();

См. Рабочий jsFiddle здесь: http://jsfiddle.net/nrabinowitz/nzmg7/4/

0 голосов
/ 24 сентября 2011

serializeObject использует serializeArray внутри и serializeArray сериализует только те элементы, которые будут представлены на самом деле. Таким образом, используя следующий код, я отключил скрытые поля, соответствующие флажку, и добавил событие изменения, чтобы переключать отключенное состояние на каждом скрытом входе. Поскольку входы отключены, они не сериализуются.

Метод .serializeArray () использует стандартные правила W3C для успешный контроль, чтобы определить, какие элементы он должен включать; в конкретный элемент не может быть отключен и должен содержать имя приписывать. Значение кнопки отправки не сериализуется, так как форма не была представлен с помощью кнопки. Данные из файла выбора элементов не сериализованная. 

$('form.form-class :checkbox').change(function () {
    enableDisableCorrespondingHiddenField($(this));
});

$('form.form-class :checkbox').each(function () {
    enableDisableCorrespondingHiddenField($(this));
});

enableDisableCorrespondingHiddenField(checkbox) {
    $(":hidden[name='" + checkbox.attr("name") + "']", checkbox.parent()).attr("disabled", checkbox.attr("checked"));
}
...