Display four of multiple images of single record

Question

I want to display four of the multiple images of single record.

Like this ...

Img1 img2 img3 some text img4 img5

This works well in plain html but when i used repeater control or datalist it repeats the like 8 times per record with all the images are same

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

If I understand properly, are you trying to display four images of each car ? For example Car1 -> img1 - img2 - img3 - img4 / Car2 -> img1 - img2 - img3 - img4 — VindulaF, Mar 15 '15 at 03:32
Thank you very much for reply.Yes, one main image and four small thumbnails in image control.I have five image controls. One for main image size and other four thumbnail size. When they are static in html its fine but repeator or datalist control displays five image controls 8 times as per the records in db with all image control displaying same image per row. i thought may be i need to use a for loop inside while loop so that it only reads the first four row for every record and displays it or i need to use a dataset. — melonye, Mar 15 '15 at 14:31
What you need is a nested repeater, parent repeater to contain the car and the child repeater to load the images of that car. — VindulaF, Mar 15 '15 at 14:34
Thanks for replying. I tried nested repeator as well. I had a parent to display car info and child to display images. for one car registration number, i have 8 images so the child repeator displays 8 rows horizontally with same car info and one main image and four smaller but these images are same per row. after the eighth row it shows the second record, again since i have 6 images it shows 6 records. how can i limit the number of records i dont understand like if i just want first 5 images of every record to displayed. in the image control, <%#Eval("ImageUrl") %> how can i change this — melonye, Mar 15 '15 at 15:25
Your welcome, give the nested repeater a try it is what you need. :) — VindulaF, Mar 15 '15 at 15:27
I tried nested repeator as well. I had a parent to display car info and child to display images. for one car registration number, i have 8 images so the child repeator displays 8 rows horizontally with same car info and one main image and four smaller but these images are same per row. after the eighth row it shows the second record, again since i have 6 images it shows 6 records. how can i limit the number of records i dont understand like if i just want first 5 images of every record to displayed. in the image control, <%#Eval("ImageUrl") %> how can i change this — melonye, Mar 15 '15 at 17:21
Update the answer with your new code, it seems like your sql query is the issue if you are getting the same image in each row it's a problem with how you queried your data. If you can try to attach the output of your queries as well the queries used as data sources for your repeaters. You can restrict the amount of images from your sql query using TOP. — VindulaF, Mar 15 '15 at 17:36
Thank you for reply. I have update my question with new code and i have added the sqldatasource as well. query for image :SelectCommand="SELECT TOP (4) ImageNo, CarRegistrationNumber, ImageUrl FROM Image WHERE (CarRegistrationNumber = @CarRegistrationNumber)" and query for car info is SelectCommand="SELECT Car*;, Purchase.RetailPrice FROM Car INNER JOIN Purchase ON Car.CarRegistrationNumber = Purchase.CarRegistrationNumber". I tested the query on sqldatasource and retrieval is right. Please check Thank you so much — melonye, Mar 15 '15 at 21:04

Display four of multiple images of single record

0 Answers0