Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-08-31
2
Medium Priority
?
94 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 59

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

715 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