Solved

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

Posted on 2016-08-31
2
50 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 51

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Data Saving(2) 2 25
Round up to 100% in .NET 10 43
How to use xmlReader and idatareader  ? 4 44
Bootstap Icons 3 19
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now