Razor Blade Tutorials

Picture Tags for various sizes / resolutions

#6 Start and End Tags

Create custom (non Html5) tags or Tags whose name stems from a variable

Requirements

RazorBlade 3.09

Resources

RazorBlade Fluent Tag API `TagStart`/`TagEnd` v3

A Tag object also has a .TagStart and .TagEnd property, which just contains that part of the tag, allowing you to place these tags around your work.

The result

Output

This tag was written using both .TagStart and .TagEnd because it may be easier for you that way.

@{
  var successBox = Tag.Div().Class("alert alert-success");
}
@successBox.TagStart
  This tag was written using both <code>.TagStart</code> and <code>.TagEnd</code> 
  because it may be easier for you that way.
@successBox.TagEnd

Picture Tags for various sizes / resolutions

#6 Start and End Tags

Create custom (non Html5) tags or Tags whose name stems from a variable

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/_DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2><em>RazorBlade</em> Fluent Tag API <code>TagStart</code>/<code>TagEnd</code> <em>v3</em></h2>
      <div>
        A <code>Tag</code> object also has a <code>.TagStart</code> and <code>.TagEnd</code> property, which just contains that part of the tag, allowing you to place these tags around your work.
      </div>
    </div>
  </div>


<h3>The result</h3>

  @{
    var successBox = Tag.Div().Class("alert alert-success");
  }
  @successBox.TagStart
    This tag was written using both <code>.TagStart</code> and <code>.TagEnd</code> 
    because it may be easier for you that way.
  @successBox.TagEnd