I am trying to show my data after json Deserialization on the web.Every data working perfectly except the Images. It shows only image sign on the web but now the actual images.My Code for controller class in where I deserialized Json object is as follows-
public ActionResult PlaceInformation(City objCityModel)
{
string name = objCityModel.Name;
ViewBag.Title = name;
var ReadJson = System.IO.File.ReadAllText(Server.MapPath(#"~/App_Data/" + name + ".json"));
RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
List<Poi> mycities = new List<Poi>();
foreach (var item in json.poi)
{
Poi obj = new Poi()
{
Name = item.Name,
Shorttext = item.Shorttext,
GeoCoordinates = item.GeoCoordinates,
Images = item.Images,
};
mycities.Add(obj);
}
ViewBag.Cities = mycities;
return View();
}
Now in the view class I want to show every item from this json.But I am having error for images which I mentioned beside code. The error is:
An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. Parser Error Message: Unexpected "foreach" keyword after "#" character. Once inside code, you do not need to prefix constructs like "foreach" with "#"
My code is -
#model CallListService.Models.City
#{
Layout = null;
}
#{
ViewBag.Title1 = "Show Data";
}
#foreach (var item in ViewBag.Cities)
{
<h2>#item.Name</h2>
<p>#item.Shorttext</p>
<p>#item.GeoCoordinates.Longitude</p>
<p>#item.GeoCoordinates.Latitude</p>
#foreach (var image in item.Images) //Parser Error
{
<img src=#image >
}
}
Again if I only write in this way it works but image is not shown, only img sign is shown.
<img src=#item.Images>
I am not finding any solution for this.
This is screenshot of web page
SourceCode:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>PlaceInformation</title>
</head>
<body>
<div>
<h2>Nordertor</h2>
<p>The Nordertor is an old town gate in Flensburg, Germany, which was built around 1595. Today the landmark is used as a symbol for Flensburg.</p>
<p>9.43004861</p>
<p>54.79541778</p>
<img src="System.Collections.Generic.List`1[System.String]" />
<h2>Naval Academy M�rwik</h2>
<p>9.45944444</p>
<p>54.815</p>
<img src="System.Collections.Generic.List`1[System.String]" />
<h2>Flensburg Firth</h2>
</p>
<p>9.42901993</p>
<p>54.7959404</p>
<img src="System.Collections.Generic.List`1[System.String]" />
</div>
</body>
</html>
I am using following json file to get all data
{
"poi":[
{
"Name": "Nordertor",
"Shorttext": "The Nordertor is an old tows used as a symbol for Flensburg.",
"GeoCoordinates": {
"Longitude": 9.43004861,
"Latitude": 54.79541778
},
"Images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/266px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG"
]
},
{
"Name": "Naval Academy Mürwik",
"Shorttext": "The Naval Academy Mürwik is the main training e..",
"GeoCoordinates": {
"Longitude": 9.45944444,
"Latitude": 54.815
},
"Images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/MSM-hauptgebaeude.jpg/400px-MSM-hauptgebaeude.jpg"
]
},
{
"Name": "Flensburg Firth",
"Shorttext": "Flensburg Firth or Flensborg Fjordg and the villages Munkbrarup, Langballig, Westerholz, Quern, Steinberg, Niesgrau, Gelting, and Nieby.\n\n",
"GeoCoordinates": {
"Longitude": 9.42901993,
"Latitude": 54.7959404
},
"Images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Flensborg_Fjord_ved_bockholmwik.jpg/400px-Flensborg_Fjord_ved_bockholmwik.jpg"
]
}
]
}
Image tag will always expect path for that image
<img src="./images/name.jpg" />
or
<img src="http:/wwww.sitename.com/images/name.jpg" />
what does you Image contain image path or image byte?
if it contain image byte then it has to be rendered separately by creating an intermediate page
Change the inner loop to:
foreach (var image in item.Images) //without the `#`
{
<img src="#image" /> //with " and />
}
This should work if the specified file exists. (if it doesn't work, show the full error + html :-)
Related
I am trying to render formatted JSON as HTML using Razor Templates.
I am currently trying to do it like this:
<div>
<pre>
#JsonHelper.SerializeObject(item.AttributeValue, new Newtonsoft.Json.JsonSerializerSettings() {
Formatting = Newtonsoft.Json.Formatting.Indented })
</pre>
</div>
But once it gets to the browser, it is all on one line and looks something like this:
"{\"FieldA\":[{\"FieldAName\":\"start\",\"startValue\":\"startValue2\"},{\"FieldB\":\"FieldBsub\",\"FieldBValue\":\"SomeField\",\"Options\":[{\"ANumber\":1,\"Option\":\"LOL\"},{\"ANumber2\":2,\"Option\":\"LMAO\"},{\"ANumber3\":3,\"Option\":\"OTHER\"},{\"ANumber\":4,\"Option\":\"ROFL\"},{\"ANumber\":5,\"Option\":\"ROFL\"}]}],\"Choice\":\"yes\",\"fieldC\":\"yes\"}"
I am assuming the backslashes should be breaks that should be formatting it?
I am new to C# and I am pretty sure there is something wrong with the JSonHelper method? Maybe it is already a string?
Anyways I would like it to display like a formatted JSON in the browser view like this:
Just an example:
[
{
"_id": "5deeea2ed84c28fb633ecac8",
"index": 0,
"guid": "accc7f31-bfc7-4a42-9d76-a6f9f71e6f87",
"tags": [
"proident",
"aute",
"pariatur",
"cupidatat",
"officia",
"adipisicing",
"dolor"
],
"friends": [
{
"id": 0,
"name": "Alyson Scott"
},
{
"id": 1,
"name": "Ratliff Castaneda"
},
{
"id": 2,
"name": "Bernice Lester"
}
],
"greeting": "Hello, undefined! You have 6 unread messages.",
"favoriteFruit": "banana"
}
]
I have a string property in my model that I set to a formatted JSON string
public string PortfolioJson { get; set; }
public async Task<IActionResult> OnGetAsync(int? rid) {
PortfolioJson = JsonConvert.SerializeObject(item, Newtonsoft.Json.Formatting.Indented);
}
Then on the page I just output that. I also use a JS library to pretty print the JSON.
#section Styles {
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css" />
}
<div class="row">
<pre>
<code class="json">
#Model.PortfolioJson
</code>
</pre>
</div>
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
}
I'm trying to use Angular 6, angular CLI and MV Areas.For POC reasons I've named it Angular The idea was to have an angular app per Area. If this is a bad idea please let me know because maybe the whole concept is And for me it's a pain. This is the first time that I'm configuring it. Below is my example Area has a main controller which looks like this:
public class MainController : BaseController
{
[HttpGet]
public ActionResult Index()
{
return View();
}
}
And my Route config looks like this:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "mvc",
url: "{controller}/{action}/",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
// This is a catch-all for when no other routes match the request; let the Angular 2 router take care of it...
routes.MapRoute(
name: "default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2 app
);
//routes.MapRoute(
// name: "Default",
// url: "{controller}/{action}/",
// defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
}
I have my app folder in the main project directory, aslo files like angular.json and packages.json. I've created this using angular CLI
Below is an angular.josn file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "eagle-app",
"projects": {
"test-app": {
"root": "test-app/",
"sourceRoot": "test-app",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "eagle-app/dist/test-app",
"index": "Areas/ANGULAR/Views/Main/Index.cshtml",
"main": "eagle-app/test-app/main.ts",
"polyfills": "eagle-app/test-app/polyfills.ts",
"tsConfig": "eagle-app/test-app/tsconfig.app.json",
"assets": [
"test-app/favicon.ico",
"test-app/assets"
],
"styles": [
"eagle-app/test-app/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "eagle-app/test-app/environments/environment.ts",
"with": "eagle-app/test-app/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "test-app:build"
},
"configurations": {
"production": {
"browserTarget": "test-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "test-app:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "eagle-app/test-app/test.ts",
"polyfills": "eagle-app/test-app/polyfills.ts",
"tsConfig": "eagle-app/test-app/tsconfig.spec.json",
"karmaConfig": "eagle-app/test-app/karma.conf.js",
"styles": [
"eagle-app/test-app/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": [],
"assets": [
"test-app/favicon.ico",
"test-app/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"eagle-app/test-app/tsconfig.app.json",
"eagle-app/test-app/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"test-app-e2e": {
"root": "test-app-e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "test-app-e2e/protractor.conf.js",
"devServerTarget": "test-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "test-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "test-app-e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
}
}
My Index.cshtml from the Area looks like this:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/Areas/ANGULAR/Main/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<test-app>
</test-app>
#section scripts {
#Scripts.Render("~/Content/angular-ui")
}
</body>
</html>
As you can see I have an routingcomponent which looks like this:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { Sub1Component } from "./submodule1/sub1.component"
import { Sub2Component } from "./submodule2/sub2.component"
import { AppComponent } from "./app.component";
const routes: Routes = [
{ path: 'Sub1', component: Sub1Component },
{ path: 'Sub2', component: Sub2Component },
{
path: '',
redirectTo: '/Sub1',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I'm injecting this to my app.component which a loop that creates buttons for submodules like defined above and the view for it is in shared foler. The problem is I'm getting error like below. And I can't get seem to have the default route for sub1 to be loaded.
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'ANGULAR/Main'
Error: Cannot match any routes. URL Segment: 'ANGULAR/Main'
at ApplyRedirects.push.../node_modules/#angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
at CatchSubscriber.selector (router.js:1363)
at CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at TapSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at ApplyRedirects.push.../node_modules/#angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1382)
at CatchSubscriber.selector (router.js:1363)
at CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:83)
at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:61)
at TapSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push.../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
Anyway I have also a general question is the concept of having seperate apps for an Area is ok? Or maybe some of you have any experience with angular CLI, MVC5 Areas and Angular6? How it should be done. Thanks for you patience and help in advance. Below also are print screens how I have my project structured
Ok with a help of a friend in my team we've managed to solve the issue! The thing is in our MVC app we have also a angularjs (1.x) app and we've noticed that we have hash based urls. That lead us to finding the answer, that in our app module we should import this:
{ provide: LocationStrategy, useClass: HashLocationStrategy }
which get's imported from:
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
in the this looks like this:
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
, BrowserAnimationsModule
, HttpClientModule
, FormsModule
, SharedModule
, AppRoutingModule
],
providers: { provide: LocationStrategy, useClass: HashLocationStrategy }],
bootstrap: [AppComponent]
})
Also we had to delele the html part because we had sort of html in html. That his instead of having this:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/Areas/ANGULAR/Main/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<test-app>
</test-app>
#section scripts {
#Scripts.Render("~/Content/angular-ui")
}
</body>
We should have only this:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Styles.Render("~/Content/prime-ng-css")
<div id="test-app">
<test-app>
</test-app>
</div>
#section scripts {
#Scripts.Render("~/Content/mMonitor-ui")
}
This was the solustion for the problem i this specific case and config that we have
I'm fairly new to ASP.NET (have been coding in WPF a long time, but new to ASP) and I'm trying to create a dashboard application that shows four pie charts. I've followed the instructions on this link, but I either get a chart on the entire page, or a broken image (as if the <img> source is not valid)
Can someone please explain to me how to achieve this behavior? I just want to display a simple pie chart on my page, that's it.
Thanks! (and sorry if this is a duplicated post, I've found other similar questions but none using the Razor syntax)
EDIT - Here's my code:
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
</head>
<body>
<h1>Chart Example</h1>
<p>
The following chart is generated by the <em>ChartView.cshtml</em> file, but is shown
in this page.
</p>
<p><img src="ChartView.cshtml" /> </p>
</body>
</html>
My ChartView.cshtml: (located in the same folder as Index.cshtml)
#{
var myChart = new Chart(600, 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" });
if (myChart != null)
{
myChart.Write();
}
}
This is what I get on the browser:
You can't return a .cshtml file (unless you fiddle dangerously with various internal settings - not recommended).
You should be pointing to an action.
The easiest way to test this is by opening the src directly in the browser - in this case "ChartView.cshtml" and you should get a 404.
You'll need to add an action to your controller that returns the view.
public HomeController : Controller
{
public ActionResult ChartView()
{
return View();
}
then
<img src='#Url.Action("ChartView", "Home")' alt="Chart"/>
You can test this by opening in the browser:
/Home/ChartView
(this assumes that ChartView.cshtml is in the folder "Views/Home")
As you're new to MVC, quick explanation. There a 'routeConfig.cs' which routes incoming urls to an action(method) on a controller(class). The controller loads the view (cshtml) and applies all the server-side code then returns the rendered html to the user.
You do not navigate directly to cshtml pages but navigate instead to actions via the url.
The default route config gives you urls such as:
http://[site]/[controller]/[action]
Note that [controller] does not include "Controller", so "HomeController" becomes "/Home/"
Also, by convention, if you don't specify a view name in 'View()' then it will look in your solution folder "/Views/[controller]/[action].cshml' (among other locations such as '/Views/Shared/[action].cshtml' (also configurable, but these are the defaults).
you easely can combine
http://morrisjs.github.io/morris.js/index.html
in mvc (razor syntax)
or you can use chart helper
http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart
change to:
#{
var myChart = new Chart(600, 400)
.AddTitle("Employees")
.AddSeries("SomeName",chartType: "Pie",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" });
if (myChart != null)
{
myChart.Write();
}
}
you have to lunch it in iis or some development server
net and i just want to read a Json and want to update or add the nodes in JSON. I have used Angular and PHP for this and i was able to read and write the file easily. But My server is now IIS, So i want to parse JSON file on C# and want to change the values in it.
I googled a lot and found a lot of solution for JSON.NET or Newtonsoft.Json. I have only one index.aspx page, where i am successfully able to read the json file as below
string json = System.IO.File.ReadAllText(Server.MapPath("json/myJsonFile.json"));
Response.Write(json);
And this is printing JSON text in web easily. But i am not able to parse it properly. I am writing code in Notepad++, as i don't have Visual Studio and don't want to install. I heard that .net code is open source now, So i tried this from Notepad++. Now please let me know, how to Parse JSON without using Visual Studio?
My code in more detail is as below
index.aspx
<%# Page Language="C#" %>
<!Doctype html>
<html>
<body>
<form action="index.aspx" method="post" enctype="multipart/form-data" runat="server">
<input type="text" id="empname" name="empname" placeholder="Enter Full Name"/>
<p><button id="addBtn" class="btn btn-success" onclick='return addEmployee()' type="submit">Add</button> <button id="removeBtn" class="btn btn-success" onclick='removeEmployee()'>Remove</button></p>
</form>
<%
string ename = Request.Form["empname"];
string json = System.IO.File.ReadAllText(Server.MapPath("json/myJsonFile.json"));
Response.Write(json);
//Here i want to parse JSON file
%>
</body>
</html>
Javascript
function addEmployee()
{
if($("#empname").val() == "")
{
alert("Please type Name.");
$("#empname").focus();
return false;
}
return true;
}
JSON
[
{
"ID": "ID01",
"Name": "First One"
},
{
"ID": "ID02",
"Name": "Second One"
}
]
Remember i am writing code in Notepad++, So please let me know accordingly. Thanks in advance.
JavaScriptSerializer has been deprecated and Microsoft recommends using Json.NET.
Download Json.NET here.
In your aspx page link to Json.NET:
<%# Assembly Name="Newtonsoft.Json" %>
<%# Import namespace="Newtonsoft.Json" %>
Make a class for Employee:
public class Employee
{
public string ID { get; set; }
public string Name { get; set; }
}
Add a reference to Json.NET:
using Newtonsoft.Json;
Deserialize your Json from disk:
List<Employee> list = JsonConvert.DeserializeObject<List<Employee>>(json);
// ...
list.Add(employee);
// deserialize + save
string json = JsonConvert.SerializeObject(list);
How can I iterate over the images in JSON of following format? Length of images collection can be arbitrary. Can I manipulate it to make it a list, or what options do I have to parse this?
images: {
0: {
filename: "image1.jpg"
},
1: {
filename: "image2.jpg"
},
2: {
filename: "image3.jpg"
},
}
One possible solution would be to create a dynamic representation of your json:
dynamic jsonData = JsonConvert.DeserializeObject(#"{
images: {
0: {
filename: ""image1.jpg""
},
1: {
filename: ""image2.jpg""
},
2: {
filename: ""image3.jpg""
}
}
}");
foreach(var item in jsonData["images"])
{
//Do something
}
If you have a read of this SO question, you'll notice that JSON.NET is a recommended library to use for situations like this.
You could try using the DataContractJsonSerializer to create objects from JSON input, but when I tried it just now, I couldn't get it to work with a collection of items in the JSON string.
You can do this with vanilla javascript like this:
for (objectName in data["images"]) {
html += data["images"][objectName]["filename"] + "<br />"
}
Full HTML file example below
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
var data = {
"images": {
"0": {
"filename": "image1.jpg"
},
"1": {
"filename": "image2.jpg"
},
"2": {
"filename": "image3.jpg"
}
}};
var html = '';
for (objectName in data["images"]) {
html += data["images"][objectName]["filename"] + "<br />"
}
document.getElementById("result").innerHTML = html;
</script>
</body>
</html>
I ended up figuring it out - although may not be best practice it worked in this case
var imageHoldingList = new List<VehicleImagesModel>();
var connectionResponse = JsonConvert.DeserializeObject<dynamic>(results);
var jImage = connectionResponse["response"]["vehicles"]["images"].Children();
foreach (var image in jImage)
{
var h = new VehicleImagesModel
{
Filename = image.First.filename.ToString(),
Caption = image.First.caption.ToString()
};
imageHoldingList.Add(h);
}