CODEWITHSUNDEEP
htmlasp.net-mvcrazor
hmahdavi
hmahdavi

Reputation: 2354

How to use two if statement into foreach in razor?

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++;
    }

Upvotes: 0

Views: 1851

Answers (3)

Ebimie Abari
Ebimie Abari

Reputation: 96

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++;
}

Upvotes: 0

arkadianriver
arkadianriver

Reputation: 123

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>

Upvotes: 2

SarangK
SarangK

Reputation: 690

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++;
    }

Upvotes: 1

Related Questions