Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2016-08-31
2
Medium Priority
?
115 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 1000 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 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

877 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