Solved

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

Posted on 2016-08-31
2
59 Views
Last Modified: 2016-09-01
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
0
Comment
Question by:Dennis_Gundersen
2 Comments
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 250 total points
ID: 41779408
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
 
LVL 54

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 41779442
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

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I implement a "Select All" with this configuration...? 6 42
Outlook opens HTML email as text 4 23
Select case on click 3 16
Add shadow behind div 5 14
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question