At the moment I'm using the following code in my CSHTML:
#{int i = 0;}
#foreach (var item in Model.Traders)
{
if ((i++ % 3) == 0) {
if (i != 1) {
#:</div>
}
#:<div class="row">
}
#:<div class="four column"><div class="panel new"><h3 class="dotted"><strong>#item.Title</strong></h3><p>#item.Description</p><code><div class="panel pick"></code></div></div>
}
#if (i != 0) {
#:</div>
}
This outputs the following HTML:
<div class="row">
<div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
<div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
<div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div>
</div>
<div class="row">
<div class="four column"><div class="panel new"><h3 class="dotted"><strong>Bobby</strong></h3><p>Bobby bobby bobby</p><code><div class="panel pick"></code></div></div>
<!-- Add missing divs if there's less than 3 (there always needs to be 3 divs inside a div row). In this case it's 2 that are missing -->
<div class="four column"></div> <!-- my code does not render these -->
<div class="four column"></div> <!-- my code does not render these -->
</div>
My question is whether there's an easier way to achieve what I'm doing within my view and to ensure that it adds the missing divs if there's less than 3 in a row.
Group traders in batch of 3 items, Try this:
#{
var g = Model.Traders.GroupBy(r => Model.Traders.IndexOf(r) / 3).ToList();
}
#foreach (var parentItem in g)
{
<div class="row">
#foreach (var item in parentItem)
{
<div class="four column"><div class="panel new"><h3 class="dotted"><strong>#item.Title</strong></h3><p>#item.Description</p><code><div class="panel pick"></code></div></div>
}
#for (int i = parentItem.Count(); i < 3; i++)
{
<div class="four column"></div>
}
</div>
}
Regards.
Related
I need to wrap all the childrens of the parent with a div. In the example below I managed to put a div tag after each parent but how do I put an end /div tag at the end of the chidrens.
I tried with document.createElement, and now with insertAdjacentHTML ..., what is the best way to fix this, or the best way to encode it?
var divs = document.getElementById("container").querySelectorAll('.activ-window *');
var elements = "";
divs.forEach(function(elem){
if (elem.firstChild) {
elements += elem.insertAdjacentHTML("afterbegin", '<div id="afterParent" style="display:block;">');
elem.insertAdjacentHTML("afterend", '</div>');
}
});
document.getElementById("demo").innerHTML = elements;
<div id="container" class="activ-window">
<div id="parent1">
<div id="child" ></div>
<div id="child" ></div>
</div>
<div id="parent2">
<div id="child" ></div>
<div id="paren3" >
<div id="child" ></div>
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
</div>
It should look like:
<div id="container" class="activ-window">
<div id="parent1">
<div id="afterParent" style="display:block;">
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
<div id="parent2">
<div id="afterParent" style="display:block;">
<div id="child" ></div>
</div>
<div id="paren3" >
<div id="afterParent" style="display:block;">
<div id="child" ></div>
<div id="child" ></div>
<div id="child" ></div>
</div>
</div>
</div>
</div>
Edit for Nick:
This is with text(see Parent1):
<div id="parent1">Parent1
<div id="child" >child1</div>
<div id="child" >child1</div>
</div>
I get it with your code
<div id="parent1">
<div id="afterParent" style="display:block;">
"Parent1"
<div id="child" >Child1</div>
<div id="child" >Child1</div>
</div>
</div>
It should look:
<div id="parent1">Parent1
<div id="afterParent" style="display:block;">
<div id="child" >Child1</div>
<div id="child" >Child1</div>
</div>
</div>
If you want to enclose all the divs beneath each parent in a new div, you can create a new div element, move all the non-text children to it, and then add that div as a child to the original parent:
const container = document.getElementById("container");
const parentDivs = container.querySelectorAll('.activ-window div[id^="parent"]');
for (let parent of parentDivs) {
// create a new div
let after = document.createElement('div');
after.id = 'after' + parent.id;
after.style.display = 'block';
// move the parent's non-text children to it
let children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (children[i].nodeType != Node.TEXT_NODE) {
after.append(children[i]);
}
}
// and append it to the parent
parent.appendChild(after);
}
console.log(container.innerHTML);
<div id="container" class="activ-window">
<div id="parent1">
Parent1
<div id="child1"></div>
<div id="child2"></div>
</div>
<div id="parent2">
Parent2
<div id="child3"></div>
<div id="parent3">
<div id="child4"></div>
<div id="child5"></div>
<div id="child6"></div>
</div>
</div>
</div>
I would like to get two columns side by side in one row. Data in these columns will be different.
Like this:
<div class="row">
<div class="col-md-6">
Data1
</div>
<div class="col-md-6">
Data2
</div>
</div>
But.. my code generate a structure:
<div class="row">
<div class="col-md-6 text-center">
</div>
<div class="col-md-6 text-center">
<h2>Title: </h2>
<p>Position: Name Surname</p>
</div>
<div class="row">
<div class="col-md-6 text-center">
<h2>Title: </h2>
<p>Position: Name Surname</p>
</div>
<div class="col-md-6 text-center">
</div>
</div>
This is my code in PartialView (_Pozycjee.cshtml):
#model IEnumerable<dynamic>
#if (Model.Any() == true)
{
foreach (dynamic item in Model)
{
#:<div class="row">
<div class="col-md-6 text-center">
#if (item.Mecz.GospodarzKlubId == item.Zawodnik.KlubId)
{
<h2>Skład gospodarzy:</h2>
<p>#item.Nazwa: #item.Zawodnik.Imie #item.Zawodnik.Nazwisko</p>
}
</div>
<div class="col-md-6 text-center">
#if (item.Mecz.GoscKlubId == item.Zawodnik.KlubId)
{
<h2>Skład gości:</h2>
<p>#item.Nazwa: #item.Zawodnik.Imie #item.Zawodnik.Nazwisko</p>
}
</div>
}
#: </div>
}
else
{
<p>Brak pozycji</p>
}
This generate a "empty" div and and spoils everything.
Look at this screen: https://photoland.io/i/k4Pzu
Please for Help. Greetings
Try this:
#model IEnumerable<dynamic>
#if (Model.Any() == true)
{
<div class="row">
#foreach (dynamic item in Model)
{
if (item.Mecz.GospodarzKlubId == item.Zawodnik.KlubId)
{
<div class="col-md-6 text-center">
<h2>Skład gospodarzy:</h2>
<p>#item.Nazwa: #item.Zawodnik.Imie #item.Zawodnik.Nazwisko</p>
</div>
}
if(item.Mecz.GoscKlubId == item.Zawodnik.KlubId)
{
<div class="col-md-6 text-center">
<h2>Skład gości:</h2>
<p>#item.Nazwa: #item.Zawodnik.Imie #item.Zawodnik.Nazwisko</p>
</div>
}
}
</div>
}
else
{
<p>Brak pozycji</p>
}
I am using Umbraco (mvc) with bootstrap.My template use partial view to load name and job title of staff in template. How I can add div (new row) after 4 iteration.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var selection = Model.Content.Site().FirstChild("aboutUs").Children("staff")
.Where(x => x.IsVisible());
}
#foreach(var item in selection){
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
</div>
}
Difficulty:
I want to add
<div class="row team">
</div>
after every 4th
<div class="col-sm-3">
</div>
A more easier solution would be the use of the Umbraco helper method InGroupsOf(columns).
#foreach(var group in selection.InGroupsOf(4))
{
<div class="row team">
#foreach(var item in group)
{
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
}
</div>
}
Try:
#foreach(var obj in selection.Select((item, index) => new {item, index}))
{
if(obj.index==0||obj.index%4==0){
#Html.Raw("<div class='row team'>")
}
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#obj.item.GetPropertyValue("fullName")</a> <small>
#obj.item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
#if((obj.index+1)%4==0||obj.index+1==selection.Count()){
#Html.Raw("</div>")
}
}
- It will works, Use for loop instead of foreach loop and then just add logic
#for (int i = 1; i < selection.Count; i++)
{
var item = selection[i];
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
#if (i % 5 == 0)
{
<div class="col-sm-3">
<h4 >D #item</h4> <!--your actual html code-->
</div>
}
else
{
<h4 style="color:red">D #item</h4> <!--your actual html code-->
}
</div>
</div>
</div>
}
I'm using Bootstrap 3 on my site and I am using an MVC Razor For Each Loop to retrieve all of the child items on a blog homepage as follows:
#{int i = 0;}
#foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
{
if (i % 2 == 0)
{
#:<div class="row row-eq-height">
}
<div class="col-sm-12 col-md-6">
</div><!-- col-sm-12 col-md-6 -->
if (i % 2 != 0)
{
#:</div><!-- row row-eq-height -->
}
i++;
}
This works fine when I have an even number of child pages however when I have an odd number of child pages, it's not hitting the if % 2 != 0 block which means the last row doesn't get closed which then breaks the flow of the remainder of the page.
I tried to fix this by adding the following if statement after the For Each loop hoping that if the final value of i was not 2, it would add a closing DIV tag as needed but instead that causes an inbalanced DIV tag error.
#if (i !% 2 == 0)
{
</div><!-- row row-eq-height -->
}
Anyone got any thoughts or ideas? If I have an even number, it works just fine and the page flow is as expected.
Your foreach loop needs to be inside a the containing element (row) and then withing the loop, close and start a new row for every second child element (column)
#{int i = 0;}
<div class="row row-eq-height">
#foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
{
if (i > 0 && i % 2 == 0)
{
#:</div><div class="row row-eq-height">
}
<div class="col-sm-12 col-md-6">xxxxx</div>
i++;
}
</div>
The output, assuming you have 5 items in the collection, will be
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
I'm using mvc5 with razor view engine and I have a table of images in my DB , I want show 3 images in first line, then show some text in the next line, and then show 2 images in the next line with some text which will repeat by for loop like this image
my current code is :
<div style="padding: 0;">
#foreach (var item in Model.MainGoods)
{
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="#">
<img src="#Url.Content(item.GoodImage.ToString())" />
</a>
</div>
}
</div>
Can anyone help me do it?
This should do the trick:
<div style="padding: 0;">
#{
var count =1;
<div class="row">
#foreach (var item in Model.MainGoods)
{
if (count <= 3)
{
<div class="col-md-4 well">
<a href="#">
<img src="#Url.Content(item.GoodImage.ToString())"/>
</a>
</div>
if (count == 3)
{
//new row
#Html.Raw("</div><div class=\"row\">")
}
}
else
{
<div class="col-md-6 well">
<a href="#">
<img src="#"/>
</a>
</div>
if (count == 5)
{
//new row
#Html.Raw("</div><div class=\"row\">")
}
}
if (count < 5)
{
//increment the count
count++;
}
else
{
//reset the count
count = 1;
}
}
</div>
}
</div>