Conditionally Change CSS Class in Razor View

Conditionally change CSS class in Razor view

 @{
   int counter=0;
 }
 @foreach (var item in Model)
 { 
   counter++;
   <div class="@(counter<=3 ? "classRed":"classBlue")">
       <img src="@item.Blog.Image.img_path" alt="Not Found" />
       //other markup also here

   </div>  
    if (counter == 6)
    {
        counter = 0;
    }

 }

Where classRed and classBlue are the CSS classes

How to add a second css class with a conditional value in razor MVC 4

I believe that there can still be and valid logic on views. But for this kind of things I agree with @BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:

Your answer (assuming this works, I haven't tried this):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

Second option:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Third option:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

MVC For..Each how to set class conditionally?

Here is the simpler way for your problem

@foreach (var item in Model.MyList)
{
    <tr class="@(item.IsDeleted ? "danger" : string.Empty) ">  
        <td>@item.FirstName</td>
        <td>@item.LastName</td>
        <td>@item.EmployeeId</td>
    </tr>
}

How to conditionally add CSS class to Html.TextBoxFor

you can use like this..

@Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class = ViewBag.IsNew ? "test" : "" })

ASP.NET MVC razor: conditional attribute in CSS block

You should put your css in css files and target specific classes instead of loading files conditionally.
Then you can use Razor to include conditional classes on your tags. Something like:

@{
    var imgType = ViewBag.type == "mobile"?"for-mobile":"for-desktop";
}

<img class="@imgType" src="..."/>

Then in your CSS file:

.for-mobile{
      min-height:100vh;
      height:auto;
}

.for-desktop{
     height: 100vh;
}

ASP.NET MVC: How do other people apply conditional CSS classes?

Option C: Do the logic in the controller and assign the styles in the view but in a simpler way:

In the controller:

ViewBag.IsJanuary = (month == Month.January);
ViewBag.IsTuesday = (today == Day.Tuesday);

In the view:

@string userNameClass = string.Empty;
@userNameClass += ViewBag.IsJanuary ? "january " : "";
@userNameClass += ViewBag.IsTuesday ? "tuesday " : "";

@Html.TextBoxFor(model => model.UserName, new { @class = userNameClass })

otherwise your controller is getting polluted with view concerns. An empty class is mostly harmless unless you're google and every byte counts.

If Statement (For CSS Class) on Razor Views

A simple solution would be something like this:

@foreach (var item in Model) 
{
    var style = (item.status == "Unread") ? "font-weight:bold" : "";

    <tr style="@style">
        ...
    </tr>
}

But note, it's generally cleaner to have a separate CSS class, then directly decorate the elements the appropriate class based on its status. For example:

/* css */
tr.status-unread { font-weight: bold; }
...

/* razor */
@foreach (var item in Model) 
{
    <tr class="status-@item.status.ToLowerInvariant()">
        ...
    </tr>
}

razor add class if condition is false

Your problem here is "count++" is not in foreach loop.
If you want to use foreach loop you should move "count++" inside loop.

       @{
            int count = 0;
        }
        @foreach (var item in Model.Models)
            {
            <div class="col-xxs-12 col-xs-6 col-sm-4 @(count < 6 ? "" : "dismiss")">
                <a href="@Url.Action("Detail", "Product", new { productID = item.ProductID, parentCategoryID = item.CategoryID, isProductModel = true })" class="model-wrap">
                    <div class="box">
                        <div class="img-wrap" style="background-image: url( @Url.Content(Utils.ProductImagePath(item.ImageID)) )"></div>
                        <div class="arrow f16">@item.Name <i class="fa fa-angle-right theme-color" aria-hidden="true"></i></div>
                    </div>
                </a>
            </div>
            count++;
        } 

---

Related Topics