locked
How to use Listview, with Item, layout and group template? RRS feed

  • Question

  • I have a catalogue page within my site.  On this page, I will display images of certain products, and their information.

    For builiding the UI, I made use of Bootstrap.  Here comes the problem.

    I need to add pagination functionality to the catalogue page.  I have read some articles on the ListView, with its layout and item template, as well as the DataPager control.  

    The problem is that since the front end is built with Bootstrap, I am a bit confused as to how to set everything up.  Here is my code:

    The following HTML will produce 2 rows, each containing 3 images horizontally, so all together producing 6 products per page.

    <div class="categories row-fluid">
                            <div class="span4">
                                <div class="category1">
                                    <img id="myImageHolder" runat="server" class="image1" alt="" src="../img/metal_candle.png" />
                                </div>
                                <div class="details">
                                    <div class="button">
                                        <button class="square" type="button">Add to Cart</button>
                                    </div>
                                    <ul>
                                        <li>Description:</li>
                                        <li>Colour:</li>
                                        <li>Price:</li>
                                    </ul>
                                </div>
                            </div>
    
                            <div class="span4">
                                <div class="category1">
                                    <img class="image1" alt="" src="../img/metal_candle.png" />
                                </div>
                                <div class="details">
                                    <div class="button">
                                        <button class="square" type="button">Add to Cart</button>
                                    </div>
                                    <ul>
                                        <li>Description:</li>
                                        <li>Colour: </li>
                                        <li>Price:</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="span4">
                                <div class="category1">
                                    <img class="image1" alt="" src="../img/metal_candle.png" />
                                </div>
                                <div class="details">
                                    <div class="button">
                                        <button class="square" type="button">Add to Cart</button>
                                    </div>
                                    <ul>
                                        <li>Description:</li>
                                        <li>Colour: </li>
                                        <li>Price:</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

    The above code is repeated in my aspx page to produce "2 rows". I did not place it here.

    The categories row-fluid produces a new row, and the class="span4" indicates that each "product" should span 4 columns, where there is a total of 12, producing 3 images per row.

    How would I go about putting these into a ListView, so that there will only be 6 products per page (3 per row, 2 rows), with the pagination function if bounded to a DataSource.

    I am just looking for help with the layout/Group Template.

    Thanks

    • Moved by Amanda Zhu Friday, July 26, 2013 1:45 AM off-topic issue
    Sunday, July 21, 2013 11:14 AM

All replies

  • Hello,

    Thank you for your post.

    I am afraid that the issue is out of support range of VS General Question forum which mainly discusses WPF & SL designer, Visual Studio Guidance Automation Toolkit, Developer Documentation and Help System and Visual Studio Editor.

    If you are working with ASP.NET Web Application, I suggest that you can consult your issue on ASP.NET forum: http://forums.asp.net/  for better solution and support.

    Best regards,


    Amanda Zhu
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, July 23, 2013 9:40 AM