How to display 3 column in each row and label using colours?

Question

1.00/5 (1 vote)

See more:

Hello. Im using C# MVC to specify each row have only 3 column. add the data are from the database.
this code is resulting into one row only. i tried to use the bootctrap column (col-md-4), it works, but it did not perform a table like i want. i want all the name is in rectagle box like table.

here's my code using col-md-4:

<div class="row">
                   @foreach (var item in ViewBag.TesterUnit)
                   {
                       <div class="col-lg-4">

                           @Html.ActionLink((string)item.TesterName, "UnitDetails", new { id = item.TesterID }, new { style = "font-size:20px; width:60%;" })
                       </div>
                   }
               </div>

and i want to specify the name displayed according to colours. in database, i specify every tester name wether it is good/bad. so, when i display it i want if bad, the table should be red and if good, the table should be green.

What I have tried:

here's my code using table:

<pre><table class="table table-bordered" style="font-size:23px">
                    <tr>
                        <th colspan="3" style="text-align:center; color:#ffffff; background-color:#2980b9">
                            Tester
                        </th>
                    </tr>

                    @if (ViewBag.TesterUnit != null)
                    {
                        var count = ViewBag.TesterUnit.Count;
                        <div class="row">
                            <div class="col-md-4">
                                @foreach (var item in ViewBag.TesterUnit)
                                {
                                <tr>
                                    <td>@Html.ActionLink((string)item.Name, "UnitDetails", new { id = item.TesterID }) </td>

                                </tr>

                                }
                            </div>
                        </div>

                        
                    }



                </table>

Posted 8-Jul-20 1:23am

dlnzki

Updated 8-Jul-20 1:44am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-07-08T01:44:00

You can't put a <div> directly inside a <table> like that. And you're putting every item in its own row.

If you want to use a table, you'll need to put three <td>s in each <tr>:

Razor

<table class="table table-bordered" style="font-size:23px">
<thead>
    <tr>
        <th colspan="3" style="text-align:center; color:#ffffff; background-color:#2980b9">
            Tester
        </th>
    </tr>
</thead>
<tbody>
@if (ViewBag.TesterUnit is IEnumerable<YourViewModelHere> unit)
{
    var rows = unit.Select((item, index) => (item, index))
        .GroupBy(r => r.index % 3, (key, items) => items.Select(r => r.item));
    
    foreach (var row in rows)
    {
        <tr>
        @foreach (var item in row)
        {
            <td>
                @Html.ActionLink(item.Name, "UnitDetails", new { id = item.TesterID })
            </td>
        }
        </tr>
    }
}
</tbody>
</table>

To use the Bootstrap responsive grid, you'll need to remove the table markup:

Razor

<h4 class="text-center" style="color:#ffffff; background-color:#2980b9">Tester</h4>
@if (ViewBag.TesterUnit is IEnumerable<YourViewModelHere> unit)
{
    var rows = unit.Select((item, index) => (item, index))
        .GroupBy(r => r.index % 3, (key, items) => items.Select(r => r.item));
    
    foreach (var row in rows)
    {
        <div class="row">
        @foreach (var item in row)
        {
            <div class="col-md-4 border">
                @Html.ActionLink(item.Name, "UnitDetails", new { id = item.TesterID })
            </div>
        }
        </div>
    }
}

NB: You'll need to replace YourViewModelHere with the actual class name.

How to display 3 column in each row and label using colours?

1 solution

Solution 1

Add your solution here

Preview 0

How to display 3 column in each row and label using colours?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us