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>

@Shyju as table would be much better looking

Burst of Ice
– Burst of Ice

2016-08-24 16:10:48 +00:00
Commented Aug 24, 2016 at 16:10 — Burst of Ice
– Burst of Ice, Commented Aug 24, 2016 at 16:10
I posted an answer to do that.

Shyju
– Shyju

2016-08-24 16:12:09 +00:00
Commented Aug 24, 2016 at 16:12 — Shyju
– Shyju, Commented Aug 24, 2016 at 16:12

Shyju · Accepted Answer · 2016-08-24 16:09:36Z

1

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>

answered Aug 24, 2016 at 16:09

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Burst of Ice Over a year ago

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?

Shyju Over a year ago

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 Over a year ago

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?

Shyju Over a year ago

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 Over a year ago

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; }     } }

|

Collectives™ on Stack Overflow

How to parse json to html in .net

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related