@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@using System.Linq;
<!-- unimportant stuff, hidden -->
<div @Sys.PageParts.InfoWrapper()>
@Html.Partial("../shared/DefaultInfoSection.cshtml")
<div @Sys.PageParts.InfoIntro()>
<h2>Quick Reference for <em>Dynamic Razor Code</em></h2>
<p>
This is a quick CheatSheet to provide you with a reference to most APIs you'll use.
</p>
<p>
This uses a base class of <code>@@inherits Custom.Hybrid.Razor14</code> and would also apply to <code>...Razor12</code>.
Most samples do not work for the new <code>@@inherits Custom.Hybrid.Razorpro</code> as that provides different objects and methods. that uses a different syntax.
</p>
</div>
</div>
@* Bootstrap 5 Accordions *@
@{
var accordion = CreateInstance("Accordion.cs");
}
@accordion.Start("accordionExample")
@accordion.ItemStart("basic", "Basic Razor Syntax")
<p>
These are some very common Razor APIs which you should know.
</p>
@* Shared section, which is identical in both Razors syntaxes *@
@Html.Partial("./shared-razor-variables.cshtml")
@Html.Partial("./shared-razor-conditions.cshtml")
@Html.Partial("./shared-razor-loops.cshtml")
@Html.Partial("./shared-razor-html.cshtml")
@accordion.ItemEnd()
@accordion.ItemStart("razor-reuse", "Advanced Razor: Re-Use Code")
<p>
These are some more advanced APIs which are very common as well, so you should be familiar with them.
</p>
@Html.Partial("./shared-razor-functions.cshtml")
@Html.Partial("./shared-razor-partial-no-params.cshtml")
<h3>Reuse Razor Components (Partial) with Parameters</h3>
<h4>Call some external Razor files</h4>
<ol>
<li>@Html.Partial("../reuse/box.cshtml", new { Label = "Hello, this is the first line" })</li>
<li>@Html.Partial("../reuse/box.cshtml", new { Label = "Second line!", Color = "red" })</li>
</ol>
<h3>Reuse Partial Razor and functions from Helper Code files</h3>
@{
// helper library to say hello & create QR codes
var qrLib = CreateInstance("../reuse/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>
@accordion.ItemEnd()
@accordion.ItemStart("ref-content", "Work with Content, Images, Multi-Language")
<p>
Every view/template receives prepared data, either entered by the user on this page, or provided throug a query.
</p>
<h3>Work with Current Content</h3>
<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>
@accordion.ItemEnd()
@accordion.ItemStart("url-parameters", "2sxc Razor APIs to work with Page and Links")
<h3>Page URL Parameters / QueryString</h3>
<ol>
<li>
<a href='@Link.To(parameters: "demo=true")'>Link to this page with demo=true</a>
<br>
<em>Note: you will then not be on this page any more, since other parameters are removed.</em>
</li>
<li>
The current Page parameter for <code>ref100</code> (used in the URL):
@CmsContext.Page.Parameters["ref100"]
</li>
<li>
The current page parameters - used to create a new link: @CmsContext.Page.Parameters
</li>
<li>
<a href='@Link.To(parameters: CmsContext.Page.Parameters)'>Link to current page with same parameters</a>
</li>
<li>
<a href='@Link.To(parameters: CmsContext.Page.Parameters.Set("demo", true))'>Link to current page with demo=true</a>
</li>
</ol>
<h3>Set Page Title, Keywords etc.</h3>
@* Example with a single-liner directly in the code *@
@Kit.Page.SetTitle("Reference CheatSheet for Razor in 2sxc")
@Kit.Page.AddIconSet(App.Path + "/blade/assets/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");
}
@* 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", "Demo of OpenGraph headers")
@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>
<h3>Get Info about Platform, Culture/Languages etc.</h3>
<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>
@accordion.ItemEnd()
@accordion.End()
<p>
</p>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })