Changing CSS class in foreach loop using jquery in MVC

Question

can someone help me with this task

@foreach (var item in Model.Premium)
{
    <div class="col-md-2">
        <div id="test" class="panel">
            <div class="panel-heading text-center">
                 <h1 class="panel-title" style="font-size:x-large;font-weight:400">
                      @item.year
                 </h1>
             </div>
             <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
                 [email protected]
             </div>
         </div>
     </div>

     <script>
         var year = @item.cy_year;
         var OddOrEven = year % 2;

         if (OddOrEven = 0) {
              $('#test').addClass("panel-default");
         }
         else 
         {
              $('#test').addClass("panel-info");
         }
     </script>
}

In this code I'm getting list of years and prices from a table. What I want is to add each year with it's price in bootstrap panel, then check if the panel is odd or even. For all of the odd panels, I want to add the bootstrap class "panel-default" and for all of the even panels I want to add the bootstrap class "panel-info".

Thanks

Are you trying to apply a different based on if the year is odd or even, or if the number in list is odd or even? — williamsandonz
– williamsandonz, Commented Dec 14, 2016 at 20:18
I am sorry I am trying to add based on number in list is odd or even — Teja
– Teja, Commented Dec 14, 2016 at 20:26

williamsandonz · Accepted Answer · 2016-12-14 20:32:17Z

The problem is your jQuery, it's targetting an element with an ID 'test' but in each iteration you output the same ID, so jQuery can't detect which element you want to target. You don't actually need any javascript.

In your code you were calculating odd or even based on the item's year, you can actually just use a count on the iterator for that. If you do really want to use the Year, just replace

@Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")

with

@Html.Raw(@item.cy_year % 2 == 0 ? "panel-default" : "panel-info")

heres the code:

@{int i = 0;}
    @foreach (var item in Model.Premium)
    {
        <div class="col-md-2">
            <div class="panel @Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")">
                <div class="panel-heading text-center">
                    <h1 class="panel-title" style="font-size: x-large; font-weight: 400">@item.year</h1>
                </div>
                <div class="panel-body text-center" style="font-size: x-large; font-weight: 300"> [email protected]</div>
            </div>
        </div>
        i++;
    }

hekta · Accepted Answer · 2016-12-14 20:24:45Z

0

I recommend to do this like this. Instead JavaScript for every item.

@foreach (var item in Model.Premium)
{
<div class="col-md-2">
  <div id="test" class="panel @((item.cy_year % 2 == 0) ? "panel-default" : "panel-info")">
    <div class="panel-heading text-center">
      <h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1>
    </div>
    <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
    [email protected]
    </div>
  </div>
</div>
}

answered Dec 14, 2016 at 20:24

hekta

1261 silver badge3 bronze badges

Comments

Sunshine · Accepted Answer · 2016-12-14 20:35:43Z

So a couple problems

You are declaring an id field on a tag in a for loop which will give multiple tags the same id.
In the if statement at the bottom you are doing assignment and not comparison

Here is how you could do it in razor

@foreach (var item in Model.Premium)
{
var classForDiv = "panel-info";
if(item.cy_year % 2 == 0) {
    classForDiv = "panel-default";
}
<div class="col-md-2">
<div id="test" class="panel @classForDiv"> // Need to change the id to be unique for each iteration
 <div class="panel-heading text-center">
<h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1></div>
<div class="panel-body text-center" style="font-size:x-large;font-weight:300"> [email protected]</div>
</div>
</div>
}

Collectives™ on Stack Overflow

Changing CSS class in foreach loop using jquery in MVC

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related