Blazor Server Side и динамическая генерация таблиц - PullRequest
Новая
       46

Blazor Server Side и динамическая генерация таблиц

1 голос
/ 21 ноября 2019

Я пытаюсь построить динамическую таблицу с помощью Blazor, но у меня возникла проблема с проверкой DOM.

Я использую Bootstrap для макета, чтобы иметь доступ к row и col классам css,У меня есть список элементов с динамическим размером (может быть 0, 3 или 10, даже 100), и я хочу отобразить этот элемент на карте, по 3 на строку.

Я сделал следующее: 

        <div class="row profile-row" style="margin-left:10px">
            @for (int i = 0; i < myObjectList.Count; i++)
            {
                if (i % 3 == 0 && i != 0)
                {
                    @((MarkupString)("</div><div class='row profile-row' style='margin-left:10px'>"))
                }
                <div class="col-4">
                    <MyObjectComponent item="myObjectList[i]"></MyObjectComponent>
                </div>
            }
        </div>

Кажется, это здорово, но, когда вы делаете MarkupString, Blazor гарантирует, что будет создан правильный HTML. Так что мой первый блок конечного div не записан, и следующий div немедленно закрывается, чего я не хочу.

Если я не использую MarkupString, я получаю ошибку компиляции из-за недопустимого HTML в моемсинтаксис. Есть идеи как это сделать?

Ответы [ 2 ]

3 голосов
/ 21 ноября 2019

Если вам просто нужна сетка с чем-то в div класса 4, которая даст вам 3 столбца на строку, вам не нужно управлять строками, так как загрузчик сделает это за вас, вот код, использующий вместо этого изображениеобъекта, но принцип все тот же. 

<h1>Testing Table</h1>
<div class="row profile-row" style="margin-left:10px">
            @foreach(var image in Images)
            {
                <div class="col-4">
                     <img src="@image" style="width:100%; padding-bottom:10px" />
                </div>
            }
        </div>

@code {


List<String> Images = new List<String>() {
        "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
    };
}

Я положил это на скрипку блейзора, чтобы вы могли видеть результат https://blazorfiddle.com/s/1ptaljre

0 голосов
/ 21 ноября 2019

Все, что вам нужно, это лучший алгоритм для создания строк-3. Вы можете оставить это CSS (и адаптироваться к размеру экрана), но в C #: 

@for (int i = 0; i < myObjectList.Count; i += 3)
{
  <div class="row profile-row" style="margin-left:10px">

  @for(int j = i; (j < i+3) && (j < myObjectList.Count); j++)
  {
       <div class="col-4">
         <MyObjectComponent item="myObjectList[j]"></MyObjectComponent>
       </div>
  }
  </div>
}
...