Recreate asp.net Data List with Horizontal layout in Razor Pages

Question

In older asp.net pages you could tell the DataList to fill horizontally like this :

<asp:DataList ID="dl" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" RepeatColumns="2">

Starting from a Razor Page vertical fill :

                    @foreach (var x in Model.records)
                    {
                        <tr class="border text-center">
                            <td>@x.AccessDate</td>
                            <td>@x.AccessLocationName</td>
                            <td>
                                <img src="@x.imagepath" class="grow" />
                            </td>
                        </tr>
                    }

Is it possible to get a horizontal layout that is 2 wide before it starts next row, with a Razor page ?

What do you mean for get a horizontal layout that is 2 wide before it starts next row? And your code in razor pages is horizontal fill instead of vertical fill, each row will contain three data. — Rena
– Rena, Commented Oct 27, 2021 at 1:48
Apologies, I perhaps didn't word that well. The records from the database will contain an image and associated data. I would like to display two images per row, then if there are more records, start a new row, etc. Probably should have left out the HTML snippet. I just started with the <table><tr> as a learning exercise and am not set on using them if they won't achieve what I am after. — JamesW
– JamesW, Commented Oct 27, 2021 at 3:12
You said your database contain an image and some associated data but want to display two images? Where is the other image from? — Rena
– Rena, Commented Oct 27, 2021 at 5:38

JamesW · Accepted Answer · 2021-10-28 21:58:10Z

Found a solution that works for my project in this thread :Display three columns per row in MVC cshtml

Letting Bootstrap automatically wrap the columns is working so far. As I wanted two records per row, I went with something similar to this :

                    <div class="row">
                    @foreach (var x in Model.scanrecords)
                    {
                        <div id="dataListItem" class="col-md-6 border border-dark rounded mx-auto">
                            <div class="">
                                <img src="@x.imagepath" class="grow" />
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <label>Access  Date: @x.AccessDate</label>
                                </div>
                            </div>
                        </div><!-- end col-md-6  -->
                    }
                </div>

Collectives™ on Stack Overflow

Recreate asp.net Data List with Horizontal layout in Razor Pages

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related