Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I have a table which will be a Master Color Table and therefore I will list around 1800 Colors by PMS number and will also have the Color Hex for each PMS number. I want to dislpay the Color dependent on the Hex in the cell that contains the HEX. How should I go about this. Just a newby and struggling a little. TIA

What I have tried:

<tbody>
            @foreach (var item in Model)
                {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Colour_MasterPms)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Colour_Master_Family)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ColorHex)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Ink)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Paint)
                    </td>
                    <td>
                        <a asp-action="Edit" asp-route-id="@item.Id"> class="bi bi-pencil-square"></a>  |
                        <a asp-action="Delete" asp-route-id="@item.Id">^__i class="bi bi-trash"></a>
                    </td>
                </tr>

                }
        </tbody>
    </table>
Posted
Updated 21-Jan-23 20:23pm
v3

1 solution

I am not sure where you want to put it, so here I have it in a div:
XML
<div style="background-color: @Html.Raw(item.ColorHex); width:20px; height:20px;">
    @Html.Raw(item.ColorHex)
</div>

UPDATE

So this line?
XML
@Html.DisplayFor(modelItem => item.ColorHex)

@Html.DisplayFor only emits text. The answer is the same, you need to wrap a div or span around the text. Or you can set the color on the Table cell itself.

Here it is wrapped around your element:
XML
<td style="background-color: @Html.Raw(item.ColorHex);">
    @Html.DisplayFor(modelItem => item.ColorHex)
</td>
 
Share this answer
 
v3
Comments
Steveb1307 21-Jan-23 23:42pm    
Hi Graham, what I want to do is colour the individual hex codes in the table with that color. Eg if in the table i have "#111111" than that cell should be black.I can see I have not explained to well. Hope this helps. I was trying to do something at the " @foreach (var item in Model)" but not sure!!!
Graeme_Grant 22-Jan-23 1:55am    
see my updated solution
Steveb1307 22-Jan-23 2:49am    
Thanks Graham. I felt sure when looking at this code but unfortunately nothing changed. Sadly I am unable to post a screen shot for you to see. Is there a provision on here to PM you a screen shot? Thanks'
Graeme_Grant 22-Jan-23 2:54am    
I have a live test here that works. Is you variable a string and are you confirming that the output is a valid color value - eg: #123456 or Rgb(...) or Hsl(...) ... if not valid, then it won't work. Use your web browser dev tools to inspect what you are emitting.

<table>
    @foreach (PantoneColorModel color in Model.Colors)
    {
        <td style="background-color: @color.ColorHex;">@Html.DisplayFor(model => color.Name)</td>
    }
</table>

emits:
<table>
	<tbody>
		<tr>
			<td style="background-color: #ff0000;">Red</td>
		</tr>
	</tbody>
</table>

My Controller method:
public IActionResult Index()
{
    PantoneColorList list = new PantoneColorList();
    list.Colors.Add(new PantoneColorModel { Name = "Red", ColorHex = "#ff0000" });

    return View(list);
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900