We Keep Coding

C# Foreach Usage

I want to use 2 variables and iterate over different objects with a single line foreach,
If I wanted to do it with python I could use as follows.
<div>
#(for firstSong, secondSong Model.Web.OrderBy(p=>p.ListOrder()) )
{
<div class="item">
<div class="row">
firstSong.Name
</div>
<div class="row2">
secondSong.Name
</div>
</div>
}
</div>
<div>
but I want to do the same thing with c#, how can I do it?
#foreach(var song in Model.Web.OrderBy(p=>p.ListOrder())
{
<div class="item">
<div class="row">
song.Name
</div>
<div class="row2">
song.Name
</div>
</div>
}
</div>

In older C# you'd possibly do this with a plain for that jumps 2:
var arr = Model.Web.OrderBy(p=>p.ListOrder()).ToArray();
#for(int x = 0; x < arr.Length; x+=2)
{
<div class="item">
<div class="row">
#arr[x].Name
</div>
#if(x+1 < arr.Length){
<div class="row2">
#arr[x+1].Name
</div>
}
</div>
}
</div>
You could use some LINQ to juggle your collection into tuples of song pairs, if your C# is modern enough to have Chunk (.net6+)
#foreach(var array in Model.Web.OrderBy(p=>p.ListOrder()).Chunk(2))
{
<div class="item">
<div class="row">
#array[0].Name
</div>
#if(arr.Length > 1){
<div class="row2">
#array[1].Name
</div>
}
</div>
}
</div>
There are other ways of doing it in older LINQ, such as projecting to include the index of each item, using a Where to take only the evens and Zipping them together with only the odds, or grouping them by the divide-by-2 of the index, but it gets a bit ugly:
#foreach(var array in Model.Web.OrderBy(p=>p.ListOrder()).Select((o,i)=>new{o,i}).GroupBy(at => at.i/2, at=> at.o), (k,g)=>g.ToArray())
...
<div class="item">
<div class="row">
#array[0].Name
</div>
#if(array.Length > 1){
<div class="row2">
#array[1].Name
</div>
}
</div>
It'd perhaps be better to write your own Chunk/lift it from the .net source

If you're not using .NET 6 and can't take advantage of .Chunk (as in the other answer), you could perhaps get an IEnumerator<Song> and iterate through that manually:
#{
IEnumerator<Song> songEnumerator = Model.Web.OrderBy(p => p.ListOrder()).GetEnumerator();
while (songEnumerator.MoveNext())
{
<div class="item">
<!-- handle the first song -->
<div class="row">
#songEnumerator.Current.Name
</div>
<!-- try and get the second item -->
#if (#songEnumerator.MoveNext())
{
<div class="row2">
#songEnumerator.Current.Name
</div>
}
</div>
}
}

How do put items with the same class name in the new div after a certain limit?

For example in the Model.Examples = List(1,2,3,4,5,6).
I get the data and show it to the user but I have a little problem. I want to show data like under below
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
</div>
<div class="X">
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
I try to this but my method is not correct.
<div class="x">
#foreach(var item in Model.Examples)
{
<div class="y">#item.Number</div>
}
When I execute the code, my result is
</div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
How can I do it in .NET Core?

You can use LINQ's Take and Skip:
<div class="x">
#foreach(var item in Model.Examples.Take(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>
<div class="X">
#foreach(var item in Model.Examples.Skip(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>

Load More Button Umbraco, Razor funcionality

im new to umbraco and c#, I made a blog list in umbraco razor but how can i make a load more button funcionality?
i want when the user click the button load more 5 items to the list.
One way is the the users click the button update the query, but i would need to refresh the page.
Any Help would be great since im stuck on this one, and have no clue how to do this in umbraco.
#{
var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START -->
#while(selection.Any()){
var oneItem = selection.First();
selection.Remove(oneItem);
<div class="row">
<div class="col-md-4 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<div class="card">
<img src="#Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao">#oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>
<span class="qs-blog-date-1page" id="qs-datetime">#(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>
<br>
<span class="qs-blog-publicado-por">#oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
<span class="qs-blog-titulo-1page">#oneItem.GetPropertyValue("tituloBlog")</span>
</div>
<div class="col-md-12 col-sm-12 onclick="location.href='#oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#oneItem.GetPropertyValue("resumoBlog")</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
</div>
var twoItems = selection.Take(2).ToList();
if(twoItems.Any()){
<div class="row">
#foreach (var item in twoItems){
selection.Remove(item);
<div class="col-md-6 col-sm-12" onclick="location.href='#item.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao-double">#item.GetPropertyValue("tipoDeDirecao")</span><br>
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double" id="qs-datetime">#(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
<span class="qs-blog-publicado-por-double"> #item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#item.GetPropertyValue("tituloBlog")</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#item.GetPropertyValue("resumoBlog")</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
</div>
<br>
}
}
<!-- BLOG END -->
</div>

It could be something like this:
#{
int page = int.TryParse(Request["page"], out page) ? page : 0;
int pageSize = 5;
var selection = Model.Content
.Children()
.Where(x => x.IsVisible())
.Skip(page * pageSize)
.Take(pageSize)
.ToList();
}
<div class="container-fluid">
...
</div>
<a href="#Request.RawUrl.Split('?')[0]?page=#(page + 1)">
Load next #pageSize results
</a>

Umbraco C# - Display 2 different columns on foreach loop (1-2) (1-2)

I'm trying to display data from the Umbraco in this order 1-2 in foreach loop (bootstarp columns), but my code is displaying in this order of columns 1-1, instead of 1-2 on loop. It does not add the second column to the second row just one column.
E.g. 1 item, then 2 items, then 1 item again with different columns displays.
whats the better approach to make 1-2 on loop of content?
I'm kinda lost on this one. Any help would be good.
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START-->
#foreach(var data in Model.Content.Children().Where(x => !x.GetPropertyValue<bool>("umbracoNaviHide"))){
if(data.HasValue("blogNested")){
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested");
int i = 0 ;
foreach(var item in items){
<div class="row">
#if(i % 2 == 0) {
<div class="col-md-4 col-sm-12">
<div class="card">
<img src=" /media/1180/dude.jpg" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br><br>
<span class="qs-blog-date-1page">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span><br><br><br>
<span class="qs-blog-titulo-1page">#(item.GetPropertyValue<string>("tituloBlog"))</span>
</div>
<div class="col-md-12 col-sm-12" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
else {
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao-double">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br>
<img src=" /media/1182/tempo.jpg" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por-double"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#(item.GetPropertyValue<string>("tituloBlog"))</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
#{i++;}
</div>
}
}
}
<!-- BLOG START-->
</div>

It could be something like this
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested")
.ToList();
while (items.Any())
{
var oneItem = items.First();
items.Remove(oneItem);
<div class="row">
<div class="col-md-12">
#oneItem.Id
</div>
</div>
var twoItems = items.Take(2).ToList();
if (twoItems.Any())
{
<div class="row">
#foreach (var item in twoItems)
{
items.Remove(item);
<div class="md-6">
#item.Id
</div>
}
</div>
}
}
This will render
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="md-6">
<text>{{Id}}</text>
</div>
<div class="md-6">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
...

How do you programmatically apply a css class?

I have in an aspx page, some constructions like this:
<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
<div class="degrees">- 1</div>
<div class="data">
<h2>Sunny</h2>
<div>Wind: E 7 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
I want in code behind to apply various classes to the tag (and/or add more than one tags, in conjunction to various conditions:
switch (response.currently.summary.ToString())
{
case ("Partly Cloudy"):
//do something
//< i class="cloud windy"></i>
break;
case ("Sunny"):
//do something
//<i class="sun"></i>
//<i class="cloud"></i>
//<i class="sprinkles"></i>
break;
}
I have to say that I started from a static HTML page that mimic the behaviour I want.
Any hints please?
L.E.
For being more precise the whole HTML construction is (statically) like this:
<section>
<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
<div class="degrees">- 1</div>
<div class="data">
<h2>Sunny</h2>
<div>Wind: E 7 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
<div class="weather time-day">
<div class="icon">
<i class="sun"></i>
<i class="cloud windy"></i>
</div>
<div class="content">
<h3>Day</h3>
<div class="degrees">+ 3</div>
<div class="data">
<h2>Mostly Sunny</h2>
<div>Wind: N 5 mph</div>
<div>Humidity: 45%</div>
</div>
</div>
</div>
<div class="weather time-evening">
<div class="icon">
<i class="sun"></i>
<i class="cloud"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
</div>
<div class="content">
<h3>Evening</h3>
<div class="degrees">0</div>
<div class="data">
<h2>Rainy</h2>
<div>Wind: W 12 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
<div class="weather time-night">
<div class="icon">
<i class="moon"></i>
<i class="cloud"></i>
<div class="snowflakes">
<i class="snowflake"></i>
<i class="snowflake"></i>
<i class="snowflake"></i>
<i class="snowflake"></i>
</div>
</div>
<div class="content">
<h3>Night</h3>
<div class="degrees">- 2</div>
<div class="data">
<h2>Cloudy</h2>
<div>Wind: N 2 mph</div>
<div>Humidity: 47%</div>
</div>
</div>
</div>
</section>
and here conditionally I have to change the tags accordingly to the switch values.

Initially, you have to make your div elements enabled for server side control. In terms of code:
<div id="DivId" runat="server"></div>
Then you could make your checks in your server side code and add the class you want like below:
DivId.CssClass="the name of the css class";

The 'nice' way of doing this would be to change the control you are trying to modify to runat="server" in your aspx
<div id="weatherDiv" runat="server">
And then in your code behind, you can now access the div:
weatherDiv.CssClass = "weather time-morning active";
You can also hack a more MVC Razor paradigm to this with Bind <%#, without the need for a control:
.cs Code Behind
protected string GetWeatherClass(bool extraSprinkles)
{
return extraSprinkles
? "extraSprinkesClass"
: "";
}
.ASPX
<div class="weather <%# GetWeatherClass(true) %>">

based on suggestions, finally I have this approach (don't know if the best, but at least it woks)(MorningTime, MorningDay etc. are ID for corespinding tags):
switch (response.currently.icon.ToString())
{
case ("clear-day"):
//do something
MorningTime.Attributes.Add("class", "sun");
MorningType.Attributes.Add("class", "sun");
DayTime.Attributes.Add("class", "sun");
DayType.Attributes.Add("class", "sun");
break;
case ("partly-cloudy-day"):
//do something
MorningTime.Attributes.Add("class", "sun");
MorningType.Attributes.Add("class", "cloud windy");
DayTime.Attributes.Add("class", "sun");
DayType.Attributes.Add("class", "cloud windy");
EveningTime.Attributes.Add("class", "sun");
EveningType.Attributes.Add("class", "cloud windy");
NightTime.Attributes.Add("class", "moon");
NightType.Attributes.Add("class", "cloud windy");
break;
case ("rain"):
and so on.