将.NET Core Razor页面与JQuery结合使用以从嵌套JSON呈现值的问题

时间：2018-11-27 10:22:13

标签： jquery json razor asp.net-core razor-pages

我正在.NET Core中使用剃须刀页面，并且有一个使用JQuery调用的控制器。我的意图是从控制器返回的JSON中获取值，并创建一个可重用的HTML代码段，该代码段将呈现给DOM，并相应地设置样式。我快到了，但是我对JQuery不懂。

注意：我正在使用示例数据库，因此我的值目前仅是占位符。

This is the currently rendered HTML 

@page
    @model Monitor.Web.Pages.Dashboard.IndexModel
    @{
        ViewData["Title"] = "Index";
    }

    <h2>Index</h2>
    <ul class="" id="monitor-list">
    </ul>

    @section scripts{
        <script type="text/javascript">
            $(function () {
                $.get('/api/GetDashboardItemsAsync').done(function (monitors) {
                    $.each(monitors, function (i, monitor) {
                        var monitorItem = `<ul><li><strong>${monitor.title} - Count: ${monitor.count} - </strong><span>Status: ${monitor.status}</span></li>
                        <div id="part-list"></div></ul>`;
                        $.each(monitor.parts, function (i, part) {
                            var partList = 
                                `<ul>
                                    <li>Part: ${part.serialNumber}</li>
                                    <li>Date at data source:${part.dateAtDataSource}</li>
                                    <li>Location: ${part.location}</li>
                                    <li>Date Processed: ${part.dateProcessed}</li>
                                </ul>`
                            $('#part-list').append(partList);
                        });
                        $('#monitor-list').append(monitorItem);
                    });
                });
            });
        </script>
    }

JSON中的"parts"对象是给我问题的区域。我需要将与DataSource1关联的部分列出在DataSource1下，以此类推，对于DataSource2和DataSource3都是如此。有人可以协助我解决我遇到的JQuery问题吗，我相信这与第二个$.each

有关 

[{
    "title": "DataSource1",
    "parts": [{
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4013602Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Senior Manager",
        "dateAtDataSource": "2018-11-26T14:58:01.4014315Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4014908Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4015859Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Inside Sales Coordinator",
        "dateAtDataSource": "2018-11-26T14:58:01.401888Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      }
    ],
    "count": 5,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Orange"
  },
  {
    "title": "DataSource2",
    "parts": [{
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4030892Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Senior Manager",
        "dateAtDataSource": "2018-11-26T14:58:01.4031069Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4031809Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Sales Representative",
        "dateAtDataSource": "2018-11-26T14:58:01.4032413Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      },
      {
        "serialNumber": "Inside Sales Coordinator",
        "dateAtDataSource": "2018-11-26T14:58:01.4032912Z",
        "location": "",
        "dateProcessed": "0001-01-01T00:00:00"
      }
    ],
    "count": 5,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Orange"
  },
  {
    "title": "DataSource3",
    "parts": [{
      "serialNumber": "Senior Manager",
      "dateAtDataSource": "2018-11-26T14:58:01.404735Z",
      "location": "",
      "dateProcessed": "0001-01-01T00:00:00"
    }],
    "count": 1,
    "warningThreshold": [{
        "warningName": "Green",
        "threshold": 0
      },
      {
        "warningName": "Orange",
        "threshold": 5
      }
    ],
    "status": "Green"
  }
]

2 个答案:

答案 0 :(得分：1)

我进行了一些重组，您可以在代码段中查看输出。

var monitors = [{
        "title": "DataSource1",
        "parts": [{
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4013602Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Senior Manager",
            "dateAtDataSource": "2018-11-26T14:58:01.4014315Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4014908Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4015859Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Inside Sales Coordinator",
            "dateAtDataSource": "2018-11-26T14:58:01.401888Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          }
        ],
        "count": 5,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Orange"
      },
      {
        "title": "DataSource2",
        "parts": [{
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4030892Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Senior Manager",
            "dateAtDataSource": "2018-11-26T14:58:01.4031069Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4031809Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Sales Representative",
            "dateAtDataSource": "2018-11-26T14:58:01.4032413Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          },
          {
            "serialNumber": "Inside Sales Coordinator",
            "dateAtDataSource": "2018-11-26T14:58:01.4032912Z",
            "location": "",
            "dateProcessed": "0001-01-01T00:00:00"
          }
        ],
        "count": 5,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Orange"
      },
      {
        "title": "DataSource3",
        "parts": [{
          "serialNumber": "Senior Manager",
          "dateAtDataSource": "2018-11-26T14:58:01.404735Z",
          "location": "",
          "dateProcessed": "0001-01-01T00:00:00"
        }],
        "count": 1,
        "warningThreshold": [{
            "warningName": "Green",
            "threshold": 0
          },
          {
            "warningName": "Orange",
            "threshold": 5
          }
        ],
        "status": "Green"
      }
    ];

$(function(){
  $.each(monitors, function (i, item) {
    var header = `<li><strong>Data Source: ${item.title } - Count: ${ item.count }</strong> - Status: ${ item.status }</li>`;
    
    $('#data').append(header);
    
    $.each(item.parts, function (j, part) {
      var parts = `<li>Part: ${part.serialNumber }</li>
                   <li>Date at data source: ${ part.dateAtDataSource }</li>
                   <li>Location: ${ part.location }</li><li>Date Processed: ${ part.dateProcessed }</li>`;
      
      $('#data').append(parts);
    });    
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <ul id="data"></ul>  
  
</body>
</html>

基本上，您不应将<div>直接放在<ul>内，但这不是问题。您需要在迭代各部分之前附加标头，并且需要维护一个<ul>，这将使您的工作更加轻松。如果可以避免直接从脚本创建HTML元素，那就更好了。您可以在HTML本身中至少定义一个<ul>，而不是在循环中创建它。

答案 1 :(得分：0)

在HTML中使用重复ID是错误的，请使用另一个符号来检测元素，例如类或自定义属性。 'id =“ part-list”'。将其更改为class =“ part-list”和$（'。part-list：last-child'）。append（partList）

$.each(monitors, function (i, monitor) {
                    var monitorItem = `<ul><li><strong>${monitor.title} - Count: ${monitor.count} - </strong><span>Status: ${monitor.status}</span></li>
                    <div class="part-list"></div></ul>`;                        
                    $('#monitor-list').append(monitorItem);
                    $.each(monitor.parts, function (i, part) {
                        var partList = 
                            `<ul>
                                <li>Part: ${part.serialNumber}</li>
                                <li>Date at data source:${part.dateAtDataSource}</li>
                                <li>Location: ${part.location}</li>
                                <li>Date Processed: ${part.dateProcessed}</li>
                            </ul>`
                        $('#monitor-list .part-list:last-child').append(partList);
                    });
                });
相关问题
最新问题