Created demo for code behind

Author: iJungleboy

_home.cshtml

@@ -23,7 +23,7 @@
 
   @hlp.TutorialLinkHome("Using Emojis / Emoticons 👍", "html210", "Show Emojis in your output or use them for showing true/false", "")
 
-  @hlp.TutorialLinkHome("Reuse templates and code", "reuse", "You can place common templates, hlp and functions into shared files - both <code>.cshtml</code> and <code>.cs</code>.", "")
+  @hlp.TutorialLinkHome("Reuse templates and code", "reuse", "You can place common templates, hlp and functions into shared files - both <code>.cshtml</code> and <code>.cs</code>. And you can split Razor files into code and templates.", "enhanced for v11")
 </ol>
 
 <hr>

reuse/_000-reuse.cshtml

@@ -20,5 +20,9 @@
   @helpers.TutorialLink("Reuse code with .cs files", 
     "reuse320",
     "CreateInstance is enhanced in 2sxc 10.01 to support .cs files to share code across Razor files and WebApi Controllers.",
-    "new in 10.01")
+    "new in v10")
+  @helpers.TutorialLink("Split Razor Templates into C#-Code and Template", 
+    "reuse410",
+    "Now you can split out complicated C# code so designers don't have to worry about it. ",
+    "new in v11")
 </ol>

reuse/_410-code-behind.code.cshtml

@@ -0,0 +1,14 @@
+@* Code-Behind files must inherit from RazorComponentCode *@
+@inherits ToSic.Sxc.Dnn.RazorComponentCode
+
+@* Functions can just be called by the parent like normal C# functions*@
+@functions {
+  public string Hello() {
+    return "Hello from inner code";
+  }
+}
+
+@* Helpers can be used in the razor code like @Message *@
+@helper Message(string message) {
+  <div class="alert alert-success" >@message</div>
+}

reuse/_410-code-behind.cshtml

@@ -0,0 +1,39 @@
+@* Note that the Code-Behind features requires this @inherits statement *@
+@inherits ToSic.Sxc.Dnn.RazorComponent
+<hide>
+@RenderPage("_header.cshtml")
+</hide>
+
+<trim>
+<h2>Use Code-Behind in Razor Templates (new in V11)</h2>
+<p>
+  Razor Templates should be simple to edit for web designers. When you end up getting complex functions we recommend placing them in a Code-Behind file. This is different from shared code, since the code isn't shared. We're just splitting a razor file into the code-parts and design parts. 
+</p>
+</trim>
+
+<hr>
+<h2>Calling a function from the code-behind</h2>
+<trim>
+<p>This calls the function <code>Hello()</code> from the Code-Behind.</p>
+</trim>
+
+<div>Hello from Code Behind: <strong>@Code.Hello()</strong></div>
+
+<hr>
+<h2>Calling a helper from the code-behind</h2>
+<trim>
+<p>This creates a special alert-div using a Helper called <code>Message</code> from the Code-Behind.</p>
+</trim>
+
+@Code.Message("Message in a special format")
+
+<hide>
+@RenderPage("../shared/_source-code.cshtml", new { Path = VirtualPath }) 
+
+@RenderPage("../shared/_source-code.cshtml", new { 
+  Path = VirtualPath,
+  File = "_410-code-behind.code.cshtml",
+  Size = 400, 
+  // Language = "csharp"
+}) 
+</hide>