locked
How can i repeat the above design using a repeater control dynamically in asp.net ? RRS feed

  • Question

  • User-1027654633 posted

    I have a design like this with repetition of 3 boxes. How can i repeat the above design using a repeater control dynamically in asp.net ?

    Thursday, May 2, 2019 11:03 AM

All replies

  • User-943250815 posted

    Use Datalist Control
    Here you can find a sample https://www.aspsnippets.com/Articles/DataList-control-Tutorial-with-example-in-ASPNet.aspx

    Thursday, May 2, 2019 11:24 AM
  • User-1027654633 posted

    In the link you have given is having the same design of 3 boxes. but in my requirement the design is not like that.

    Thursday, May 2, 2019 11:26 AM
  • User-943250815 posted

    For horizontal flow, DataList is a starting point.
    For your layout, say last item fill width, perhaps with help of CSS Flexbox you get it.

    ListView datacontrol can be an alternative, here another sample https://www.aspsnippets.com/Articles/Populate-ASPNet-ListView-from-database-and-Repeat-columns-horizontally-using-GroupTemplate.aspx

    Thursday, May 2, 2019 11:40 AM
  • User-1027654633 posted

    <div class="row">
    <div class="col-md-12">
    <div class="col-md-6 col-sm-6 col-xs-12 nopaddingleft mob_padd_right">
    <div class="article_inner">
    <a href="articlepage.html">
    <div class="imgsec">
    <img src="dhome/images/fashion1.jpg" alt="beauty">
    </div>
    <div class="textsec">
    <div class="triangle_top">
    </div>
    <h4>
    Why most cyclones hit India’s east coast
    </h4>
    <p>
    Cyclone Fani has made landfall in Puri coast, Odisha. Landfa.cyclone Fani has made
    landfall in Puri coast, Odisha. Landfa
    </p>
    <div class="likesdisplay">
    0 Likes</div>
    <h6>
    Know More</h6>
    </div>
    </a>
    <hr>
    <div class="btn-sec">
    <div class="row">
    <div class="col-md-12 col-xs-12">
    <div class="col-md-6 col-xs-6">
    <div class="lkbtndiv" style="text-align: center">
    <img src="dhome/images/like btn.png" width="30px" height="30px" alt="like">
    <span>Like</span>
    </div>
    </div>
    <div class="col-md-6 col-xs-6">
    <div class="shbtndiv" style="text-align: center" data-rel="share16">
    <img src="dhome/images/share btn.png" width="30px" height="30px" alt="share">
    <span>Share</span>
    <div class="sharelistbox" id="share16" style="display: none;">
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/fb.png" alt="facebook">
    <span>Share via Facebook</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/whatsapp.png" alt="whatsapp">
    <span>Share via Whatsapp</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/twittericon.png" alt="twitter">
    <span style="margin-right: 20px">Share via Twitter</span> </a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 nopaddingright mob_padd_left">
    <div class="article_inner">
    <a href="articlepage1.html">
    <div class="imgsec">
    <img src="dhome/images/fashion2.jpg" alt="beauty">
    </div>
    <div class="textsec">
    <div class="triangle_top">
    </div>
    <h4>
    TOI Top 10: Where've all the Kiwis gone this IPL?</h4>
    <p>
    PM Modi and Rahul Gandhi to campaign in Rajasthan; Chanda Kochhar to appear before
    ED; Delhi court verdict in AgustaWestland charge sheet leak case; IPL (Kings XI
    Punjab v Kolkata Knight Riders); World Press Freedom Day</p>
    <div class="likesdisplay">
    0 Likes</div>
    <h6>
    Know More</h6>
    </div>
    </a>
    <hr>
    <div class="btn-sec">
    <div class="row">
    <div class="col-md-12 col-xs-12">
    <div class="col-md-6 col-xs-6">
    <div class="lkbtndiv" style="text-align: center">
    <img src="dhome/images/like btn.png" width="30px" height="30px" alt="like">
    <span>Like</span>
    </div>
    </div>
    <div class="col-md-6 col-xs-6">
    <div class="shbtndiv" style="text-align: center" data-rel="share17">
    <img src="dhome/images/share btn.png" width="30px" height="30px" alt="share">
    <span>Share</span>
    <div class="sharelistbox" id="share17" style="display: none;">
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/fb.png" alt="facebook">
    <span>Share via Facebook</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/whatsapp.png" alt="whatsapp">
    <span>Share via Whatsapp</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/twittericon.png" alt="twitter">
    <span style="margin-right: 20px">Share via Twitter</span> </a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="article_inner">
    <div class="col-md-6 col-sm-6 col-xs-12 nopadding">
    <a href="#">
    <div class="imgsec">
    <img src="dhome/images/fashion3.jpg" alt="">
    </div>
    </a>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 nopadding">
    <a href="#">
    <div class="textsec">
    <div class="triangle_left">
    </div>
    <div class="mob_triangle_top" style="display: none">
    </div>
    <h4>
    Blackmail on WhatsApp, FB: All you need to know</h4>
    <p>
    acebook, WhatsApp and, of course, Instagram have become lifeline for millennials.
    People find and maintain friendships, love and even relationships online, making
    these platforms so essential. However, the sad reality is that these same platforms
    can become a nightmare for anyone at any moment. Recently, an imposter, most likely
    a 21-year old male, tricked a17-year old college boy into sharing his nudes and
    later used them to extort Rs 6.4 lakh and ornaments.</p>
    <div class="likesdisplay">
    0 Likes</div>
    <h6>
    Know More</h6>
    </div>
    </a>
    <hr>
    <div class="btn-sec">
    <div class="row">
    <div class="col-md-12 col-xs-12">
    <div class="col-md-6 col-xs-6">
    <div class="lkbtndiv" style="text-align: center">
    <img src="dhome/images/like btn.png" width="30px" height="30px" alt="like">
    <span>Like</span>
    </div>
    </div>
    <div class="col-md-6 col-xs-6">
    <div class="shbtndiv" style="text-align: center" data-rel="share18">
    <img src="dhome/images/share btn.png" width="30px" height="30px" alt="share">
    <span>Share</span>
    <div class="sharelistbox" id="share18" style="display: none;">
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/fb.png" alt="facebook">
    <span>Share via Facebook</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/whatsapp.png" alt="whatsapp">
    <span>Share via Whatsapp</span> </a>
    </div>
    <div class="sharelinks">
    <a href="#">
    <img src="dhome/images/twittericon.png" alt="twitter">
    <span style="margin-right: 20px">Share via Twitter</span> </a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    This is my html design

    Friday, May 3, 2019 5:03 AM
  • User288213138 posted

    Hi  lokesh0443,
     
    I have written a demo according to your description, which you can use as a reference.
     
    The Code:

    Aspx:
    <div>
                <div class="row">
    
                    <asp:Repeater ID="repeater1" runat="server">
                        <ItemTemplate>
                            <div class='<%#  Eval("OuterClass") %>  row '>
                                <div class='<%#  Eval("ImageClass") %>  text-center'>
                                    <img src='<%#  Eval("ImagePath") %> ' />
                                </div>
                                <div class='<%#  Eval("TextClass") %>'>
                                    <div class="text-center">
                                        <%#  Eval("Title") %>
                                    </div>
                                    <div class="text-center text-break">
                                        <%#  Eval("Description") %>
                                    </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
    
                </div>
            </div>
    
    Aspx.cs:
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    List<MyModel> list = new List<MyModel>();
    
                    list.Add(new MyModel
                    {
                        OuterClass = "col-6",
                        ImageClass = "col-12",
                        ImagePath = "images/WingtipToys/boatbig.png",
                        Title = "title1",
                        TextClass = "col-12",
                        Description = "description111111111111111111111111111111111111111111111111111111111111111111"
                    });
                    list.Add(new MyModel
                    {
                        OuterClass = "col-6",
                        ImageClass = "col-12",
                        TextClass = "col-12",               
                        ImagePath = "images / WingtipToys / boatpaper.png",
                        Title = "title2",
                        Description = "description2222222222222222222222222222222222222222222222222222222222222222222222222222222"
    
                    });
    
                    list.Add(new MyModel
                    {
                        OuterClass = "col-12",
                        ImageClass = "col-6",
                        TextClass = "col-6",
                        ImagePath = "images/WingtipToys/planepaper.png",
                        Title = "title3",
                        Description = "description3333333333333333333333333333333333333333333333333333333333333333333"
                    });
                    repeater1.DataSource = list;
                    repeater1.DataBind();
                }
            }
            public class MyModel
            {
                public string OuterClass { get; set; }
    
                public string ImagePath { get; set; }
    
                public string ImageClass { get; set; }
    
                public string TextClass { get; set; }
    
                public string Title { get; set; }
    
                public string Description { get; set; }
    
            }

    The Result:

    Best Regards,

    Sam

    Friday, May 3, 2019 10:38 AM