时间戳

首页 > 解决方案 > Asp.net：如何在视图中显示 API 结果

asp.net - Asp.net：如何在视图中显示 API 结果

问题描述

如何在 asp.net 视图中显示 Json 数据？我使用了以下 API 并用于GroupBy按 ID 对数据进行分组

我有这段代码来生成如下所示的 json 结果

[HttpGet("{ID}")]
public async Task<IActionResult> GetCompanyByID(int produtID)
{
    var company= await companyListService.GetCompanyByID(productID); 
    var companyList= company.GroupBy(x => x.ID);
    return Ok(companyList);
}

分组后我的json结果

[
 { "ID": 13,
   "CompName": "MULETA PLC ",
   "ContractorName": "ENGINEERING" 
 }, 
 { "ID": 13,
   "CompName": "MULETA PLC ",
   "ContractorName": "SUNS CONST." 
 }
]

在使用我对结果进行分组之前var companyList= company.GroupBy(x => x.ID);，我的视图中有以下代码并且工作正常。

在我看来，我有这个：

@inject ICompanyService companyListService @{
    var ProductID = Model.ID;
    var compInfo = await companyListService.GetCompanyByID(ProductID); 
}

要创建一个列表，我使用了这个代码

<ul id="list" style="line-height: 0.01;">
    @foreach (var item in compInfo)
    {
        <li data-id="@item.ID">@item.CompanyName                             
            <ul>
                <li data-expanded="true" data-id="@subcontractor.ID">@scontractor.ContractorName</li>
            </ul>
        </li>
    }
</ul>

我如何修改以上foreach内容以获得以下列表

标签： asp.netjsonasp.net-mvcapiasp.net-web-api

解决方案

好吧，从技术上讲，你的类结构不是很好，所以，我建议你打破你的类，这样你就可以以所需的方式显示数据，例如：

public class Company
{
    public int ID { get; set; }
    public string CompName { get; set; }
    public List<Contractor> Contractors { get; set; }
    // Your Other Properties
}

public class Contractor
{
    public int ID { get; set; }
    public string ContractorName { get; set; }
    // Your Other Properties
}

这样，您返回的 JSON 将如下所示：

[
 { 
   "ID": 13,
   "CompName": "MULETA PLC ",
   "Contractors": [
     {
          "ID": 1,
          "ContractorName" : "ENGINEERING",
     },
     {
          "ID": 2,
          "ContractorName" : "SUNS CONST."
     }
   ] 
 },
 { 
   "ID": 14,
   "CompName": "Hello, World!",
   "Contractors": [
     {
          "ID": 3,
          "ContractorName" : "Hello"
     },
     {
          "ID": 4,
          "ContractorName" : "World"
     }
    ] 
  }
]

之后，您可以轻松地显示您想要的列表，请参阅：

<ul id="list" style="line-height: 0.01;">
    @foreach (var item in compInfo)
    {
        <li data-id="@item.ID">
            @item.CompanyName                             
            <ul>
                @foreach (var contractor in item.Contractors) 
                {
                    <li data-expanded="true" data-id="@contractor.ID">@contractor.ContractorName</li>
                }
            </ul>
        </li>
    }
</ul>

推荐阅读