Dynamically change the color of div according to database

Question

I want to have a webpage with small boxes which indicate a color according to the value in database. For example: if status is busy in database, the div color is red and so on.

HTML:

<tr>
    <td class="dclass">
        <div id="l1r1" class="top"></div>                   
        <div id="l1r2" class="top"></div>
        <div id="l1r3" class="bottom"></div>
        <div id="l1r4" class="bottom"></div>
    </td>
</tr>

CSS:

.top, .bottom 
{
    height: 8px;
    width: 33%;
    border: 1px solid;
    border-color: black;
    float:left;
    margin:1.2px;
}

Controller:

 public class HomeController : Controller
 {       
     public ActionResult Index()
     {             
         MySQL msql = new MySQL();                          
         List<string> status = msql.SelectList("Select status from table");                     
         for (int i = 0; i < status.Count; i++)
         {
             //populate values(color) to div according to the status
         }
         return View();
     }   
}

I want to use the div id in the controller to populate the div and I am not sure how to do that. Any suggestions would be appreciated. Thank you.

Answer 1

First of all, you are using ASP.Net MVC, of which MVC stands for Model, View, Controller.

Apparently (from the code you are showing) you have a view (Index.cshtml) and a controller (HomeController.cs) already. You are missing a Model.

You will have to create a model that contains the values that you want to display in your View. I assume that you are using Razor, so to render a value from your model you write something like:

@Model.Value

In the correct places in your view.

I will suggest to create a new class that will contain your model and a calculated property to map statuses to colour. Something like:

namespace Your.Namespace
{
    // use some nice name for your model
    public class BoxStatusModel  
    {
       public int BoxID { get; set; }
       public string CurrentStatus { get; set; }

       public string Color
       {
          get
          {
             switch(CurrentStatus)
             {
                case "Ok":
                  return "Green";
                case "Warning":
                   return "Yellow";
                case "Error":
                   return "Red";
                default:
                    return "";
             }
          }
       }
    }
} 

And in your controller you will populate like:

 public class HomeController : Controller
 {       
     public ActionResult Index()
     {             
         MySQL msql = new MySQL();                          

         var results = msql.SelectList("Select columns from table");

         // create your collection of the correct size since the beginning
         var model = new List<BoxStatusModel>(results.Count);
         for (int i = 0; i < results.Count; i++)
         {
             model.Add(new BoxStatusModel() {
                // I am not familiar with the MySQL but should be something like this
                BoxID = results[i].GetValue("BoxID");
                CurrentStatus = results[i].GetValue("CurrentStatus");
             });
         }
         return View(model);
     }   
}

Then, you have to define the model type you are using in your View and you will be able to access the properties and use them to render the status as a color.

<!-- Your model is a list of BoxStatusModels -->
@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top @boxStatus.Color">
    }
    </td>       
</tr>
[...] // table footer?
</table>

In this case you will also have to create a CSS class for each color:

.Red {
   background-color: Red;
}   
.Yellow {
   background-color: Yellow;
}   
.Green {
   background-color: Green;
}   

Other possibility is to use directly the CurrentStatus Property and render it as the class name. Something like

@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top @boxStatus.CurrentStatus">
    }
    </td>       
</tr>
[...] // table footer?
</table>

In this case you will also have to create a CSS class for each Status:

.Error {
   background-color: Red;
}   
.Warning {
   background-color: Yellow;
}   
.Ok {
   background-color: Green;
}   

Another (messier) option is use the color property and render it in the style attribute of the div. Like:

@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top" style="background-color:@boxStatus.color">
    }
    </td>       
</tr>
[...] // table footer?
</table>

The idea is that your controller populates your model from the database and then its properties can be rendered (as text) in whatever form you want in your view.