使用 Jquery 从 Razor 视图中的网格表中以模态显示整个字典

Posted

技术标签:

【中文标题】使用 Jquery 从 Razor 视图中的网格表中以模态显示整个字典【英文标题】:Display entire dictionary in modal from grid-table in Razor view with Jquery 【发布时间】:2020-06-22 16:57:33 【问题描述】:

我有一个弹出模式(部分),我需要在网格表中显示字典的内容。它目前工作正常,但前提是字典与一对 key, val 一起返回。我似乎无法使其适用于多个密钥/val 对。如果有多个,则将它们全部连接到相同的列中。我还需要在重新打开模式时删除以前的 val 的功能。这部分做得很好,但我认为添加和删除它们的 Jquery 操作可能会阻碍我添加值的尝试。

为了澄清,这适用于返回的字典,它有一个 key, value 对,但我需要它也可以处理多个而不将它们连接在一起。例如如果返回:

valName1, val1
valName2, val2
valName3, val3

下面是我的 Modal 和我正在使用的 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 个键/值对的字典,但是您可以看到它们都连接在一起。

【问题讨论】:

【参考方案1】:

我能够通过将名称和值从字符串更改为数组,并使用另一个嵌套的 for 循环遍历它们来实现所需的功能:

    //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'));
                     

                 

             

【讨论】:

以上是关于使用 Jquery 从 Razor 视图中的网格表中以模态显示整个字典的主要内容,如果未能解决你的问题,请参考以下文章

消除部分视图 MVC 3 razor 中的重复 ID

使用 javascript 重新加载 mvc/razor 部分视图

带有内联样式表和媒体查询的 Razor 视图 [重复]

如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图

Rotativa 和 Bootstrap 网格样式

C# MVC 4 RAZOR - JSON 使用 @foreach 从控制器返回列表到视图