Question

As the title states.

i am trying to add headers based on certain values within my model.

currently it looks something like this.

foreach (var track in Model)
        {
            if (track.G1)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("G1");
                </script>
            }
            else if (track.Handicap)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("handicap");
                </script>
            }
            else if (track.Special)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("special");
                </script>
            }
            else if (track.BestRight)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("bestright");
                </script>
            }
            else if (track.Dirt)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("dirt");
                </script>
            }
            if (even)
            {
                even = false;

                <div class="model-attribute-wrapper even">
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
            else
            {
                even = true;
               <div class="model-attribute-wrapper odd"> 
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
        }

which does not seem to be working as it adds a ton of classes to the first 2 rows then it gradually seems to not add one.

Answer 1

Something seems wrong here, this wont execute of course and would need something like jQuery’s ready() , but even if each one has jQuery.ready(), every time this code executes for each track in Model, it will grab anything that has “.model-attribute-wrapper” and will keep on adding the class.
In the end the last one will have all the classes of previously executed tracks in the model.

I think you need to handle each track by id or something rather than generic class “.model-attribute-wrapper”

$(document).ready(function(){ 
  $("#trackid").addClass("G1"); // something like this 
});