Freki Freki - 3 months ago 7
JSON Question

Show a string from json as color in .net

I am using a MVC template and I get json from my backend by url and deserialize it with Json.net. The backend is from a different school project and they ask if I could show it on a .net website so I'm doing that but I saved the colors as strings so if I show it it's just #FFFFF, and I want it to show either the name of the color or the color itself (or a dot with the color).
I get the json from my controller:

public ActionResult About()
{
if (User.IsInRole("Begeleider"))
{
var client = new WebClient();
var jsonLeerlingen = client.DownloadString(new Uri("http://localhost:8080/projecten/api/leerlingen"));
var leerlingen = Newtonsoft.Json.JsonConvert.DeserializeObject<IEnumerable<Leerling>>(jsonLeerlingen);
var jsonEvaluaties = client.DownloadString(new Uri("http://localhost:8080/projecten/api/evaluaties"));
var evaluaties = Newtonsoft.Json.JsonConvert.DeserializeObject<IEnumerable<Evaluatie>>(jsonEvaluaties);
ViewBag.Message = leerlingen;
ViewBag.Evaluaties = evaluaties;

}
return View();
}
}


this is my .cshtml

@{
ViewBag.Title = "Evaluaties";
var evaluaties = (List<Projecten2.Domain.Evaluatie>)ViewBag.Evaluaties;}
<h2>@ViewBag.Title.</h2>
<h4>Evaluaties</h4>
<table>
<tr>
<th>Evaluatienummer</th>
<th>Rijtechniekenscore</th>
<th>Verkeerstechniekenscore</th>
<th>Color</th>
</tr>
@foreach (var evaluatie in evaluaties)
{
<tr>
<td>@evaluatie.evaluatieNummer</td>
<td>@evaluatie.rijtechniekenScore</td>
<td>@evaluatie.verkeerstechniekenScore</td>
<td>@evaluatie.color</td>
</tr>
}
</table>


the
@evalutie.color
returns #FFFFF, this is what I want to show differently. Any way how to do this?

Answer

Here you go! This worked for me. Let me know if you have questions.

Controller:

public ActionResult About()
{
    // This is just to generate the Evaluaties
    List<Evaluatie> evaluaties = new List<Evaluatie>()
    {
        new Evaluatie()
        {
            evaluatieNummer = 1,
            rijtechniekenScore = 100,
            verkeerstechniekenScore = 200,
            color = "#FFFFFF"
        },
        new Evaluatie()
        {
            evaluatieNummer = 2,
            rijtechniekenScore = 200,
            verkeerstechniekenScore = 300,
            color = "#AAAAAA"
        },
        new Evaluatie()
        {
            evaluatieNummer = 3,
            rijtechniekenScore = 300,
            verkeerstechniekenScore = 400,
            color = "#CCCCCC"
        }
    };

    ViewBag.Message = "Your app description page.";
    ViewBag.Evaluaties = evaluaties;
    return View();
}

Cshtml:

@{
    ViewBag.Title = "Evaluaties";
    var evaluaties = (List<MvcApplication1.Models.Evaluatie>)ViewBag.Evaluaties;}
<h2>@ViewBag.Title.</h2>
<h4>Evaluaties</h4>
<table>
    <tr>
        <th>Evaluatienummer</th>
        <th>Rijtechniekenscore</th>
        <th>Verkeerstechniekenscore</th>
        <th>Color</th>
    </tr>
    @foreach (var evaluatie in evaluaties)
    {
        <tr>
            <td>@evaluatie.evaluatieNummer</td>
            <td>@evaluatie.rijtechniekenScore</td>
            <td>@evaluatie.verkeerstechniekenScore</td>
            <td style="color:@(evaluatie.color);">@evaluatie.color</td>
        </tr>
    }
</table>