Home MVC Razor - Applying colours to dynamically generated div tags
Reply: 1

MVC Razor - Applying colours to dynamically generated div tags

James Cheevers
1#
James Cheevers Published in 2017-09-13 11:56:53Z

I have a small program that is working (mostly). It's returning an Item Code from a database and returning a quantity for that code. I then have a @foreach block of code in Razor to dynamically create divs that contain the name and quantity. In the rest of the code there are Knockout functions to update the display automatically. However... the issue I'm having is trying to apply a different background colour to each div.

@foreach (var x in Model.Quantities)
{
    int itemCode = x.ItemEncode;
    string itemName = "";
    int quantity = x.Quantity;
    switch (itemCode)
    {
        case 11:
        <style>.getcolour {background-color: blue}</style>
            itemName = "Item A";
            break;
        case 12:
            <style>.getcolour {background-color: skyblue}</style>
            itemName = "Item B";
            break;
        case 21:
            <style>.getcolour {background-color: red}</style>
            itemName = "Item C";
            break;
        case 31:
            <style>.getcolour {background-color: pink}</style>
            itemName = "Item D";
            break;
        case 41:
            <style>.getcolour {background-color: purple}</style>
            itemName = "Item E";
            break;
        case 61:
            <style>.getcolour {background-color: green}</style>
            itemName = "Item F";
            break;
    }


    <div class="getcolour">
        <h3>@Html.Raw(itemName)</h3>
        <hr />
        <h2>@Html.Raw(quantity)</h2>
    </div>
}

The itemNames and Quantities display correctly so the foreach block is working but every div is rendered with the last colour (green) in the Switch statement. Any advice on applying the colours correctly will be much appreciated.

Siby Thomas
2#
Siby Thomas Reply to 2017-09-13 13:41:47Z

Please try this.

@foreach (var x in Model.Quantities)
{
    int itemCode = x.ItemEncode;
    string itemName = "";
    int quantity = x.Quantity;
    string bgColor = "";
    switch (itemCode)
    {
        case 11:
            bgColor = "blue";
            itemName = "Item A";
            break;
        case 12:
            bgColor = "skyblue";
            itemName = "Item B";
            break;
        case 21:
            bgColor = "red";
            itemName = "Item C";
            break;
        case 31:
            bgColor = "pink";
            itemName = "Item D";
            break;
        case 41:
            bgColor = "purple";
            itemName = "Item E";
            break;
        case 61:
            bgColor = "green";
            itemName = "Item F";
            break;
        default: break;
    }

    <div style="background-color:@bgColor">
        <h3>@Html.Raw(itemName)</h3>
        <hr />
        <h2>@Html.Raw(quantity)</h2>
    </div>
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.39624 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO