Галерея BS 4.1 от VS Control

Question

Код ниже не мой, а из Start Bootstrap. То, что я пытаюсь сделать, это создать код в ASP.NET WebUserControl. Источник данных поступает из базы данных 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, чтобы держать их встроенными на всех устройствах, а не более 2 строк для устройств xs.

Если я использую элемент управления DataList, установите для RepeatLayout значение flow, а для RepeatDirection - горизонтальный, а также используйте код link / img в шаблоне элемента с классами начальной загрузки, но передавая значения из базы данных в теги href, src и alt. Я также пытался использовать ASP Image Control.

Передача источника данных в элемент управления списком данных и заполнение значений для 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?

Заранее спасибо

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

остановка тегов span, к которым обращается элемент управления datalist. Затем я превратил его в WebUserControl точно так, как я описал выше, что делает страницу чистой в режиме конструктора.