dlnzki Ответов: 1

Как отобразить 3 столбца в каждой строке и надпись с помощью цветов?

Привет. Im использует C# MVC, чтобы указать, что каждая строка имеет только 3 столбца. добавьте данные из базы данных.
этот код приводит только к одной строке. я попытался использовать столбец bootctrap (col-md-4), он работает, но он не выполняет таблицу так, как я хочу. я хочу, чтобы все имя было в rectagle box, как таблица.

вот мой код, использующий 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>


и я хочу указать имя, отображаемое в соответствии с цветами. в базе данных я указываю каждое имя тестера, независимо от того, хорошо это или плохо, поэтому, когда я показываю его, я хочу, чтобы если плохо, то таблица была красной, а если хорошо, то таблица должна быть зеленой.

Что я уже пробовал:

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>

1 Ответов

Рейтинг:
6

Richard Deeming

Вы не можете поставить <div> непосредственно внутри а <table> как это. И вы ставите каждый предмет в свой собственный ряд.

Если вы хотите использовать стол, вам нужно будет поставить три <td>s в каждом <tr>:

<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>
Чтобы использовать адаптивную сетку Bootstrap, вам нужно удалить разметку таблицы: 
<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: Вам нужно будет заменить YourViewModelHere с фактическим именем класса.

dlnzki

Я попробовал решение с помощью таблицы. когда я пишу, в нем нет никакой ошибки. но когда я запускаю приложение, оно имеет ошибку, говорящую о том, что выводится имя элемента кортежа "получение“. Пожалуйста, используйте язык версии 7.1 или выше для доступа к элементу по его предполагаемому имени.”"

поэтому я попробовал поискать ошибку в google и найти ответы по этой ссылке -->
https://stackoverflow.com/questions/45684409/getting-tuple-element-name-is-inferred-please-use-language-version-7-1-or-grea

но решение, которому я следую, не направляет меня к ответам, так как я не могу изменить свою языковую версию на "C# latest Minor Version" (это отключает эту часть, и я застрял здесь. пожалуйста помочь.

Richard Deeming

Заменять:

var rows = unit.Select((item, index) => (item, index))
    .GroupBy(r => r.index % 3, (key, items) => items.Select(r => r.item));

с:
var rows = unit.Select((item, index) => (item: item, index: index))
    .GroupBy(r => r.index % 3, (key, items) => items.Select(r => r.item));

dlnzki

это работает. Большое вам спасибо!