How to use two if statement into foreach in razor? - html

Question

I tried to use two if statements into foreach such as this but I get this error:
Encountered end tag "div" with no matching start tag. Are your
start/end tags properly balanced?
I want this to be the condition: If the variable i is smaller than the one I want to be the part of this code inside a div element with row class.
<text>
<div class="col-xs-2 col-wrapper">
<div class="image-wrapper">
<img src="#Url.Content(path + item.PhotoName)" alt="" />
<img class="delimg" src="~/Content/Adminex/images/delete-icons.png" id="#item.Id" />
</div>
</div>
</text>
.Please advice,
#{
string path = System.Configuration.ConfigurationManager.AppSettings["ImageEdit"];
int i = 0;
}
#foreach (var item in Model.PhotoTables)
{
if (i == 7)
{
i = 0;
}
if (i < 1)
{
#:<div class="row">
}
<text>
<div class="col-xs-2 col-wrapper">
<div class="image-wrapper">
<img src="#Url.Content(path + item.PhotoName)" alt="" />
<img class="delimg" src="~/Content/Adminex/images/delete-icons.png" id="#item.Id" />
</div>
</div>
</text>
if (i < 1)
{
#:</div>
}
i++;
}

Answer 1

That </div> above i++ looks suspiciously lonesome.
EDIT:
Now I think I understand, you want 7 text items each in each div row (with any remainder in the last row). Here's one of many ways..
#foreach (var item in Model.PhotoTables) {
if (i < 1) {
#:<div class="row">
}
<text>
...item...
</text>
i++;
if (i == 7) {
i = 0;
#:</div>
}
}
if (i > 0) {
#:</div>
}
That produces this, if that's what you want..
<div class="row">
<text>..1..</text>
<text>..2..</text>
<text>..3..</text>
<text>..4..</text>
<text>..5..</text>
<text>..6..</text>
<text>..7..</text>
</div>
<div class="row">
<text>..8..</text>
</div>

Answer 2

If I am not wrong, you want to wrap text tag in <div class="row"> when i < 1. So you can try this. It works for me.
#{
string path = System.Configuration.ConfigurationManager.AppSettings["ImageEdit"];
int i = 0;
}
#foreach (var item in Model.PhotoTables)
{
if (i == 7)
{
i = 0;
}
if (i < 1)
{
<div class="row">
<text>
<div class="col-xs-2 col-wrapper">
<div class="image-wrapper">
<img src="#Url.Content(path + item.PhotoName)" alt="" />
<img class="delimg" src="~/Content/Adminex/images/delete-icons.png" id="#item.Id" />
</div>
</div>
</text>
</div>
}
else
{
<text>
<div class="col-xs-2 col-wrapper">
<div class="image-wrapper">
<img src="#Url.Content(path + item.PhotoName)" alt="" />
<img class="delimg" src="~/Content/Adminex/images/delete-icons.png" id="#item.Id" />
</div>
</div>
</text>
}
i++;
}

Answer 3

I think this will do the trick. use the modulus operator to find out if you are at the beginning or at the end of counting to 7 and if the items are not up to 7 the closing div will still be in place
#{
string path = System.Configuration.ConfigurationManager.AppSettings["ImageEdit"];
int i = 0;
int modelCount = Model.PhotoTables.Count();
}
#foreach (var item in Model.PhotoTables)
{
//if (i == 7)
// {
// i = 0;
// }
if (i % 6 == 0)
{
#:<div class="row">
}
<text>
<div class="col-xs-2 col-wrapper">
<div class="image-wrapper">
<img src="#Url.Content(path + item.PhotoName)" alt="" />
<img class="delimg" src="~/Content/Adminex/images/delete-icons.png" id="#item.Id" />
</div>
</div>
</text>
if (i % 6 == 5 || i == modelCount - 1)
{
#:</div>
}
i++;
}