How to parse json to html in .net

Question

I am using the MVC template from .net and I can show my json but now i want to parse it to html, preferrably in a table, so it looks better.

I get the json from my HomeController.cs to my View which is About.cshtml but it's just the json string, so it looks horrible.

public class HomeController : Controller
{
    public JsonResult TestJson()
    {
        var client = new WebClient();
        var response = client.DownloadString(new Uri("http://localhost:8080/projecten/api/leerlingen"));

        var someObject = JsonConvert.DeserializeObject(response);

        return new JsonResult() { Data = someObject, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public ActionResult About()
    {
        var client = new WebClient();
        var json = client.DownloadString(new Uri("http://localhost:8080/projecten/api/leerlingen"));
        //parse json
        ViewBag.Message = json;
        return View();
    }
}

this it the json

[{"inschrijvingsNummer":"0001","naam":"John Smith","email":"[email protected]","evaluatieNummer":"270"},
{"inschrijvingsNummer":"0002","naam":"Joe Bloggs","email":"[email protected]","evaluatieNummer":"370"}]

to html with .net i show it in this page (About.cshtml)

@{
ViewBag.Title = "Evaluaties";
}
<h2>@ViewBag.Title.</h2>
<p>@ViewBag.Message</p>

Solution

You should basically create a class which represent the data in your json array.

public class FancyPerson
{
    public string InschrijvingsNummer { get; set; }
    public string Naam { get; set; }
    public string Email { get; set; }
    public string EvaluatieNummer { get; set; }
}

and when you get the json string (which contains an array of items) from your http call, de-serialize it to a collection of this class.

var items = Newtonsoft.Json.JsonConvert.DeserializeObject<IEnumerable<FancyPerson>>(json);
ViewBag.Message = items;

Now in your view, you just need to cast this ViewBag item to List of FancyPerson object's. You can loop through the items and show it in table rows.

@{
    var items = (List<FancyPerson>) ViewBag.Message;
}
<table>
@foreach (var item in items)
{
    <tr>
        <td>@item.Naam</td>
        <td>@item.Email</td>
    </tr>
}
</table>

Comments

[Burst of Ice]

Thanks for the help already. Where do I put the class FancyPerson? So I deserialize it after I do an http call, what does this do exactly?

[Dushan Perera]

You can put that anywhere in your project. your http call basically returns a string (which has an array of items in string format). Desirialize method will convert items in the array to a single object of this class.

[Burst of Ice]

When I copy your code it gaves a build error at the FancyPerson it says: The type or namespace name 'FancyPerson' could not be found. Yet made a class called FancyPerson and put it in a new folder, what do I do wrong?

[Dushan Perera]

Did you create a class or a namespace ? Is it under a namespace ? Then you have to include that namespace with a using YourNameSpaceName or use the Fully qualified name like YourNameSpaceName.YourClassName

[Burst of Ice]

I put it here namespace ASPNetMVCExtendingIdentity2Roles.Domain { public class FancyPerson { public string InschrijvingsNummer { get; set; } public string Naam { get; set; } public string Email { get; set; } public string EvaluatieNummer { get; set; } } }

[Dushan Perera]

Then either you have to use using ASPNetMVCExtendingIdentity2Roles.Domain; in other places where you use this class (Ex: your controller) or use the fully qualified name ASPNetMVCExtendingIdentity2Roles.Domain.FancyPerson`

[Burst of Ice]

I have another url which only gets 1 FancyPerson but I don't seem to find how to parse this as a FancyPerson, I know it's not a list this var eenLeerling = (Projecten2.Domain.FancyPerson)ViewBag.Json; but that doesn't work, how do I do that?

[Dushan Perera]

@BurstofIce when you deserialize specify just FancyPerson instead of IEnumerable of FancyPerson.