Code
Code

Reputation: 37

Setting multiple Div colours according to collection of class

I have created a class names "MetroColor". Created a collection. And returned it in view as Div. Below is the Model,Controller and View.

public class MetroColors
    {
        public string ColorName { get; set; }
        public string ColorHexCode { get; set; }
        public string ColorRgbCode { get; set; }
    }

Controller.

public ActionResult Index()
        {
            List<MetroColors> listMetroColors = new List<MetroColors>();

            listMetroColors.Add(new MetroColors() { ColorName = "TURQUOISE", ColorHexCode = "#1abc9c", ColorRgbCode = "rgb(26, 188, 156)" });
            listMetroColors.Add(new MetroColors() { ColorName = "EMERALD", ColorHexCode = "#2ecc71", ColorRgbCode = "rgb(46, 204, 113)" });
            listMetroColors.Add(new MetroColors() { ColorName = "PETER RIVER", ColorHexCode = "#3498db", ColorRgbCode = "rgb(52, 152, 219)" });
            ViewBag.CreateColorList = listMetroColors;
            return View();
        }

View.

@foreach (var item in ViewBag.CreateColorList)
{
    <div>@item.ColorName</div>
}

The div is getting created with the ColorNames. But I want the divs will get generate with the colours also, how it is mentioned inside the collection. How can I do that?

Upvotes: 0

Views: 35

Answers (1)

MoreThanChaos
MoreThanChaos

Reputation: 2092

Hope you were looking for this

@foreach (var item in ViewBag.CreateColorList)
{
    <div style="background: @item.ColorHexCode;">@item.ColorName</div>
}

Upvotes: 1

Related Questions