How to apply Style Css in mvc foreach loop

Question

I'm new in asp.net mvc and My problem is, I want to conditionally add a CSS background-color to a set of table rows, based on BILL-AMOUNT = 0.00 i have code like this

@model IEnumerable

View

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.TicketNo)</td>
            <td style="padding-left: 12px; display: none;">@Html.DisplayFor(modelItem => item.name)</td>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.ArrDate)</td>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.quantity)</td>
            <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.Total)</td>
            <td>@Html.DisplayFor(modelItem => item.Refund)</td>
            <td>@Html.DisplayFor(modelItem => item.TotalAmount)</td>    
        </tr>
    }
</tbody>

somthing like : Controller List<UserMaster> user = new List<UserMaster>(); return View(bk); model : @model IEnumerable<PinkPearl.Models.GenerateTicket_Details> — aparna rai
– aparna rai, Commented May 3, 2018 at 8:04
Possible duplicate of Conditionally change CSS class in Razor view — Rafalon
– Rafalon, Commented May 3, 2018 at 8:10
Possible duplicate of How to do an inline style with asp.net mvc 3 razor in a html helper — shaair
– shaair, Commented May 3, 2018 at 9:04

Steve Harris · Accepted Answer · 2018-05-03 08:01:40Z

1

Assuming you have a class:

.tr-zero {
    background-color: #cccccc;
}

You can add the class conditionally like this:

<tr@(item.TotalAmount == 0 ? " class=\"tr-zero\"" : string.Empty)>

answered May 3, 2018 at 8:01

Steve Harris

5,1571 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shaair · Accepted Answer · 2018-05-03 08:01:57Z

<tbody>
          @foreach (var item in Model)
            {
              <tr bgcolor='@(item.AMOUNT==0? "#FFF":"#EEE")'>
              <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.TicketNo)</td>
               <td style="padding-left: 12px; display: none;">@Html.DisplayFor(modelItem => item.name)</td>
               <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.ArrDate)</td>
               <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.quantity)</td>
               <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.Total)</td>
               <td>@Html.DisplayFor(modelItem => item.Refund)</td>
               <td>@Html.DisplayFor(modelItem => item.TotalAmount)</td>    
                    </tr>
                   }

user9734035 · Accepted Answer · 2018-05-03 08:13:25Z

        <tbody>
        @foreach (var item in Model)
        {
          <tr style="background-color:@(Convert.ToInt32(item.TotalAmount) == 0?"RedColor":"GreenColor")">
          <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.TicketNo)</td>
           <td style="padding-left: 12px; display: none;">@Html.DisplayFor(modelItem => item.name)</td>
           <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.ArrDate)</td>
           <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.quantity)</td>
           <td style="padding-left: 12px;">@Html.DisplayFor(modelItem => item.Total)</td>
           <td>@Html.DisplayFor(modelItem => item.Refund)</td>
           <td>@Html.DisplayFor(modelItem => item.TotalAmount)</td>    
          </tr>
         }
    </tbody>

Collectives™ on Stack Overflow

How to apply Style Css in mvc foreach loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related