Question

下面的代码不是我自己的代码，而是来自Start Bootstrap。我试图做的是在ASP.NET WebUserControl中创建代码。 DataSource来自MS SQL 2017数据库。

<div class="container">
    <h2 class="my-4 text-center">Thumbnail Gallery</h2>

    <div class="row text-center text-lg-left">
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="d-block mb-4 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="d-block mb-4 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="d-block mb-4 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="d-block mb-4 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
            </a>
        </div>
    </div>
</div>

而不是col-lg-3 ......我将使用col-3将它们保持在所有设备上，而不是xs设备的2行。

如果我使用DataList控件将RepeatLayout设置为flow并将RepeatDirection设置为水平，并使用项目模板中的链接/ img代码和引导类，但将值从数据库传递到href，src和alt标记。我也尝试过使用ASP Image Control。

将数据源传递给datalist控件并填充alt，src和href的值不是问题，而是布局时它是一个控件。如果您使用我发布到ASP.NET控件中的代码并运行它，则所有内容都应该完全显示。

数据库表：

Id PhotographName AltText ALink

1 pic1.jpg MyPic1 SomeLinkHere1
2 pic2.jpg MyPic2 SomeLinkHere2
3 pic3.jpg MyPic3 SomeLinkHere3
4 pic4.jpg MyPic4 SomeLinkHere4

控制：

<div class="container">
    <h2 class="my-4 text-center">
        <asp:Literal ID="litMyHeadingHere" runat="server"></asp:Literal>
    </h2>

    <div class="row text-center text-lg-left">

        <asp:DataList ID="dlPhotos" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"
            ViewStateMode="Disabled" RepeatLayout="Flow">
            <ItemTemplate>

                <div class="col-lg-3 col-md-4 col-xs-6">
                    <a href='<%#Eval("ALink")%>' class="d-block mb-4 h-100">
                        <img alt='<%# Eval("AltText") %>'
                            src='<%# Eval("PhotographName")%>' class="img-fluid" />
                </div>

            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

如果您愿意，可以将img标记替换为asp.net图像控件。

如何让这个控件正确呈现代码，以便它们显示在一组4个内嵌图像中，在ASP.NET WEBFORMS页面中间隔相等？

提前谢谢

Answer 1

我所做的是在VB.NET中创建了一个数据集，并从MS SQL 2017数据库填充它。然后使用我原来发布的HTML代码我交换了这个

<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">

到

<img class="img-fluid img-thumbnail my-new-class" src="<%# Eval("MyPhotoPath") %>" alt="My Alt Text From the DB">

停止datalist控件呈现的span标记。然后我把它变成了一个WebUserControl，正如我在上面描述的那样，它在设计视图中使页面干净。

来自VS Control的BS 4.1图库

1 个答案: