@inherits Custom.Hybrid.Razor14

@{
  const int old = 60;
  const string isOld = "this guy is old";
  const string notOld = "this guy is not old";
  var age = 62;
}
<p>
  Show old/not old based on Terry's age using
  <code>@@if</code> and <code>@@else</code>:
  @if (age > old) {
    @isOld
  } else {
    @notOld
  }
</p>
<p>
  Ternare show old/not old based on age <code>? ... : </code>:
  @(age > old ? isOld : notOld)
</p>

@inherits Custom.Hybrid.Razor14

@{
  var pets = new string[] { "dog", "cat", "mouse"};
  var owners = new string[] { "Daniel", "John", "Markus"};
}
<h4>
  Loop through Pets using <br>
  <code>@@foreach (var thing in list)</code>
</h4>
<ul>
  @foreach (var pet in pets) {
    <li>@pet</li>
  }
</ul>
<h4>
  Loop through Pets using <br>
  <code>@@for (counter; condition; increment)</code>
</h4>
<ul>
  @for(var i = 0; i < pets.Length; i++) {
    <li>@pets[i] - owned by @owners[i]</li>
  }
</ul>

@inherits Custom.Hybrid.Razor14

@{
  var normalText = "this is text, it doesn't have tags";
  var htmlText = "this string <em>has</em> html <strong>tags</strong>";
}
<h4>Output values (HTML-source shown)</h4>
<ul>
  <li>@normalText</li>
  <li>@htmlText</li>
</ul>
<h4>Output values (HTML is used; maybe security risk)</h4>
<ul>
  <li>@Html.Raw(normalText)</li>
  <li>@Html.Raw(htmlText)</li>
</ul>

@inherits Custom.Hybrid.Razor14

<p>
  You can just use any Emoji in your source.
  Or you pick them with ternary operations.
</p>
<ul>
  <li>This is just an emoji: 🚀</li>
  <li>Pick emoji from true ⇒ @(true ? "✔️" : "❌")</li>
  <li>Pick emoji from true ⇒ @(false ? "✔️" : "❌")</li>
</ul>

@inherits Custom.Hybrid.Razor14

@functions {
  string Boolmoji(bool value) { return value ? "👍🏽" : "👎🏽"; }
  
  // Variable keeping the random number generator
  private Random generator = new Random(DateTime.Now.Second);

  // Get random number between 0 and 100
  public int Random100() {
    return generator.Next(0, 100);
  }
}
@{
  // Simple Hybrid (Dnn/Oqtane) Template Delegate
  Func<string, dynamic> BoldLi = @<li>
    <strong>
      @Html.Raw(item)
    </strong>
  </li>;
}
<h4>Reuse some functions inside this file</h4>
<ul>
  <li>Boolmoji(true) ⇒ @Boolmoji(true)</li>
  <li>Boolmoji(false) ⇒ @Boolmoji(false)</li>
  <li>Random number function: @Random100()</li>
  <li>Random number function: @Random100()</li>
  @BoldLi("this is a bold item in a list using a Template Delegate")
  @BoldLi("another bold item in a list using a Template Delegate")
</ul>

@inherits Custom.Hybrid.Razor14

<h4>Call some external Razor files</h4>
<ol>
  <li>@Html.Partial("../razor-partial/line.cshtml")</li>
  <li>@Html.Partial("../razor-partial/line.cshtml")</li>
</ol>

@inherits Custom.Hybrid.Razor14

<h4>Call some external Razor files</h4>
<ol>
  <li>
    @Html.Partial("../razor-partial/Box Typed.cshtml", new {
      Label = "Hello, this is the first line"
    })
  </li>
  <li>
    @Html.Partial("../razor-partial/Box Typed.cshtml", new {
      Label = "Second line!",
      Color = "red"
    })
  </li>
  <li>
    @{
      var label = "Third line!"; // if variable name is the same...
      var color = "green";  // if variable name is the same...
    }
    @Html.Partial("../razor-partial/Box Typed.cshtml", new { label, color })
  </li>
</ol>

@inherits Custom.Hybrid.Razor14

@{
  // helper library to say hello & create QR codes
  var qrLib = CreateInstance("../../shared/SharedFunctions.cs");
}
<h4>Call some Code in External CSharp Files</h4>
<ol>
  <li>Hello from shared lib: @qrLib.SayHello()</li>
  <li>
    QR Code from shared lib
    <img loading="lazy" src='@qrLib.QrPath("https://2sxc.org")' width="75px">
  </li>
</ol>

@inherits Custom.Hybrid.Razor14


@{
  // helper library which will return object
  var lib = GetCode("./ReturnObjects.cs");
}
<h4>Working with anonymous objects</h4>
<p>
  The only way to get values from an anonymous object 
  created elsewhere is using 
  <code>AsDynamic(... as object)</code>.
  Everything else will cause difficulties.
</p>
@{
  // Various ways to (try) to get values from an anonymous object
  var anon = lib.GetAnonymous();
  var dynAnon = AsDynamic(anon);
}
<ol>
  <li>Anon: @anon</li>
  <li>Anon Type: @anon.GetType()</li>
  <li>anon.Name 🚫: @TryGet(() => anon.Name)</li>
  <li>dynAnon.Name ✅: @dynAnon.Name</li>
</ol>

<h4>Working with <code>ITyped</code> objects</h4>
<p>
  If the returned object is based on <code>ITyped</code>, things are a bit easier.
  But you must still ensure that Razor knows the type.
</p>
@{
  // If we know what type it is, we can force-cast it
  var typedDyn = (ToSic.Sxc.Data.ITyped)lib.GetTyped();
}
<ol>
  <li>Name ✅: @typedDyn.String("Name")</li>
</ol>

<h4>Working with real objects</h4>
<p>
  If the returned object is based on a class defined inside the code, things are a bit easier.
</p>
@{
  // Various ways to (try) to get values from real object
  // note that for Razor, the type is `dynamic`
  var person = lib.GetPerson();
  var dynPerson = AsDynamic(person);
}
<ol>
  <li>Person: @person</li>
  <li>Person Type: @person.GetType()</li>
  <li>Person.Name ✅: @person.Name</li>
  <li>dynPerson.Get("Name") ✅: @TryGet(() => dynPerson.Get("Name"))</li>
</ol>


<h4>Working with dictionaries</h4>
@{
  var dicDyn = lib.GetDictionary();
  var dic = dicDyn as System.Collections.Generic.Dictionary<string, string>;
}
<p>
  If the returned object is based on a dictionary, things are a bit easier.
  This is because <code>dynamic</code> will be able to work with it, but it's not type safe.
</p>
<ol>
  <li>dicDyn: @dicDyn</li>
  <li>dicDyn Type: @dicDyn.GetType()</li>
  <li>dicDyn Count ✅: @dicDyn.Count</li>
  <li>dicDyn["Name"] ✅: @dicDyn["Name"]</li>
  <li>dic: @dic</li>
  <li>dic Type: @dic.GetType()</li>
  <li>dic Count ✅: @dic.Count</li>
  <li>dic["Name"] ✅: @dic["Name"]</li>
</ol>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Douglas Adams, the current Content-item</h4>
@Kit.Image.Img(Content.Field("Mugshot"), settings: "Square", width: 100, imgClass: "rounded-circle")
<ol>
  <li>Content item Name:        @Content.FirstName @Content.LastName</li>
  <li>Content item Birthday:    @Content.Birthday.ToString("d")</li>
  <li>Content item Award:       @Content.Awards.Name</li>
  <li>Content item Mugshot URL: @Content.Mugshot</li>
  <li>Content item Mugshot Raw String: @(Content.Get<string>("Mugshot"))</li>
</ol>
<h4>Loop the persons in the Query for this view</h4>
<ul>
  @foreach (var person in AsList(Data)) {
    <li>
      @if (Text.Has(person.Mugshot)) {
        @Kit.Image.Img(Content.Field("Mugshot"), settings: "Square", width: 50, imgClass: "rounded-circle")
      }
      @person.FirstName @person.LastName
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Douglas Adams on <code>Content</code></h4>
<p>
  Note: The Biography contains a LOT of HTML...
</p>
@{
  // scrubHtml will clean up Html tags; there are more options
  var bio = Kit.Scrub.All(Content.Biography);

  // Text.Ellipsis uses RazorBlade
  var teaser = Text.Ellipsis(bio, 100);
}
<p>
  <strong>Teaser</strong> (using .Raw() for Umlauts): <br>
  <em>@Html.Raw(teaser)</em>
</p>
<hr>
<div>
  <strong>Now as rich HTML</strong> <br>
  (drag size to see responsiv behavior) <br>
  @Html.Raw(Content.Biography)
</div>

@inherits Custom.Hybrid.Razor14

<h4>A Person on <code>Content</code></h4>
@{
  var itemPres = Content.Presentation;
}

<p>
  Note that the following should be @itemPres.Color (probably green)
</p>
<p style='color: @itemPres.Color'>
  @Content.Title
</p>

@inherits Custom.Hybrid.Razor14

</hide-silent>
<h4>Use <code>.Awards</code> to get one</h4>
<ol>
  <li>Award ID:          @Content.Awards.Id</li>
  <li>Award Name:        @Content.Awards.Name</li>
  <li>Award Name (Path): @Content.Awards.Name</li>
</ol>



<h4>Use <code>.Awards</code> to get all</h4>
<span>Award Count:       @Content.Awards.Count</span>
<ol>
  @foreach (var award in AsList(Content.Awards as object)) {
    <li>Award: @award.Name</li>
  }
</ol>

@inherits Custom.Hybrid.Razor14

<h4>Douglas Adams, the current item (MyItem)</h4>
<p>Use <code>.Url(…)</code> to resolve file references such as <code>file:72</code></p>
<ol>
  <li>Mugshot field Value:  @Content.Mugshot</li>
  <li>Mugshot URL:          @Content.Mugshot</li>
  <li>
    Mugshot Picture <br>
    @Kit.Image.Picture(Content.Mugshot, settings: "Square", width: 100, imgClass: "rounded-circle")
  </li>
</ol>

@inherits Custom.Hybrid.Razor14
@using System.Linq

<h4>Douglas Adams, the current item (Content)</h4>
@{
  var folder = AsAdam(Content, "Mugshot") as ToSic.Sxc.Adam.IFolder;
  var file = folder.Files.First();
  var sizeInfo = file.SizeInfo;
}
<ol>
  <li>File name:        @file.Name</li>
  <li>File extension:   @file.Extension</li>
  <li>Size (bytes):     @file.Size</li>
  <li>SizeInfo:         @sizeInfo.BestSize.ToString("#.#") @sizeInfo.BestUnit</li>
</ol>

<p>Every file-field is actually a folder...</p>

<ol>
  <li>Files count:    @folder.Files.Count()</li>
  <li>Sub-Folders:    @folder.Folders.Count()</li>
</ol>
<p>
  ...which could hold many files. 
  If you want to show them, you need <code>Kit.Image...</code></p>
<ol>
  @foreach (var f in folder.Files) {
    <li>@f.Name <br> @Kit.Image.Picture(f, width: 100)</li>
  }
</ol>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@functions {
  // quick helper to make the output nicer
  string Boolmoji(bool value) { return value ? "✅" : "🔲"; }
}
@{
  var keys = new [] { "LastName", "IsAlive", "Haters", "Birthday",
    "FirstName", "Awards", "Sex", "Mugshot", "Biography" };
}
<h4>Inspect the fields of an Item</h4>
<ol>
  @foreach (var key in keys) {
    var value = Content.Get(key);
    <li>
      @Boolmoji(value != null || (value is string && Text.Has(value)))
      @key:
      @value
    </li>
  }
</ol>

<h4>Let's do some manual inspection</h4>
<ol>
  <li>@Boolmoji(Text.Has(Content.Firstname)) "FirstName" exits and not empty?</li>
  <li>@Boolmoji(Text.Has(Content.hello)) "FirstName" exits and not empty?</li>
</ol>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

<h4>Loop persons which were added to this view</h4>
<ul>
@foreach (var person in AsList(Data)) {
  <li>
    @if (Text.Has(person.Mugshot)) {
      @Kit.Image.Img(person.Field("Mugshot"), settings: "Square", width: 50, imgClass: "rounded-circle")
    }
    @person.FirstName @person.LastName
  </li>
}
</ul>

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade


<ul>
  @foreach (var item in AsList(Data)) {
    var pres = item.Presentation;
    
    var hType = pres.HeadingType;
    var title = item.Title + (pres.Highlight == true ? " 🌟" : "");
    <li>
      Create a heading tag the size specified in Presentation
      @if (Text.Has(hType)) {
        @Kit.HtmlTags.Custom(hType).Wrap(title)
      } else {
        @title
      }
      <br>
      <em>FYI: Heading @(Text.Has(hType) ? "none" : hType)</em>
      <div style='color: @pres.Color'>
        @item.Html("Contents")
      </div>
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14

<h3>@Header.Title</h3>
<ul>
  @foreach (var item in AsList(Data)) {
    <li>
      @item.EntityTitle
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14

<h4>Loop persons in Query of this view</h4>
<ul>
  @foreach (var person in AsList(Data)) {
    <li>
      @Kit.Image.Picture(person.Mugshot, settings: "Square", width: 50, imgClass: "rounded-circle")
      @person.FirstName @person.LastName
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14
@using System.Linq

@{
  var selected =  AsDynamic(Data.GetStream("Selected").FirstOrDefault());
}
<div>
  Selected: @selected.FirstName @selected.LastName
</div>
<ul>
  @foreach (var person in AsList(Data)) {
    <li>
      @person.FirstName @person.LastName
      @if (person.EntityId == selected.EntityId) {
        <strong>(selected ⭐)</strong>
      }
    </li>
  }
</ul>

 @inherits Custom.Hybrid.Razor14

@{
  // Get a query to be executed when accessed
  // It has 2 streams: Default and Authors
  var query = App.Query["QuickRef-GetQuery"];
}
<h4>Get Books from the <code>Default</code> stream</h4>
<ol>
  @foreach (var book in AsList(query)) {
    <li>@book.EntityTitle</li>
  }
</ol>

<h4>Get Authors from the <code>Authors</code> stream</h4>
<ol>
  @foreach (var author in AsList(query.GetStream("Authors"))) {
    <li>@author.EntityTitle</li>
  }
</ol>

@inherits Custom.Hybrid.Razor14

<h3>
  Does not exist in Razor14 and before
</h3>
<p>
  Queries with Parameters in Code do not exist in older versions of Razor.
</p>

@inherits Custom.Hybrid.Razor14

@{
  // Get a query to be executed when accessed
  // It has 2 streams: Default and Authors
  var query = App.Query["QuickRef-GetQuery"];

  // Get the stream Authors (this exists)
  var authors = query.GetStream("Authors");

  // Get the stream Critics (this does not exist)
  // we'll take a null instead of an error
  var critics = query.GetStream("Critics", nullIfNotFound: true);

  // This will get the authors, as critics is null
  var cOrA = critics ?? authors;

  // Get the stream players (this does not exist)
  // we want an empty list instead of an error
  var players = query.GetStream("Critics", emptyIfNotFound: true);

  // This will keep the empty list, as it's not null
  var pOrA = players ?? authors;
}
<h4>Let's see the if anything exists</h4>
<ol>
  <li>@(authors != null ? "✅" : "🔲") Authors exists? </li>
  <li>@(critics != null ? "✅" : "🔲") Critics exists? </li>
  <li>@(players != null ? "✅" : "🔲") Players exists? </li>
  <li>@(cOrA != null ? "✅" : "🔲") Critics || Authors exists? </li>
  <li>@(pOrA != null ? "✅" : "🔲") Players || Authors exists? </li>
</ol>

<h4>Now let's count what's inside</h4>
<ol>
  <li>Authors: @authors.Count()</li>
  <li>Critics: <em>skip</em></li>
  <li>Players: @players.Count()</li>
  <li>Critics || Authors: @cOrA.Count()</li>
  <li>Players || Authors: @pOrA.Count()</li>
</ol>

@inherits Custom.Hybrid.Razor14

<h4>Get some App Setting / Resources</h4>
<ol>
  <li>Setting CustomColor: <br>
    <code>@App.Settings.CustomColor</code>
  </li>
  <li>Setting CsvFile: <br>
    <code>@App.Settings.CsvFile</code> <br>
    <code>@App.Settings.CsvFile</code>
  </li>
  <li>Resource ButtonOrder: <br>
    <button type="button">@App.Resources.ButtonOrder</button>
  </li>
</ol>

<h4>Get <em>Global</em> Settings</h4>
<ol>
  <li>Settings.Get("Images.Content.Width") <br>
    <code>@Settings.Get("Images.Content.Width")</code>
  </li>
  <li>The same with prefix <code>Settings</code> <br>
    <code>@Settings.Get("Images.Content.Width")</code>
  </li>
  <li>GoogleMaps.DefaultCoordinates <br>
    <code>@Settings.Get("GoogleMaps.DefaultCoordinates")</code>
  </li>
  <li>GoogleMaps.DefaultCoordinates as Typed <br>
    @{
      var json = Settings.Get("GoogleMaps.DefaultCoordinates");
      var coords = AsDynamic(json);
    }
    Lat: @coords.Latitude <br>
    Lng: @coords.Longitude
  </li>
</ol>

@inherits Custom.Hybrid.RazorTyped

<p>
  Note: you won't see any output here.
  To see the effect, look at the page source.
</p>
@* Example with a single-liner directly in the code *@
@Kit.Page.SetTitle("Reference CheatSheet for Razor in 2sxc")
@Kit.Page.AddIconSet(App.Folder.Url + "/assets/icons/razor-blade-icon.png")
@Kit.Page.AddMeta("tutorial", "some value")

@{
  // Example showing how to use in a block of code
  Kit.Page.SetDescription("Learn to use Razor Blade ");
  Kit.Page.SetKeywords("Tutorial, Razor, Blade");
}

@inherits Custom.Hybrid.Razor14

@* Create a JSON-LD using an object - replicating googles example https://developers.google.com/search/docs/guides/intro-structured-data *@
@Kit.Page.AddJsonLd(new Dictionary<string, object> {
    { "@context", "https://schema.org"},
    { "@type", "Organization"},
    { "url", "http://www.example.com"},
    { "name", "Unlimited Ball Bearings Corp."},
    { "contactPoint", new Dictionary<string, object> {
      {"@type", "ContactPoint"},
      {"telephone", "+1-401-555-1212"},
      {"contactType", "Customer service"}
    }}
})

@* Set some OpenGraph headers *@
@Kit.Page.AddOpenGraph("title", "2sxc QuickRef Razor Typed")
@Kit.Page.AddOpenGraph("type", "website")
<p>
  This uses <code>Kit.Page.SetTitle(...)</code> and other methods to modify the HTML sent to the browser. 
  It sets various aspecs such as <code>title</code> or FavIcons.
</p>
<ol>
  <li><code>meta title</code>, <code>meta description</code>, <code>meta keywords</code> </li>
  <li>favicon</li>
  <li>some JsonLd for google</li>
  <li>OpenGraph headers for FaceBook, Twitter, etc.</li>
</ol>

@inherits Custom.Hybrid.Razor14

<ol>
  <li>Platform name: '<code>@CmsContext.Platform.Name</code>'</li>
  <li>Platform type: '<code>@CmsContext.Platform.Type</code>'</li>
  <li>Platform version: '<code>@CmsContext.Platform.Version</code>'</li>

  <li>Culture Current Code: '<code>@CmsContext.Culture.CurrentCode</code>'</li>
  <li>Culture Default Code: '<code>@CmsContext.Culture.DefaultCode</code>'</li>

  <li>Site Id: '<code>@CmsContext.Site.Id</code>'</li>
  <li>Site Url: '<code>@CmsContext.Site.Url</code>'</li>
  <li>Site UrlRoot: '<code>@CmsContext.Site.UrlRoot</code>'</li>

  <li>Page Id: '<code>@CmsContext.Page.Id</code>'</li>
  <li>Page Url: '<code>@CmsContext.Page.Url</code>'</li>
  <li>Page Url Parameters: '<code>@CmsContext.Page.Parameters</code>'</li>

  <li>Module Id: '<code>@CmsContext.Module.Id</code>'</li>

  <li>User Id: '<code>@CmsContext.User.Id</code>'</li>
  <li>User Name: '<code>@CmsContext.User.Name</code>'</li>
  <li>User IsContentAdmin: '<code>@CmsContext.User.IsContentAdmin</code>'</li>
  <li>User IsSiteAdmin: '<code>@CmsContext.User.IsSiteAdmin</code>'</li>
  <li>User IsSystemAdmin: '<code>@CmsContext.User.IsSystemAdmin</code>'</li>

  <li>View Id: '<code>@CmsContext.View.Id</code>'</li>
  <li>View Identifier: '<code>@CmsContext.View.Identifier</code>' (blank if no special identifier) </li>
  <li>View Name: '<code>@CmsContext.View.Name</code>'</li>
  <li>View Edition: '<code>@CmsContext.View.Edition</code>' (blank if no special CSS Framework edition) </li>
</ol>

@inherits Custom.Hybrid.Razor14

<p>
  Load a JavaScript relative to the App folder (see message/console): <br>
  <strong id="loadjs-app-message"></strong>
</p>
<script src="@App.Path/tutorials/js-quickref/js/load-with-app-path.js"></script>

<p>
  Load a JavaScript relative to the folder of this Razor file (see message/console): <br>
  <strong id="loadjs-view-message"></strong>
</p>

<script src="@MyView.Folder.Url/quickref/js/load-with-view-path.js"></script>

@inherits Custom.Hybrid.RazorTyped

<p>
  The following text will be replaced once the JS is triggered: <br>
  <strong id="turnOn1-message"></strong>
</p>

@* Load the JavaScript - it will not run by itself, as the DOM might not be ready
    Note that this can be before or after the TurnOn *@
<script src="@App.Folder.Url/tutorials/js-quickref/js/turnOn1.js"></script>

@* Tell TurnOn to trigger the JS when everything is ready *@
@Kit.Page.TurnOn("window.quickReference.turnOn1Message()")

<p>
  This example passes data to the JS, so it can be parameterized:  <br>
  <strong id="turnOn2-message"></strong>
</p>

@* Tell TurnOn to trigger the JS and give it a string *@
@Kit.Page.TurnOn("window.quickReference.turnOn2Message()", data: "Hello from Razor, the page Id is" + MyPage.Id)

<p>
  We can also pass in more sophisticated data:  <br>
  <strong id="turnOn3-message"></strong>
</p>
@{
  // Create an anonymous object containing the data to send
  var turnOn3Data = new {
    domId = "turnOn3-message",
    message = "Hello from Razor...",
    pageId = MyPage.Id,
    pageUrl = MyPage.Url
  };
}
@* Tell TurnOn to trigger the JS and give it a complex object *@
@Kit.Page.TurnOn("window.quickReference.turnOn3Message()", data: turnOn3Data)

@inherits Custom.Hybrid.RazorTyped

@{
  var buttonId = "demo-uniquekey-btn-" + UniqueKey;
  var messageId = "demo-uniquekey-msg-" + UniqueKey;
}
@* Show the button *@
<button type="button" id="@buttonId" class="btn btn-primary">
  Press to see JS find the button using UniqueKey: @buttonId
</button>

@* Create the DIV for the message - it's in another file, but shares the UniqueKey *@
@Html.Partial("./Uniquekey-Message.cshtml")

@* Trigger the script, and pass in the IDs it will need based on the UniqueKey *@
@Kit.Page.TurnOn("window.quickReference.demoUniqueQuey()", data: new { buttonId, messageId })
@* Load the script - this can be before or after the TurnOn *@
<script src="@App.Folder.Url/tutorials/js-quickref/js/unique-key.js"></script>

@inherits Custom.Hybrid.Razor14

@{
  // Variables for the tests
  string jsonRoot = App.PhysicalPath + "/tutorials/json-quickref/json";

  // Simple JSON strings which could come from a file or web service
  var jDude = System.IO.File.ReadAllText(jsonRoot + "/dude.json");

  // Convert the JSON to ITyped
  var dude = AsDynamic(jDude);
}
<ol>
  <li>
    <code>name</code>: @dude.Name
  </li>
  <li>
    <code>NAME</code> (insensitive): @dude.NAME
  </li>
</ol>

@inherits Custom.Hybrid.Razor14

@{
  // Variables for the tests
  string jsonRoot = App.PhysicalPath + "/tutorials/json-quickref/json";

  // Simple JSON strings which could come from a file or web service
  var jDude = System.IO.File.ReadAllText(jsonRoot + "/dude.json");
  var loose = AsDynamic(jDude);
}
<ol>
  <li>
    <code>loose.String("Fake")</code> (typed):
    @loose.Fake
  </li>
  <li>
    <code>loose.String("Fake")</code>:
    @loose.Fake
  </li>
  <li>
    <code>loose.String("Fake") ?? fallback</code>:
    @(loose.Fake ?? "I don't know!")
  </li>
  <li>
    <code>loose.Int("Fake")</code>:
    @loose.Fake
  </li>
  <li>
    <code>loose.Int("Fake") ?? -1</code>:
    @(loose.Fake ?? -1)
  </li>
</ol>

@inherits Custom.Hybrid.Razor14

@{
  string jsonRoot = App.PhysicalPath + "/tutorials/json-quickref/json";

  // Simple JSON strings which could come from a file or web service
  var jMarc = System.IO.File.ReadAllText(jsonRoot + "/dude-marc.json");
  var jFrank = System.IO.File.ReadAllText(jsonRoot + "/dude-frank.json");

  // Convert the JSON to ITyped
  var marc = AsDynamic(jMarc);
  var frank = AsDynamic(jFrank);
  var year = DateTime.Now.Year;
}
<h4>Marc</h4>
<ol>
  <li>marc.ToString():
    <code>@marc.ToString()</code>
  </li>
  <li>name <code>.String("Name")</code>
    <code>@marc.Name</code>
  </li>
  <li>age: <code>@marc.Age</code></li>
  <li>birth year:
    <code>@(year - marc.Age)</code>
  </li>
  <li>car make (will be null):
    <code>@(marc == null ? null : marc.Car == null ? null : marc.Car.Make)</code>
  </li>
  <li>
    Friends using <code>AsTypedList(...)</code>
    <ul>
      @foreach (var friend in marc.Friends) {
        <li>@friend.Name</li>
      }
    </ul>      
  </li>
</ol>
<h4>Frank</h4>
<ol>
  <li>#2 frank.ToString():
    <code>@frank.ToString()</code>
  </li>
  <li>#2 name:
    <code>@frank.Name</code>
  </li>
  <li>#2 car make:
    <code>@frank.Car.Make</code>
  </li>
  <li>#2 car ToString():
    <code>@(frank.Car == null ? null : frank.Car.ToString())</code>
  </li>
</ol>

@inherits Custom.Hybrid.Razor14

@functions {
  // Custom class to deserialize JSON into
  // must be inside an @functions section
  public class City {
    public string Name { get; set; }
    public int ZipCode { get; set; }
    public List<City> PartnerCities { get;set; }
  }
}
@{
  string jsonRoot = App.PhysicalPath + "/tutorials/json-quickref/json";
  var jCities = System.IO.File.ReadAllText(jsonRoot + "/cities.json");

  // Convert the JSON to City
  var cities = Kit.Json.To<City[]>(jCities);
}
<ul>
  @foreach (var city in cities) {
    <li>
      <code>@city.Name</code>: @city.ZipCode
      @if (city.PartnerCities != null) {
        <br>
        <span>Partner Cities:
          @string.Join(", ", city.PartnerCities.Select(c => c.Name))
        </span>
      }
    </li>
  }
</ul>

@inherits Custom.Hybrid.Razor14

@{
  // Variables for the tests
  string jsonRoot = App.PhysicalPath + "/tutorials/json-quickref/json";

  // Simple JSON strings which could come from a file or web service
  var jCities = System.IO.File.ReadAllText(jsonRoot + "/cities.json");

  // Convert the JSON to ITyped
  var cities = AsDynamic(jCities);
}
<ol>
  @foreach (var city in cities) {
    <li>Name: <code>@city.Name</code></li>
  }
</ol>