Skip to main content
Home  › ... Razor

Razor Blade Tutorials

Tutorial HomeRazor.Blade
#2 Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc. 

RazorBlade Basic Html5 Tag API Introduction v3.0

This API lets you safely create html from code in an elegant way. This basic introduction shows the most basic principles you can apply, and we'll build on that in the next tutorials.

Basic Principles

  1. Quick, Safe Construction
    @Tag.Div() will created typed objects to generate Html5. The Div can be any known Html5 tag, so @Tag.Img(), @Tag.Table(), @Tag.Br() will all work.
    👉 Here is the complete list
  2. Wrap Text and Tags in the constructor
    Use @Tag.Div("hello!") to put content into a tag. You can also put tags inside tags like @Tag.Div(Tag.H3("a title")), and also add an unlimited list of things with @Tag.Div(Tag.H3("Title"), Tag.P("some intro text"), ...)
  3. Add more Text & Tags later on
    Sometimes your code will want to add content step-by-step. You can always do this using .Add(...), so you can write @Tag.Div(Tag.H3("title")).Add(Tag.P("body"))
  4. Replace the contents completely
    Maybe you've contstructed some tags but now the code needs to throw away the previous content and replace it. Use .Wrap(...) for this. So
    @Tag.Div(Tag.H3("...")).Wrap("just reset the content") will completely replace the whole contents with the text.
  5. Set Common Attributes
    Each tag object has many commands on it like Id(...), Class(...), Style(...), Title(...). The result of these commands is always the original object, so you can chain these (fluid API). So you can write @Tag.Div().Id("myId").Class("row highlighted").
    Important: Some attributes are extra smart, like Class or Style, which will SmartJoin the values if called multiple times. Read the special tutorial for that.
  6. Set Tag-Specific Attributes
    All known html5 objects are supported, and return specially typed objects. So you can write @Tag.Img().Src("...") or @Tag.A().Href(...), but @Tag.Img().Href(...) won't work.
    Important: Some attributes are extra smart, like Src on Img or Srcset on Source. Read the special tutorial for that.

Demo Simple Tags like h4 and div

Instead of trying to merge strings like
<div and id='@yourId' and > followed by the content and closed by </div>
you would instead write:
@Tag.Div("your content").Id("wrapper")
Here's what you get with an @Tag.H4(...) and @Tag.Div(...) and when you combine them...

Output

Example 1: This title was code-generated

This div was coded

Example 2a: This h4 title is inside the div

and this text in the div follows the title

Example 2b: This h4 title is inside the div

and this text in the div follows the title
@* this will place an HR in the page - not very useful, but just for a first example *@
@Tag.H3("Example 1: This title was code-generated")

@* now let's create a bootstrap-style box *@
@Tag.Div("This div was coded").Class("alert alert-warning")

@Tag.Div(
  Tag.H4("Example 2a: This h4 title is inside the div"),
  "and this text in the div ",
  Tag.Em("follows the title")
).Class("alert alert-warning")

@* Same example as 2a, but written in a more fluid way *@
@Tag.Div().Class("alert alert-warning").Wrap(
  Tag.H4("Example 2b: This h4 title is inside the div"),
  "and this text in the div ",
  Tag.Em("follows the title")
)

Same example, but with other setup

The following example creates the same div as before, but is written in a more fluid style.

Example 3: Using Tag.Div

Output

This is the intro. I hope you like it otherwise it's ok too 😉
@(Tag.Div("This is the intro. ", 
      Tag.B("I hope you like it"), 
      Tag.I(" otherwise it's ok too"), 
      " 😉"
      )
      .Id("wrapper")
      .Class("alert")
      .Class("alert-dark"))

Example 4: Tag contents can also use Wrap(...) and Add(...)

Now the real power start: using the Wrap method, you can add more content to your tag - and this can be both text, more Tag objects or even lists of Tag objects. Wrap always replaces the content, and you could also use Add(...) instead to append stuff.

Output

Did you know, that you can add text...and tags
as well as more tags and strings inside it?
@{
  var darkBox = Tag.Div()
    .Class("alert alert-dark")
    .Wrap(
      "Did you know, that you can add text...",
      Tag.Code("and tags"),
      Tag.Div(
        "as well as more ", 
        Tag.B("tags"),
        " and strings inside it?"
      )
        .Class("alert")
        .Class("alert-danger")
    );

}
@darkBox
#2 Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc. 

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> Basic Html5 <code>Tag</code> API Introduction <em>v3.0</em></h2>
      <p>
        This API lets you safely create html from code in an elegant way. This basic introduction shows the most basic principles you can apply, and we'll build on that in the next tutorials.
      </p>
    </div>
  </div>
  <h3>Basic Principles</h3>

<ol>
  <li>
    <strong>Quick, Safe Construction</strong> <br>
    <code>@@Tag.Div()</code> will created typed objects to generate Html5. The <code>Div</code> can be any known Html5 tag, so 
    <code>@@Tag.Img()</code>,
    <code>@@Tag.Table()</code>,
    <code>@@Tag.Br()</code>
    will all work. <br>
    @{
      //2sxclint:disable:no-dot-target
    }
    👉 Here is the  @Tag.A("complete list").Href("http://razor-blade.net/api/ToSic.Razor.Blade.Tag.html").Target("_blank")
  </li>
  <li>
    <strong>Wrap Text and Tags in the constructor</strong> <br>
    Use <code>@@Tag.Div("hello!")</code>
    to put content into a tag. You can also put tags inside tags like 
    <code>@@Tag.Div(Tag.H3("a title"))</code>, and also add an unlimited list of things with
    <code>@@Tag.Div(Tag.H3("Title"), Tag.P("some intro text"), ...)</code>
  </li>
  <li>
    <strong>Add more Text & Tags later on</strong><br>
    Sometimes your code will want to add content step-by-step. You can always do this using
    <code>.Add(...)</code>, so you can write
    <code>@@Tag.Div(Tag.H3("title")).Add(Tag.P("body"))</code>
  </li>
  <li>
    <strong>Replace the contents completely</strong><br>
    Maybe you've contstructed some tags but now the code needs to throw away the previous content and replace it. Use 
    <code>.Wrap(...)</code> for this. So <br>
    <code>@@Tag.Div(Tag.H3("...")).Wrap("just reset the content")</code> 
    will completely replace the whole contents with the text.
  </li>
  <li>
    <strong>Set Common Attributes</strong> <br>
    Each tag object has many commands on it like 
    <code>Id(...)</code>, 
    <code>Class(...)</code>,
    <code>Style(...)</code>,
    <code>Title(...)</code>.
    The result of these commands is always the original object, so you can chain these (fluid API). So you can write 
    <code>@@Tag.Div().Id("myId").Class("row highlighted")</code>. <br>
    <em>Important: Some attributes are extra smart, like Class or Style, which will SmartJoin the values if called multiple times. Read the special tutorial for that. </em>
  </li>
  <li>
    <strong>Set Tag-Specific Attributes</strong><br>
    All known html5 objects are supported, and return specially typed objects. So you can write
    <code>@@Tag.Img().Src("...")</code> or 
    <code>@@Tag.A().Href(...)</code>, but 
    <del><code>@@Tag.Img().Href(...)</code></del> won't work. <br>
    <em>Important: Some attributes are extra smart, like <code>Src</code> on <code>Img</code> or <code>Srcset</code> on <code>Source</code>. Read the special tutorial for that. </em>
  </li>
</ol>


</trim>

Demo Simple Tags like h4 and div Instead... <!-- unimportant stuff, hidden -->

  @* this will place an HR in the page - not very useful, but just for a first example *@
  @Tag.H3("Example 1: This title was code-generated")

  @* now let's create a bootstrap-style box *@
  @Tag.Div("This div was coded").Class("alert alert-warning")

  @Tag.Div(
    Tag.H4("Example 2a: This h4 title is inside the div"),
    "and this text in the div ",
    Tag.Em("follows the title")
  ).Class("alert alert-warning")

  @* Same example as 2a, but written in a more fluid way *@
  @Tag.Div().Class("alert alert-warning").Wrap(
    Tag.H4("Example 2b: This h4 title is inside the div"),
    "and this text in the div ",
    Tag.Em("follows the title")
  )


<h3>Same example, but with other setup</h3>
<p>
  The following example creates the same div as before, but is written in a more fluid style.
</p>

<h3>Example 3: Using <code>Tag.Div</code></h3>

  @(Tag.Div("This is the intro. ", 
        Tag.B("I hope you like it"), 
        Tag.I(" otherwise it's ok too"), 
        " 😉"
        )
        .Id("wrapper")
        .Class("alert")
        .Class("alert-dark"))



Example 4: Tag contents can also use... <!-- unimportant stuff, hidden -->

  @{
    var darkBox = Tag.Div()
      .Class("alert alert-dark")
      .Wrap(
        "Did you know, that you can add text...",
        Tag.Code("and tags"),
        Tag.Div(
          "as well as more ", 
          Tag.B("tags"),
          " and strings inside it?"
        )
          .Class("alert")
          .Class("alert-danger")
      );

  }
  @darkBox



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })