How to do a for loop in html(razor) using c#

Question

Hello guys i am trying to create a table with all information i have taken from an api in .cshtml.cs and to show them in the html page. But i can't quite figure it out. This is code from .cshtml.cs

public async Task<IActionResult> OnGetAsync()
        {
            var client = new RestClient("https://example.com/xxx/api/v1/xxx");
            var request = new RestRequest();
            request.AddHeader("AuthenticationToken", "xxx");
            request.AddHeader("Cookie", "_sid_=xx");
            request.AddHeader("Content-Type", "application/json");

            RestResponse response = await client.GetAsync(request);
            JObject obj = JObject.Parse(response.Content);
            var resultArray = obj["result"].Values<JObject>();
          
            foreach (var item in resultArray)
            {
                get_article_id =item["articleId"].Value<int>();

                get_article_number =item["articleNumber"].Value<string>();
                
                get_quantity =item["quantity"].Value<int>();

                if(item["reservations"].Count() == 0)
                {
                    get_reserved_quantity = 0;
                }
                else
                {
                    get_reserved_quantity = item["reservations"][0]["reservedQuantity"].Value<int>();       
                }

                get_name_item = await get_name_of_item(get_article_id);
            }
            return Page();
        }
        public int get_article_id { get; set; }
        public string get_article_number { get; set; }
        public int get_quantity { get; set; }
        public int get_reserved_quantity { get; set; }
        public string get_name_item { get; set; }

The code for .cshtml is:

<p>
    @Model.get_article_id
    @Model.get_article_number
    @Model.get_quantity
    @Model.get_reserved_quantity
    @Model.get_name_item
</p>

Thank you for your time!

Answer 1

We can try to use create a class ViewModel to carry your data from API in C#

public class ViewModel{
    public int get_article_id { get; set; }
    public string get_article_number { get; set; }
    public int get_quantity { get; set; }
    public int get_reserved_quantity { get; set; }
    public string get_name_item { get; set; }
}

Then write a property ViewModelList in c#, we can use lambda to carry data in that.

public List<ViewModel> ViewModelList { get; set; }

public async Task<IActionResult> OnGetAsync()
{
    var client = new RestClient("https://example.com/xxx/api/v1/xxx");
    var request = new RestRequest();
    request.AddHeader("AuthenticationToken", "xxx");
    request.AddHeader("Cookie", "_sid_=xx");
    request.AddHeader("Content-Type", "application/json");

    RestResponse response = await client.GetAsync(request);
    JObject obj = JObject.Parse(response.Content);
    var resultArray = obj["result"].Values<JObject>();

    ViewModelList = resultArray.Select(item => new ViewModel()
    {
        get_article_id = item["articleId"].Value<int>(),
        get_article_number = item["articleNumber"].Value<string>(),
        get_quantity = item["quantity"].Value<int>(),
        get_reserved_quantity = item["reservations"].Any() ? item["reservations"][0]["reservedQuantity"].Value<int>() : 0
    }).ToList();
    return Page();
}

Final we can use @foreach in razor page to iterator ViewModelList

@foreach (var item in Model.ViewModelList)
{
    <p>
        @item.get_article_id
        @item.get_article_number
        @item.get_quantity
        @item.get_reserved_quantity
        @item.get_name_item
    </p>
   
}