Показать весь словарь в модале из таблицы-сетки в режиме Razor с Jquery - PullRequest
Новая
       7

Показать весь словарь в модале из таблицы-сетки в режиме Razor с Jquery

0 голосов
/ 10 марта 2020

У меня есть всплывающее модальное окно (частично), которое мне нужно для отображения содержимого словаря в таблице сетки. В настоящее время он работает нормально, но только если словарь возвращается с одной парой {ключ, val}. Я не могу заставить его работать более чем на одну пару ключ / вал. Если их несколько, они объединяют их все в один столбец. Мне также нужна функция для удаления предыдущих значений при повторном открытии модального окна. Он прекрасно справляется с этой частью, но я думаю, что Jquery манипуляции по их добавлению и удалению могут препятствовать моей попытке добавить значения.

Для пояснения, это работает с возвращенным словарем, который имеет один {ключ, value}, но мне нужно, чтобы он работал с более чем одним, не объединяя их вместе. Например, если возвращено: 

{valName1, val1}
{valName2, val2}
{valName3, val3}

Ниже мой модал и Jquery, который я использую: 

            <div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header modal-header-primary">
                            <a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
                            <h4 class="modal-title" id="modalTitleText">Job Parameters</h4>
                        </div>
                        <div class="modal-body">
                            <div class="list-group">
                                <div class="row list-group-item list-group-item-heading container divTableHeading" style="width:inherit; margin-bottom:0px;" id="modalGridHeader">
                                    <div class="col-md-6 font-weight-bold"> Parameter: </div>
                                    <div class="col-md-6 font-weight-bold"> Value: </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>


        <script>

            $("button[name='paramsBtn']").click(function () {
                /* Grabs ID from col selected */
                var $col = $(this).closest('.row').find('.requestId');
                var jobRequestId = $col.data('id');
                var nameType = $col.data('name');

                 $.ajax({
                    url: '@Url.Action("JobPollerParameters", "Tools")',
                     data: { "jobRequestId": jobRequestId, "name" : nameType},
                     success: function (results) {

                        $modal = $('#paramsModal');
                         $modal.modal("show");

                         var name = "";
                         var value = "";

                         var arr = results;  

                         //loop through arr created from dictionary to grab key(s) and value(s)
                         for (var key in arr) {
                             if (arr.hasOwnProperty(key)) {
                                 name += key;
                                 value += results[key]; 

                                 //Remove previous rows
                                 $("div[name='params']").remove();
                                 //Adding parameters as rows 
                                 $('<div class="col-md-6 text-break" name="params"> ' + name + '</div>' + '<div class="col-md-6 text-break" name="params">' + value + '</div>').insertAfter($('#modalGridHeader'));
                             }

                         }
                    }
                });
            });

        </script>

Вот скриншот модального всплывающего окна. На этом снимке экрана был возвращен словарь с 3 парами ключ / вал, однако видно, что все они объединены вместе.

enter image description here

1 Ответ

0 голосов
/ 10 марта 2020

Мне удалось добиться того, что было нужно, изменив имя и значение из строк в массивы и перебрав их с помощью другого, вложенного для l oop: 

    //loop through arr created from dictionary to grab key(s) and value(s)
             for (var key in arr) {
                 if (arr.hasOwnProperty(key)) {
                     //name += key;
                     //value += results[key]; 
                     name.push(key);
                     value.push(results[key])

                     //Remove previous rows
                     $("div[name='params']").remove();
                     for (var i in name) {
                         //Adding parameters as rows 
                         $('<div class="col-md-6 text-break" name="params"> ' + name[i] + '</div>' + '<div class="col-md-6 text-break" name="params">' + value[i] + '</div>').insertAfter($('#modalGridHeader'));
                     }

                 }

             }
...