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

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 ?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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