显示单个记录的多个图像中的四个

Question

我想显示单个记录的多个图像中的四个。

喜欢这个......

Img1 img2 img3一些文字       img4 img5

这在普通html中效果很好，但是当我使用转发器控件或数据列表时，它会在每条记录中重复8次，所有图像都相同

<asp:Repeater ID="rptUsedCarList" runat="server" OnItemDataBound="rptUsedCarList_ItemDataBound" DataSourceID="SqlDataSource2">
    <%--ItemType="StronglyTypedControls.Data"--%>
    <ItemTemplate>            

        <div class="row">

            <h5 id="nameOftheCar" class="h5caption" style="background-color:#333;color:#fff;border-radius:3px;" runat="server"><%#Eval("Make")%> <%#Eval("Model")%>  <%#Eval("EngineSize")%></h5>
            <asp:HiddenField ID="hfCRegNo" Value=<%#Eval("CarRegistrationNumber")%> runat="server" />
            <div class="col-sm-12">


                <asp:Repeater ID="rptUsedCarListImages" runat="server" DataSourceID="SqlDataSource1">

               <ItemTemplate>    
                <div class="col-sm-3">
                    <div class="row">
                        <asp:HyperLink ID="HyperLink1" runat="server" rel="tooltip" title="Click to view large image"  NavigateUrl="javascript:void(0);">
                            <asp:Image ID="imgMain" runat="server" ImageUrl=<%#Eval("ImageUrl")%> CssClass="thumbnail img-responsive viewer-item" Width="250" Height="145" /></asp:HyperLink>
                    </div>
                </div>


                <div class="col-sm-4" runat="server">                  
                    <div class="col-sm-6" runat="server">
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="javascript:void(0);" rel="tooltip" title="Click to view large image">
                        <asp:Image ID="imgThumbnail1" runat="server" ImageUrl=<%#Eval("ImageUrl")%> CssClass="thumbnail img-responsive viewer-item" Width="110" Height="60" /></asp:HyperLink>
                        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="javascript:void(0);" rel="tooltip" title="Click to view large image">
                        <asp:Image ID="imgThumbnail2" runat="server" ImageUrl=<%#Eval("ImageUrl")%> CssClass="thumbnail img-responsive viewer-item" Width="110" Height="60" /></asp:HyperLink>
                    </div>
                    <div class="col-sm-6" >
                        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="javascript:void(0);" rel="tooltip" title="Click to view large image">
                        <asp:Image ID="imgThumbnail3" runat="server" ImageUrl=<%#Eval("ImageUrl")%> CssClass="thumbnail img-responsive viewer-item" Width="110" Height="60" /></asp:HyperLink>
                        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="javascript:void(0);" rel="tooltip" title="Click to view large image">               
                        <asp:Image ID="imgThumbnail4" runat="server" ImageUrl=<%#Eval("ImageUrl")%> CssClass="thumbnail img-responsive viewer-item" Width="110" Height="60" /></asp:HyperLink>
                    </div>
                </div>
                   </ItemTemplate>    
        </asp:Repeater>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT TOP (4) ImageNo, CarRegistrationNumber, ImageUrl FROM Image WHERE (CarRegistrationNumber = @CarRegistrationNumber)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="hfCRegNo" PropertyName="Value" Name="CarRegistrationNumber" Type="String"></asp:ControlParameter>
                    </SelectParameters>
                </asp:SqlDataSource>
                <div class="col-sm-4" runat="server">


                    <%--<asp:BulletedList ID="blstLeft" CssClass="list-group list-unstyled pull-left text-muted" runat="server">
                         <asp:ListItem>Eval(&quot;Model&quot;)</asp:ListItem>
                         <asp:ListItem></asp:ListItem>
                         <asp:ListItem></asp:ListItem>
                         <asp:ListItem></asp:ListItem>                           
                    </asp:BulletedList>
                    <asp:BulletedList ID="blstRight" CssClass="list-group list-unstyled pull-left text-muted" runat="server">
                         <asp:ListItem></asp:ListItem>
                         <asp:ListItem></asp:ListItem>
                         <asp:ListItem></asp:ListItem>
                         <asp:ListItem></asp:ListItem>                           
                    </asp:BulletedList>--%>

                    <ul class="list-group list-unstyled pull-left" runat="server">
                        <li class="text-muted" title="EngineSize"><%#Eval("EngineSize")%> </li>
                        <li class="text-muted" title="Transmission"><%#Eval("Transmission")%> </li>
                        <li class="text-muted" title="Body Type"><%#Eval("BodyType")%> </li>
                        <li class="text-muted" title="Miles"><%#Eval("Mileage")%> </li>
                    </ul>

                        <ul class="list-group list-unstyled pull-right ">
                        <li class="text-muted" title="NCT Due Date"><%#Eval("NCTDueDate","{0:d}")%> </li>
                        <li class="text-muted" title="Owner"><%#Eval("Owner")%> </li>
                        <li class="text-muted" title="Color"><%#Eval("Color")%> </li>
                        <li class="text-muted" title="Year"><%#Eval("Year")%> </li>
                        </ul>
                </div>

                <div class="col-sm-1" >
                    <ul class="list-group list-unstyled">
                        <li><a href="#" class="label label-danger" rel="tooltip" title="Price">€<%#Eval("RetailPrice","{0:0.##}")%></a></li>
                       <%-- <li><a href="#" class="label label-danger" rel="tooltip" title="Enquire about the car">Enquiry</a> </li>--%>
                        <li><asp:LinkButton ID="lbtnView" Cssclass="label label-danger" rel="tooltip" title="More Details" runat="server" OnClick="lbtnView_Click" >View</asp:LinkButton>
                            <%--<asp:HyperLink ID="hplView"  runat="server"></asp:HyperLink>--%>

                           <%-- <a href="#"  onclick="" runat="server">View</a> --%></li>                        
                    </ul>                                         
                </div>

            </div>                
        </div>

    </ItemTemplate>
    <SeparatorTemplate></SeparatorTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT Car.CarRegistrationNumber, Car.Make, Car.Model, Car.Year, Car.EngineSize, Car.BodyType, Car.Transmission, Car.Color, Car.Owner, Car.Door, Car.FuelType, Car.Mileage, Car.NCTDueDate, Car.Comment, Car.AnnualRoadTax, Car.TaxDueDate, Car.VehicleRegistrationTax, Purchase.RetailPrice FROM Car INNER JOIN Purchase ON Car.CarRegistrationNumber = Purchase.CarRegistrationNumber"></asp:SqlDataSource>