时间戳

首页 > 解决方案 > Blazor 服务器端和动态表生成

html - Blazor 服务器端和动态表生成

问题描述

我正在尝试使用 Blazor 构建动态表，但遇到 DOM 验证问题。

我正在使用 Bootstrap 进行布局以访问row和colcss 类。我有一个项目列表，具有动态大小（可以是 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 而出现编译错误。任何想法如何做到这一点？

标签： htmlrazorblazorblazor-server-side

解决方案

如果您只想要一个网格，其中包含 col-4 类 div 中的某些内容，每行将为您提供 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"
    };
}

我已经把它放在 blazor fiddle 上，所以你可以看到输出https://blazorfiddle.com/s/1ptaljre

推荐阅读