CODEWITHSUNDEEP
c#htmlcsslist
chris
chris

Reputation: 121

Grabbing data from a list in a for loop in C#

I am trying to cycle through a list and create a new table for each site in my list

My controller looks like this 

 List<string> OffReportColumns = new List<string>(7);     
 List<List<string>> OffReportRows = new List<List<string>>();   
            foreach (Site s in sites)
            {                           
                OffReportColumns.Add(s.Name);
                OffReportColumns.Add("");
                OffReportColumns.Add("");
                OffReportColumns.Add("Average Cost");
                OffReportColumns.Add("");
                OffReportColumns.Add("");
                OffReportColumns.Add("Average Cost With Labour");

   OffReportRows.Add(new List<string>
                {
                    "Parts",
                    "",
                    "",
                    osiPartCost[s.ID].ToString("C2"),
                    "",
                    "",
                    osiPartCost[s.ID].ToString("C2")
                });
            }

And my View looks like this 

@foreach (Site s in sites)
        {
            <tr style="color:black">
                @foreach (var col in ViewBag.OffReportColumns)
                {
                    <th>@col </th>
                }            
            </tr>
            <tr style="color:black">
                   @foreach (var cell in ViewBag.OffReportRows)
                   {
                       <td>@cell</td>
                   }
            </tr>
        }

Currently this makes the page look like Page

But I instead want it to be layed out so it looks like this

"Eric Car Stock " "Average Cost" "Average Cost with Labour"

"In-House Use " "Average Cost" "Average Cost with Labour"

"Havey Kuhar's Car Stock " "Average Cost" "Average Cost with Labour"

Each table will have data underneath it that corresponds to their site

How can I change my code to accomplish this?

What I tried

In my view I had first tried having my code do this

//Removed for foreach (Site s in sites)

   @foreach (var row in ViewBag.OffReportRows)

             <tr style="color:black">
                    @foreach (var cell in ViewBag.OffReportRows)
                    {
                        <td>@cell</td>
                    }
             </tr>
            }

But this would only expand on the lists instead of creating new lists

Upvotes: 1

Views: 95

Answers (3)

DarkSigma
DarkSigma

Reputation: 416

In the first code snippet, all columns for all sites are added to one list. 2 dimensions are becoming 1 dimension. Without the loop, it is effectively written as

OffReportColumns.Add("Eric Car Stock ");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost With Labour");

OffReportColumns.Add("In-House Use ");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost With Labour");

OffReportColumns.Add("Havey Kuhar's Car Stock ");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost");
OffReportColumns.Add("");
OffReportColumns.Add("");
OffReportColumns.Add("Average Cost With Labour");

The second code snippet says, "For each site, of which there are 3, create a table row. In each row, for each OffReportColumns, of which there are 21, create a table column with text from the inner loop.

This is why all columns from all sites are appearing on each of the 3 rows.

A better approach would be to not have the OffReportColumns list at all. Instead, the view can be written like this

@foreach (Site s in sites)
{
    <tr>
        <td>@s.Name</td>
        <td></td>
        <td></td>
        <td>Average Cost</td>
        <td></td>
        <td></td>
        <td>Average Cost With Labour</td>
    </tr>
}

This creates a row of 7 columns for each site. The first column of each row will be the name of the site.

Upvotes: 2

Enrique Asensio
Enrique Asensio

Reputation: 121

I think you can implement several things first I would try to modify the column size col-xs-3 https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

If this doesn't work try to collapse two join in 1 colspan = "2" https://getbootstrap.com/docs/4.0/content/tables/

finally I would try the class = "vw-100" property https://getbootstrap.com/docs/4.4/utilities/sizing/

I let you a simple example so you can implement it open it in full window to see it correctly

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-9" style="background-color:lavenderblush;">.col-sm-4</div>
    <div  style="background-color:lavender;">.col-sm-4</div>
  <br>
    <div style="background-color:lavender;">.col-sm-4</div>
    <div style="background-color:lavenderblush;">.col-sm-4</div>
    <div style="background-color:lavenderblush;">.col-sm-4</div>
    <div style="background-color:lavender;">.col-sm-4</div>
  <br>
    <div class="col-sm-1" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-1" style="background-color:lavender;">.col-sm-4</div>
    <br><br>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

Upvotes: 0

Hasan Elsherbiny
Hasan Elsherbiny

Reputation: 628

as you stated in your comment there are two columns are static data and the only dynamic data is the site can simply loop throw the sites and display them as following

    @foreach (Site s in sites)
    {
        <tr style="color:black">
        <td>@Site</td>
        <td>Average Cost</td>
        <td>Average Cost with Labour</td>
        </tr>
    }

you can also remove adding columns to list and viewbag in your controller since they are not necessary.

Upvotes: 1

Related Questions