How to properly structure foreach results in a razor page.

Question

0.00/5 (No votes)

See more:

I am including a Foreach in a razor page that returns the results fine, but I am only getting one row, one column for each result. I would like to create a column of 4 per row and create a new new row every 4 items returned.

I have move around and played with this, tried a couple examples I thought would do the trick, but no luck. The main framework is Two columns side by side, one containing the foreach results and one returning a twitter feed.

Any thoughts?

What I have tried:

<div class ="col-7 container">
	
			@foreach (var item in Model.ResourceType)
			{
			<div class="row">
				<div class="col navBox">
					<a asp-page="/News"><p class="navBoxSubCaption">@item.ResourceTypeName</p></a>
				</div>
			</div>
			}			
	
	</div>
	<!--Column of Twitter Feed-->
	<div class = "col-4 twitterBox container">
		<div class="row justify-content-center">
			<a class="twitter-timeline" href="https://twitter.com/???ref_src=twsrc%5Etfw">List Returns</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
	</div>

Posted 8-Nov-22 19:00pm

Member 15825061

Updated 8-Nov-22 23:41pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-11-08T23:41:00

Solution 1

Move the <div class="row"> outside of your foreach loop:

Razor

<div class="col-7 container">
    <div class="row navBoxGrid">
        @foreach (var item in Model.ResourceType)
        {
            <div class="col navBox">
                <a asp-page="/News"><p class="navBoxSubCaption">@item.ResourceTypeName</p></a>
            </div>
        }
    </div>
</div>

Then use CSS to define the layout:

CSS

.navBoxGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.navBoxGrid > .navBox {
    flex: 1 1 50%;
}

Posted 8-Nov-22 23:41pm

Richard Deeming

Comments

Member 15825061 9-Nov-22 15:14pm

Works perfectly, thank you. I did however have to drop the second piece of CSS to get the side by side boxes, but the rest did the trick. With the following code it was still creating a single column for the results, though the layout was fixed int he process.

.navBoxGrid > .navBox {
flex: 1 1 50%;
}

Richard Deeming 10-Nov-22 4:32am

Sounds like you may need to set the box-sizing[^] to border-box.