Javascript 使用Jquery在Razor视图的网格表中以模态显示整个字典
我有一个弹出模式(在部分中),我需要在网格表中显示字典的内容。它目前工作正常,但仅当返回字典时才返回一个{key,val}对。我似乎无法使它正确地适用于多个键/值对。如果有多个,则将它们连接在同一列中。我还需要在模式重新打开时删除以前的VAL的功能。这一部分做得很好,但我认为Jquery添加和删除它们的操作可能会阻碍我添加值的尝试 为了澄清这一点,它使用的是一个具有一个{key,value}对的返回字典,但我需要它也使用多个字典,而不需要将它们连接在一起。例如,如果返回:Javascript 使用Jquery在Razor视图的网格表中以模态显示整个字典,javascript,jquery,asp.net,asp.net-mvc,razor,Javascript,Jquery,Asp.net,Asp.net Mvc,Razor,我有一个弹出模式(在部分中),我需要在网格表中显示字典的内容。它目前工作正常,但仅当返回字典时才返回一个{key,val}对。我似乎无法使它正确地适用于多个键/值对。如果有多个,则将它们连接在同一列中。我还需要在模式重新打开时删除以前的VAL的功能。这一部分做得很好,但我认为Jquery添加和删除它们的操作可能会阻碍我添加值的尝试 为了澄清这一点,它使用的是一个具有一个{key,value}对的返回字典,但我需要它也使用多个字典,而不需要将它们连接在一起。例如,如果返回: {valName1,
{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>
通过将名称和值从字符串更改为数组,并使用另一个嵌套的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'));
}
}
}
//循环从字典创建的arr以获取键和值
for(arr中的var键){
if(arr.hasOwnProperty(键)){
//名称+=键;
//值+=结果[键];
姓名。按键(键);
value.push(结果[键])
//删除以前的行
$(“div[name='params']);
for(名称为var i){
//将参数添加为行
$(''+name[i]+''+''+value[i]+'').insertAfter($('#modalGridHeader');
}
}
}