CODEWITHSUNDEEP
htmlrazorblazorblazor-server-side
cdie
cdie

Reputation: 4544

Blazor Server Side and dynamic table generation

I'm trying to build a dynamic table with Blazor, but I encounter an issue with DOM validation.

I'm using Bootstrap for layout to have access to row and col css classes. I have a list of item, with a dynamic size (can be 0, 3 or 10, even 100), and I want to display those item within a card, 3 per row.

I did the following thing : 

        <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>

This seems to be great, but it looks like when doing MarkupString, Blazor ensure valid HTML is produce. So my firt block of ending div is not written and the following div is immediatelly closed, which I don't want.

If I don't use MarkupString, I go a compilation error because of invalid HTML in my syntax. Any ideas how to do so ?

Upvotes: 0

Views: 4178

Answers (2)

David Masterson
David Masterson

Reputation: 1005

If you just want a grid with something in a div of class col-4 that will give you 3 cols per row you do not need to manage the rows as bootstrap will do that for you, here is the code using image instead of object but the principle is still the same.

<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"
    };
}

I have put this on blazor fiddle so you can see the output https://blazorfiddle.com/s/1ptaljre

Upvotes: 4

Henk Holterman
Henk Holterman

Reputation: 273544

All you need is a better algorithm to make rows-of-3. You could leave that to CSS (and be adaptable to screen size) but in 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>
}

Upvotes: 2

Related Questions