Home Update div class in foreach loop using partial
Reply: 1

Update div class in foreach loop using partial

CS-Beginner
1#
CS-Beginner Published in 2018-01-13 13:18:25Z

I want create a blogs list with mvc razor. I have a partial for calling blogs item and a layout as master page. I want using zip layout (first item push to right secondary push to left and reset for next items).

Layout

@foreach (var item in Model.Listings)
{
     @Html.Partial("~/Views/Listing/_ListingCard.cshtml", item)
}



Partial

       <div class="card card-plain card-blog">
        <div class="row">
            <div class="col-md-5">
                <div class="card-image">
                 ///MyCodes
                </div>
            </div>
            <div class="col-md-7">
                <div class="card-body">
                ///MyCodes
                </div>
            </div>
        </div>
      </div>

I want change col-md-5 with col-md-7 per loop.
Can I do this without JS? Any idea please?

CS-Beginner
2#
CS-Beginner Reply to 2018-01-14 13:16:48Z

OK, I found a way.

@{
   int counter = 0;
}
@foreach (var item in Model.ListingsPageList.Take(5))
{
    counter++;
    @Html.Partial("~/Views/Listing/_ListingCard.cshtml", item, new ViewDataDictionary { { "counter", counter } })
    if(counter > 1)
    {
       counter = 0;
    }
}

Partial

  <div class="card card-plain card-blog">
    <div class="row">
        <div class="@(ViewBag.counter > 1 ? "col-md-7":"col-md-5")>
            <div class="card-image">
             ///MyCodes
            </div>
        </div>
        <div class="@(ViewBag.counter > 1 ? "col-md-5":"col-md-7")>
            <div class="card-body">
            ///MyCodes
            </div>
        </div>
    </div>
  </div>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.317964 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO