MVC: How to set style or class attributes on HTML elements from code?

I have a partial view in an MVC project that is inserted once for each item in a collection, kind of like a user control. Each view needs to have its border, background and foreground color set depending on certain values in the Model.
Is there a way to set the style or class attributes based on these values from code?
Here's some code to explain:
@model IEnumerable<AccountViewModel>
@{
    ViewData["Title"] = "Accounts";
}

<h3>Accounts overview</h3>
<div class="row">

    @foreach (var item in Model)
    {
        <div class="well well-sm col-lg-2 col-md-3 col-sm-4 col-xs-6">
            @Html.Partial("_DashboardItem", item)
            <br />
        </div>
    }

</div>

Open in new window


Right now, each instance of "_DashboardItem" is simply:
@model AccountViewModel

<div class="panel panel-primary text-center">
    <div class="panel-heading">@Model.AccountName</div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-hover table-condensed">
                <tr>
                    <td>@Model.Status.Ask</td>
                </tr>
                <tr>
                    <td>@Model.EquityPercent</td>
                </tr>
                <tr>
                    <td>@Model.Weight</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="panel-footer">
        @Model.Status.LastUpdated
    </div>
</div>

Open in new window


The problem is to change colors based on the incoming values so that if f.ex. @Model.EquityPercent is above 50, then the table's background is green and so on.

Any good ideas?
TIA!
Dennis
Dennis_GundersenAsked:
Who is Participating?
 
Ioannis ParaskevopoulosConnect With a Mentor Commented:
Hi,

you can define your css classes. I am not going to say what code will they have, but let's say you have table-green, table-yellow and tabe-red.

Then in your partial view you may have it this way:

@model AccountViewModel
@{
var tableClass = "table-green";
if(Model.EquityPercent < 50 && Model.EquityPercent >= 15){
    tableClass = "table-yellow";
}
if (Model.EquityPercentage < 15){
    tableClass = "table-red";
}
}
<div class="panel panel-primary text-center">
    <div class="panel-heading">@Model.AccountName</div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-hover table-condensed @tableClass">
                <tr>
                    <td>@Model.Status.Ask</td>
                </tr>
                <tr>
                    <td>@Model.EquityPercent</td>
                </tr>
                <tr>
                    <td>@Model.Weight</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="panel-footer">
        @Model.Status.LastUpdated
    </div>
</div>

Open in new window


Giannis
0
 
Julian HansenConnect With a Mentor Commented:
The standard way of solving this is
Put your unchanging styles in your css
and then
a) Add style tags to the elements that need specific styling
OR
b) If your colour changes are static - i.e. they are a known set then you can define the colours as separate styles and then use a condition in your code to add the correct class to each element

So, either in-line overrides
<div class="panel ..." style="background: blue; border-color: red; color: green">

Open in new window


Or predefined classes
CSS stylesheet
...
.bg-blue {
   background: blue;
}
.border-red {
   border-color: red;
}
.fg-green {
  color: green;
}
...

Open in new window

HTML
<div class="panel ... bg-blue border-red fg-green"

Open in new window

0
All Courses

From novice to tech pro — start learning today.