Asp. net: Как отобразить результат API в представлении - PullRequest
Новая
       84

Asp. net: Как отобразить результат API в представлении

0 голосов
/ 03 мая 2020

Как отобразить данные Json в режиме asp. net? Я использовал следующий API и использовал GroupBy для группировки данных по идентификатору

У меня есть этот код для генерации результата 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, чтобы получить следующий список

  • MULETA PLC
    • YIBA ENGINEERING
    • SUNS CONST.
  • MULETA PLC
    • YIBA ENGINEERING
    • СОЛНЦ. КОНСТ.

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Технически, ваша структура классов для этого не очень хорошо сформирована, поэтому я бы порекомендовал вам разбить ваши классы, чтобы вы могли показать данные желаемым способом, например: 

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>
1 голос
/ 03 мая 2020 

public class OutputClass
{
   public List<InnerClass> Companies{ get; set; }
}

public class InnerClass
{
  public int ID { get; set; }
  public string CompName { get; set; }
  public string ContractorName { get; set; }
}

//return a list type of InnerClass that is used in grouping in next line
var company= await companyListService.GetCompanyByID(productID); 
var companyList= company.GroupBy(x => x.ID).Select(grp => new OutputClass
                                            {
                                                Companies = grp.ToList()
                                            }).ToList();
    return Ok(companyList);

результат будет 

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

Я создал класс со списком компаний внутри него, который позволит нам выполнять итерации после группировки. Первый l oop = companiesList.companies; Второй л oop = компании. Где мы можем получить доступ к свойствам 

@foreach(var companies in companyList)
{
  @foreach(var company in companies)
  {
    <p>@company.ID</p>
    <p>@company.CompName</p>
    <p>@company.ContractorName</p>

  } 
}
...